重构 scIconSelect 组件
This commit is contained in:
sc
sakuya
parent
0f972114ba
commit
64bca66436
|
|
@ -1,35 +1,47 @@
|
|||
<!--
|
||||
* @Descripttion: 图标选择器组件
|
||||
* @version: 1.4
|
||||
* @version: 2.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月27日10:02:46
|
||||
* @LastEditors: sakuya
|
||||
* @LastEditTime: 2022年5月14日19:49:42
|
||||
* @LastEditTime: 2022年6月6日13:48:49
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-icon-select">
|
||||
<el-input v-model="defaultValue" :prefix-icon="defaultValue||'none'" :placeholder="placeholder" :clearable="clearable" :disabled="disabled">
|
||||
<template #append><el-button icon="el-icon-more-filled" @click="open"></el-button></template>
|
||||
</el-input>
|
||||
<el-dialog title="图标选择器" v-model="dialogVisible" :width="780" destroy-on-close>
|
||||
<el-tabs style="margin-top: -30px;">
|
||||
<el-tab-pane v-for="item in data" :key="item.name" lazy>
|
||||
<template #label>
|
||||
{{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
|
||||
</template>
|
||||
<div class="sc-icon-select__list">
|
||||
<el-scrollbar>
|
||||
<ul @click="selectIcon">
|
||||
<li v-for="icon in item.icons" :key="icon">
|
||||
<span :data-icon="icon"></span>
|
||||
<el-icon><component :is="icon" /></el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="sc-icon-select__wrapper" :class="{'hasValue':value}" @click="open">
|
||||
<el-input :prefix-icon="value||'el-icon-plus'" v-model="value" :disabled="disabled" readonly></el-input>
|
||||
</div>
|
||||
<el-dialog title="图标选择器" v-model="dialogVisible" :width="760" destroy-on-close append-to-body>
|
||||
<div class="sc-icon-select__dialog" style="margin: -20px 0 -10px 0;">
|
||||
<el-form :rules="{}">
|
||||
<el-form-item prop="searchText">
|
||||
<el-input class="sc-icon-select__search-input" prefix-icon="el-icon-search" v-model="searchText" placeholder="搜索" size="large" clearable/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs>
|
||||
<el-tab-pane v-for="item in data" :key="item.name" lazy>
|
||||
<template #label>
|
||||
{{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
|
||||
</template>
|
||||
<div class="sc-icon-select__list">
|
||||
<el-scrollbar>
|
||||
<ul @click="selectIcon">
|
||||
<el-empty v-if="item.icons.length==0" :image-size="100" description="未查询到相关图标" />
|
||||
<li v-for="icon in item.icons" :key="icon">
|
||||
<span :data-icon="icon"></span>
|
||||
<el-icon><component :is="icon" /></el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="clear" text>清除</el-button>
|
||||
<el-button @click="dialogVisible=false">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -40,27 +52,28 @@
|
|||
export default {
|
||||
props: {
|
||||
modelValue: { type: String, default: "" },
|
||||
placeholder: { type: String, default: "请输入或者选择图标" },
|
||||
clearable: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultValue: '',
|
||||
value: "",
|
||||
dialogVisible: false,
|
||||
data: []
|
||||
data: [],
|
||||
searchText: ""
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(val){
|
||||
this.defaultValue = val
|
||||
this.value = val
|
||||
},
|
||||
defaultValue(val){
|
||||
value(val){
|
||||
this.$emit('update:modelValue', val)
|
||||
},
|
||||
searchText(val){
|
||||
this.search(val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.defaultValue = this.modelValue
|
||||
this.data.push(...config.icons)
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -74,25 +87,41 @@
|
|||
if(e.target.tagName != 'SPAN'){
|
||||
return false
|
||||
}
|
||||
this.defaultValue = e.target.dataset.icon
|
||||
this.value = e.target.dataset.icon
|
||||
this.dialogVisible = false
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
},
|
||||
clear(){
|
||||
this.value = ""
|
||||
this.dialogVisible = false
|
||||
},
|
||||
search(text){
|
||||
if(text){
|
||||
const filterData = JSON.parse(JSON.stringify(config.icons))
|
||||
filterData.forEach(t => {
|
||||
t.icons = t.icons.filter(n => n.includes(text))
|
||||
})
|
||||
this.data = filterData
|
||||
}else{
|
||||
this.data = JSON.parse(JSON.stringify(config.icons))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-icon-select {display: inline-block;}
|
||||
.sc-icon-select__list {height:360px;overflow: auto;}
|
||||
.sc-icon-select__list ul {}
|
||||
.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;box-shadow: 0 0 0 1px #eee;transition: all 0.1s;border-radius: 4px;position: relative;}
|
||||
.sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
|
||||
.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
|
||||
.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
|
||||
.sc-icon-select__list li:hover i {color: #409EFF;}
|
||||
.sc-icon-select {display: inline-flex;}
|
||||
.sc-icon-select__wrapper {cursor: pointer;display: inline-flex;}
|
||||
.sc-icon-select__wrapper:deep(.el-input__wrapper).is-focus {box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;}
|
||||
.sc-icon-select__wrapper:deep(.el-input__inner) {flex-grow:0;width: 0;}
|
||||
.sc-icon-select__wrapper:deep(.el-input__icon) {margin: 0;font-size: 16px;}
|
||||
.sc-icon-select__wrapper.hasValue:deep(.el-input__icon) {color: var(--el-text-color-regular);}
|
||||
|
||||
.dark .sc-icon-select__list li {box-shadow: 0 0 0 1px #333;;}
|
||||
.dark .sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
|
||||
.dark .sc-icon-select__list li i {background: var(--el-bg-color);}
|
||||
.sc-icon-select__list {height:270px;overflow: auto;}
|
||||
.sc-icon-select__list ul {}
|
||||
.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;transition: all 0.1s;border-radius: 4px;position: relative;}
|
||||
.sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
|
||||
.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
|
||||
.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px var(--el-color-primary);background: var(--el-color-primary-light-9);}
|
||||
.sc-icon-select__list li:hover i {color: var(--el-color-primary);}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<el-card shadow="never">
|
||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<sc-icon-select v-model="form.icon" clearable :disabled="disabled"></sc-icon-select>
|
||||
<sc-icon-select v-model="form.icon" :disabled="disabled"></sc-icon-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue