| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/components/EleIconPicker/index.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/components/EleIconPicker/index.vue","mtime":1616225306000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQovKiDlvLnlh7rpnaLmnb8gKi8NCi5lbGUtaWNvbi1waWNrZXItcG9wcGVyLmVsLXBvcG92ZXIgew0KICBtYXgtd2lkdGg6IDEwMCU7DQogIHBhZGRpbmc6IDRweCAzcHggMTVweCAxNXB4Ow0KfQ0KDQouZWxlLWljb24tcGlja2VyLXBvcHBlci5lbC1wb3BvdmVyIC5wb3BwZXJfX2Fycm93IHsNCiAgbGVmdDogMzVweCAhaW1wb3J0YW50Ow0KfQ0KDQovKiDpgInpobnljaEgKi8NCi5lbGUtaWNvbi1waWNrZXItcG9wcGVyIC5lbC10YWJzIC5lbC10YWJzX19pdGVtIHsNCiAgcGFkZGluZzogMCAxMnB4ICFpbXBvcnRhbnQ7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXItcG9wcGVyIC5lbC10YWJzIC5lbC10YWJzX19oZWFkZXIgew0KICBtYXJnaW46IDAgMTJweCA1cHggMDsNCn0NCg0KLmVsZS1pY29uLXBpY2tlci1wb3BwZXIgLmVsLXRhYnMgLmVsLXRhYnNfX2hlYWRlciAuZWwtdGFic19fbmF2LXdyYXA6YWZ0ZXIgew0KICByaWdodDogMTJweDsNCiAgd2lkdGg6IGF1dG87DQp9DQoNCi8qIOWbvuaghyAqLw0KLmVsZS1pY29uLXBpY2tlci1wb3BwZXIgLmVsLWNhcmQgew0KICBtYXJnaW46IDEwcHggMTJweCAwIDA7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXItcG9wcGVyIC5lbC1jYXJkX19ib2R5IHsNCiAgcGFkZGluZzogMDsNCn0NCg0KLmVsZS1pY29uLXBpY2tlci1wb3BwZXIgLmVsZS1pY29uLXBpY2tlci1pdGVtIHsNCiAgZGlzcGxheTogYmxvY2s7DQogIHBhZGRpbmc6IDhweCAwOw0KICBmb250LXNpemU6IDIwcHg7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIC4xczsNCiAgY3Vyc29yOiBwb2ludGVyOw0KfQ0KDQouZWxlLWljb24tcGlja2VyLXBvcHBlciAuZWxlLWljb24tcGlja2VyLWl0ZW06aG92ZXIgew0KICB0cmFuc2Zvcm06IHNjYWxlKDEuNSk7DQp9DQoNCi8qIOa7muWKqOadoSAqLw0KLmVsZS1pY29uLXBpY2tlci1wb3BwZXIgLmVsLXNjcm9sbGJhcl9fd3JhcCB7DQogIG92ZXJmbG93LXg6IGhpZGRlbjsNCiAgbWFyZ2luLXJpZ2h0OiAwICFpbXBvcnRhbnQ7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXItcG9wcGVyIC5lbC1zY3JvbGxiYXJfX3dyYXA6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgd2lkdGg6IDA7DQogIGhlaWdodDogMDsNCn0NCg0KLyog5pCc57Si5qGGICovDQouZWxlLWljb24tcGlja2VyLXBvcHBlciAuZWxlLWljb24tcGlja2VyLXNlYXJjaCB7DQogIHdpZHRoOiAxMTBweDsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICByaWdodDogMTVweDsNCiAgdG9wOiA4cHg7DQp9DQoNCi8qIOm7mOiupOagt+W8jyAqLw0KLmVsZS1pY29uLXBpY2tlciAuZWwtaW5wdXQ6bm90KC5pcy1kaXNhYmxlZCksDQouZWxlLWljb24tcGlja2VyIC5lbC1pbnB1dDpub3QoLmlzLWRpc2FibGVkKSAuZWwtaW5wdXRfX2lubmVyLA0KLmVsZS1pY29uLXBpY2tlciAuZWwtaW5wdXQtZ3JvdXBfX2FwcGVuZCB7DQogIGN1cnNvcjogcG9pbnRlcjsNCn0NCg0KLmVsZS1pY29uLXBpY2tlciAuaXMtZGlzYWJsZWQgPiAuZWwtaW5wdXQtZ3JvdXBfX2FwcGVuZCB7DQogIGN1cnNvcjogbm90LWFsbG93ZWQ7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXIgLmVsLWlucHV0Om5vdCguaXMtZGlzYWJsZWQpIC5lbC1pbnB1dF9fcHJlZml4LA0KLmVsZS1pY29uLXBpY2tlcjpub3QoLmVsZS1pY29uLXBpY2tlci1zdHlsZTMpIC5lbC1pbnB1dDpub3QoLmlzLWRpc2FibGVkKSAuZWwtaW5wdXQtZ3JvdXBfX2FwcGVuZCB7DQogIGNvbG9yOiB1bnNldDsNCn0NCg0KLmVsZS1pY29uLXBpY2tlciAuZWwtaW5wdXRfX3N1ZmZpeCAuZWwtaWNvbi1hcnJvdy1kb3duLA0KLmVsZS1pY29uLXBpY2tlci1zdHlsZTMgLmVsLWlucHV0LWdyb3VwX19hcHBlbmQgLmVsLWljb24tYXJyb3ctZG93biB7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXItb3BlbiAuZWwtaW5wdXQgLmVsLWlucHV0X19zdWZmaXggLmVsLWljb24tYXJyb3ctZG93biwNCi5lbGUtaWNvbi1waWNrZXItc3R5bGUzLmVsZS1pY29uLXBpY2tlci1vcGVuIC5lbC1pbnB1dC1ncm91cF9fYXBwZW5kIC5lbC1pY29uLWFycm93LWRvd24gew0KICB0cmFuc2Zvcm06IHJvdGF0ZSgtMTgwZGVnKTsNCn0NCg0KLmVsZS1pY29uLXBpY2tlciAuZWwtaW5wdXRfX3N1ZmZpeCAuZWwtaW5wdXRfX2NsZWFyIHsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB0b3A6IDA7DQogIHJpZ2h0OiAwOw0KfQ0KDQouZWxlLWljb24tcGlja2VyIC5lbC1pbnB1dF9fc3VmZml4IC5lbC1pbnB1dF9fY2xlYXI6YmVmb3JlIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgYm9yZGVyLXJhZGl1czogNTAlOw0KfQ0KDQovKiDmoLflvI/kuowgKi8NCi5lbGUtaWNvbi1waWNrZXItc3R5bGUyIC5lbC1pbnB1dC1ncm91cF9fYXBwZW5kIHsNCiAgbWluLXdpZHRoOiAzOXB4Ow0KICBwYWRkaW5nLWxlZnQ6IDEycHg7DQogIHBhZGRpbmctcmlnaHQ6IDEycHg7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXItc3R5bGUyIC5lbC1pbnB1dF9fc3VmZml4IHsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDBzOw0KfQ0KDQovKiDmoLflvI/kuIkgKi8NCi5lbGUtaWNvbi1waWNrZXItc3R5bGUzIHsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KfQ0KDQouZWxlLWljb24tcGlja2VyLXN0eWxlMyAuZWwtaW5wdXQgew0KICB3aWR0aDogYXV0bzsNCn0NCg0KLmVsZS1pY29uLXBpY2tlci1zdHlsZTMgLmVsLWlucHV0X19pbm5lciB7DQogIHdpZHRoOiA0N3B4Ow0KICBwb2ludGVyLWV2ZW50czogbm9uZTsNCn0NCg0KLmVsZS1pY29uLXBpY2tlci1zdHlsZTMgLmVsLWlucHV0X19wcmVmaXggew0KICBsZWZ0OiAxMnB4Ow0KfQ0KDQouZWxlLWljb24tcGlja2VyLXN0eWxlMyAuZWwtaW5wdXQtZ3JvdXBfX2FwcGVuZCB7DQogIHBhZGRpbmctbGVmdDogNXB4Ow0KICBwYWRkaW5nLXJpZ2h0OiA1cHg7DQp9DQoNCi5lbGUtaWNvbi1waWNrZXItc3R5bGUzIC5lbC1pbnB1dDpub3QoLmlzLWRpc2FibGVkKSAuZWwtaW5wdXQtZ3JvdXBfX2FwcGVuZCB7DQogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Ow0KfQ0KDQouZWxlLWljb24tcGlja2VyLXN0eWxlMyAuZWwtaW5wdXQ6bm90KC5pcy1kaXNhYmxlZCkgLmVsLWlucHV0LWdyb3VwX19hcHBlbmQ6aG92ZXIgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIC4wMik7DQp9DQoNCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/EleIconPicker","sourcesContent":["<!-- 图标选择器组件 -->\r\n<template>\r\n <el-popover v-model=\"show\" :width=\"width\" popper-class=\"ele-icon-picker-popper\"\r\n placement=\"bottom-start\" transition=\"el-zoom-in-top\" :disabled=\"disabled\"\r\n @show=\"afterEnter\" @hide=\"afterLeave\">\r\n <div :class=\"pickerClass\" slot=\"reference\">\r\n <slot v-bind:show=\"show\" v-bind:value=\"value\">\r\n <!-- 样式二 -->\r\n <el-input v-if=\"theme==='style2'\" v-model=\"value\" :placeholder=\"placeholder\" :clearable=\"clearable\"\r\n :disabled=\"disabled\" :size=\"size\" @focus=\"setReadonly\">\r\n <template slot=\"append\"><i :class=\"value\"></i></template>\r\n </el-input>\r\n <!-- 样式三 -->\r\n <el-input v-else-if=\"theme==='style3'\" :prefix-icon=\"value\" :disabled=\"disabled\" :size=\"size\"\r\n readonly=\"readonly\">\r\n <template slot=\"append\"><i class=\"el-icon-arrow-down\"></i></template>\r\n </el-input>\r\n <!-- 默认样式 -->\r\n <el-input v-else v-model=\"value\" :prefix-icon=\"value\" :placeholder=\"placeholder\" :clearable=\"clearable\"\r\n :disabled=\"disabled\" :size=\"size\" suffix-icon=\"el-icon-arrow-down\" @focus=\"setReadonly\"/>\r\n </slot>\r\n </div>\r\n <el-tabs v-model=\"active\">\r\n <el-tab-pane v-for=\"(item,index) in result\" :key=\"index\" :label=\"item.title\" :name=\"item.title\">\r\n <el-scrollbar v-if=\"listShow\" style=\"height:225px;\">\r\n <el-row>\r\n <el-col :span=\"4\" v-for=\"(d,i) in item.icons\" :key=\"i\">\r\n <el-card shadow=\"hover\" class=\"ele-card-border\" :title=\"d\">\r\n <div class=\"ele-icon-picker-item\" @click=\"choose(d)\"><i :class=\"d\"/></div>\r\n </el-card>\r\n </el-col>\r\n </el-row>\r\n </el-scrollbar>\r\n <div v-else style=\"height:225px;line-height: 225px;text-align: center;\">加载中..</div>\r\n </el-tab-pane>\r\n </el-tabs>\r\n <el-input v-if=\"search\" v-model=\"keywords\" placeholder=\"搜索...\" size=\"mini\" suffix-icon=\"el-icon-search\"\r\n class=\"ele-icon-picker-search\"/>\r\n </el-popover>\r\n</template>\r\n\r\n<script>\r\nimport icons from './icon-data'\r\n\r\nexport default {\r\n name: \"EleIconPicker\",\r\n model: {\r\n prop: 'value',\r\n event: 'change'\r\n },\r\n props: {\r\n value: String, // 选中图标\r\n placeholder: String, // 提示文本\r\n width: { // 宽度\r\n type: Number,\r\n default: 380\r\n },\r\n data: { // 图标数据\r\n type: Array,\r\n default() {\r\n return icons\r\n }\r\n },\r\n size: String, // 尺寸\r\n readonly: { // 是否只读\r\n type: Boolean,\r\n default: true\r\n },\r\n disabled: Boolean, // 是否禁用\r\n clearable: { // 是否显示清除\r\n type: Boolean,\r\n default: true\r\n },\r\n theme: String, // 风格样式\r\n search: { // 是否显示搜索\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n show: false, // 是否显示pop\r\n keywords: '', // 搜索关键字\r\n listShow: false, // 是否显示列表\r\n timer: null\r\n }\r\n },\r\n computed: {\r\n /* class */\r\n pickerClass() {\r\n return [\r\n 'ele-icon-picker',\r\n {'ele-icon-picker-open': this.show},\r\n {'ele-icon-picker-style2': this.theme === 'style2'},\r\n {'ele-icon-picker-style3': this.theme === 'style3'}\r\n ];\r\n },\r\n /* 搜索后的结果 */\r\n result() {\r\n if (!this.keywords) return this.data;\r\n let result = [];\r\n this.data.forEach(item => {\r\n result.push({title: item.title, icons: item.icons.filter(d => d.indexOf(this.keywords) !== -1)});\r\n });\r\n return result;\r\n },\r\n /* 标签页选中位置 */\r\n active: {\r\n get() {\r\n if (!this.result || this.result.length === 0) return null;\r\n for (let i = 0; i < this.result.length; i++)\r\n if (this.result[i].icons.length !== 0) return this.result[i].title;\r\n return null;\r\n },\r\n set() {\r\n }\r\n }\r\n },\r\n methods: {\r\n /* 选择图标 */\r\n choose(value) {\r\n this.show = false;\r\n this.$emit('change', value);\r\n },\r\n /* 设置input只读 */\r\n setReadonly(e) {\r\n if (this.readonly) e.target.readOnly = true;\r\n },\r\n /* 弹出面板打开 */\r\n afterEnter() {\r\n if (this.timer) clearTimeout(this.timer);\r\n this.timer = setTimeout(() => {\r\n this.listShow = true;\r\n }, 50);\r\n },\r\n /* 弹出面板关闭 */\r\n afterLeave() {\r\n if (this.timer) clearTimeout(this.timer);\r\n this.listShow = false;\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n/* 弹出面板 */\r\n.ele-icon-picker-popper.el-popover {\r\n max-width: 100%;\r\n padding: 4px 3px 15px 15px;\r\n}\r\n\r\n.ele-icon-picker-popper.el-popover .popper__arrow {\r\n left: 35px !important;\r\n}\r\n\r\n/* 选项卡 */\r\n.ele-icon-picker-popper .el-tabs .el-tabs__item {\r\n padding: 0 12px !important;\r\n}\r\n\r\n.ele-icon-picker-popper .el-tabs .el-tabs__header {\r\n margin: 0 12px 5px 0;\r\n}\r\n\r\n.ele-icon-picker-popper .el-tabs .el-tabs__header .el-tabs__nav-wrap:after {\r\n right: 12px;\r\n width: auto;\r\n}\r\n\r\n/* 图标 */\r\n.ele-icon-picker-popper .el-card {\r\n margin: 10px 12px 0 0;\r\n}\r\n\r\n.ele-icon-picker-popper .el-card__body {\r\n padding: 0;\r\n}\r\n\r\n.ele-icon-picker-popper .ele-icon-picker-item {\r\n display: block;\r\n padding: 8px 0;\r\n font-size: 20px;\r\n text-align: center;\r\n transition: transform .1s;\r\n cursor: pointer;\r\n}\r\n\r\n.ele-icon-picker-popper .ele-icon-picker-item:hover {\r\n transform: scale(1.5);\r\n}\r\n\r\n/* 滚动条 */\r\n.ele-icon-picker-popper .el-scrollbar__wrap {\r\n overflow-x: hidden;\r\n margin-right: 0 !important;\r\n}\r\n\r\n.ele-icon-picker-popper .el-scrollbar__wrap::-webkit-scrollbar {\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n/* 搜索框 */\r\n.ele-icon-picker-popper .ele-icon-picker-search {\r\n width: 110px;\r\n position: absolute;\r\n right: 15px;\r\n top: 8px;\r\n}\r\n\r\n/* 默认样式 */\r\n.ele-icon-picker .el-input:not(.is-disabled),\r\n.ele-icon-picker .el-input:not(.is-disabled) .el-input__inner,\r\n.ele-icon-picker .el-input-group__append {\r\n cursor: pointer;\r\n}\r\n\r\n.ele-icon-picker .is-disabled > .el-input-group__append {\r\n cursor: not-allowed;\r\n}\r\n\r\n.ele-icon-picker .el-input:not(.is-disabled) .el-input__prefix,\r\n.ele-icon-picker:not(.ele-icon-picker-style3) .el-input:not(.is-disabled) .el-input-group__append {\r\n color: unset;\r\n}\r\n\r\n.ele-icon-picker .el-input__suffix .el-icon-arrow-down,\r\n.ele-icon-picker-style3 .el-input-group__append .el-icon-arrow-down {\r\n transition: transform .3s;\r\n}\r\n\r\n.ele-icon-picker-open .el-input .el-input__suffix .el-icon-arrow-down,\r\n.ele-icon-picker-style3.ele-icon-picker-open .el-input-group__append .el-icon-arrow-down {\r\n transform: rotate(-180deg);\r\n}\r\n\r\n.ele-icon-picker .el-input__suffix .el-input__clear {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n}\r\n\r\n.ele-icon-picker .el-input__suffix .el-input__clear:before {\r\n background-color: #fff;\r\n border-radius: 50%;\r\n}\r\n\r\n/* 样式二 */\r\n.ele-icon-picker-style2 .el-input-group__append {\r\n min-width: 39px;\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.ele-icon-picker-style2 .el-input__suffix {\r\n transition: transform 0s;\r\n}\r\n\r\n/* 样式三 */\r\n.ele-icon-picker-style3 {\r\n display: inline-block;\r\n}\r\n\r\n.ele-icon-picker-style3 .el-input {\r\n width: auto;\r\n}\r\n\r\n.ele-icon-picker-style3 .el-input__inner {\r\n width: 47px;\r\n pointer-events: none;\r\n}\r\n\r\n.ele-icon-picker-style3 .el-input__prefix {\r\n left: 12px;\r\n}\r\n\r\n.ele-icon-picker-style3 .el-input-group__append {\r\n padding-left: 5px;\r\n padding-right: 5px;\r\n}\r\n\r\n.ele-icon-picker-style3 .el-input:not(.is-disabled) .el-input-group__append {\r\n background-color: transparent;\r\n}\r\n\r\n.ele-icon-picker-style3 .el-input:not(.is-disabled) .el-input-group__append:hover {\r\n background-color: rgba(0, 0, 0, .02);\r\n}\r\n\r\n</style>"]}]}
|
