| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/components/EleIconPicker/index.vue?vue&type=script&lang=js&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/components/EleIconPicker/index.vue","mtime":1616225306000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgaWNvbnMgZnJvbSAnLi9pY29uLWRhdGEnDQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogIkVsZUljb25QaWNrZXIiLA0KICBtb2RlbDogew0KICAgIHByb3A6ICd2YWx1ZScsDQogICAgZXZlbnQ6ICdjaGFuZ2UnDQogIH0sDQogIHByb3BzOiB7DQogICAgdmFsdWU6IFN0cmluZywgICAgICAgIC8vIOmAieS4reWbvuaghw0KICAgIHBsYWNlaG9sZGVyOiBTdHJpbmcsICAvLyDmj5DnpLrmlofmnKwNCiAgICB3aWR0aDogeyAgICAgICAgICAgICAgLy8g5a695bqmDQogICAgICB0eXBlOiBOdW1iZXIsDQogICAgICBkZWZhdWx0OiAzODANCiAgICB9LA0KICAgIGRhdGE6IHsgICAgICAgICAgICAgICAvLyDlm77moIfmlbDmja4NCiAgICAgIHR5cGU6IEFycmF5LA0KICAgICAgZGVmYXVsdCgpIHsNCiAgICAgICAgcmV0dXJuIGljb25zDQogICAgICB9DQogICAgfSwNCiAgICBzaXplOiBTdHJpbmcsICAgICAgICAgLy8g5bC65a+4DQogICAgcmVhZG9ubHk6IHsgICAgICAgICAgIC8vIOaYr+WQpuWPquivuw0KICAgICAgdHlwZTogQm9vbGVhbiwNCiAgICAgIGRlZmF1bHQ6IHRydWUNCiAgICB9LA0KICAgIGRpc2FibGVkOiBCb29sZWFuLCAgICAvLyDmmK/lkKbnpoHnlKgNCiAgICBjbGVhcmFibGU6IHsgICAgICAgICAgLy8g5piv5ZCm5pi+56S65riF6ZmkDQogICAgICB0eXBlOiBCb29sZWFuLA0KICAgICAgZGVmYXVsdDogdHJ1ZQ0KICAgIH0sDQogICAgdGhlbWU6IFN0cmluZywgICAgICAgIC8vIOmjjuagvOagt+W8jw0KICAgIHNlYXJjaDogeyAgICAgICAgICAgICAvLyDmmK/lkKbmmL7npLrmkJzntKINCiAgICAgIHR5cGU6IEJvb2xlYW4sDQogICAgICBkZWZhdWx0OiB0cnVlDQogICAgfQ0KICB9LA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICBzaG93OiBmYWxzZSwgICAgICAvLyDmmK/lkKbmmL7npLpwb3ANCiAgICAgIGtleXdvcmRzOiAnJywgICAgICAvLyDmkJzntKLlhbPplK7lrZcNCiAgICAgIGxpc3RTaG93OiBmYWxzZSwgIC8vIOaYr+WQpuaYvuekuuWIl+ihqA0KICAgICAgdGltZXI6IG51bGwNCiAgICB9DQogIH0sDQogIGNvbXB1dGVkOiB7DQogICAgLyogY2xhc3MgKi8NCiAgICBwaWNrZXJDbGFzcygpIHsNCiAgICAgIHJldHVybiBbDQogICAgICAgICdlbGUtaWNvbi1waWNrZXInLA0KICAgICAgICB7J2VsZS1pY29uLXBpY2tlci1vcGVuJzogdGhpcy5zaG93fSwNCiAgICAgICAgeydlbGUtaWNvbi1waWNrZXItc3R5bGUyJzogdGhpcy50aGVtZSA9PT0gJ3N0eWxlMid9LA0KICAgICAgICB7J2VsZS1pY29uLXBpY2tlci1zdHlsZTMnOiB0aGlzLnRoZW1lID09PSAnc3R5bGUzJ30NCiAgICAgIF07DQogICAgfSwNCiAgICAvKiDmkJzntKLlkI7nmoTnu5PmnpwgKi8NCiAgICByZXN1bHQoKSB7DQogICAgICBpZiAoIXRoaXMua2V5d29yZHMpIHJldHVybiB0aGlzLmRhdGE7DQogICAgICBsZXQgcmVzdWx0ID0gW107DQogICAgICB0aGlzLmRhdGEuZm9yRWFjaChpdGVtID0+IHsNCiAgICAgICAgcmVzdWx0LnB1c2goe3RpdGxlOiBpdGVtLnRpdGxlLCBpY29uczogaXRlbS5pY29ucy5maWx0ZXIoZCA9PiBkLmluZGV4T2YodGhpcy5rZXl3b3JkcykgIT09IC0xKX0pOw0KICAgICAgfSk7DQogICAgICByZXR1cm4gcmVzdWx0Ow0KICAgIH0sDQogICAgLyog5qCH562+6aG16YCJ5Lit5L2N572uICovDQogICAgYWN0aXZlOiB7DQogICAgICBnZXQoKSB7DQogICAgICAgIGlmICghdGhpcy5yZXN1bHQgfHwgdGhpcy5yZXN1bHQubGVuZ3RoID09PSAwKSByZXR1cm4gbnVsbDsNCiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLnJlc3VsdC5sZW5ndGg7IGkrKykNCiAgICAgICAgICBpZiAodGhpcy5yZXN1bHRbaV0uaWNvbnMubGVuZ3RoICE9PSAwKSByZXR1cm4gdGhpcy5yZXN1bHRbaV0udGl0bGU7DQogICAgICAgIHJldHVybiBudWxsOw0KICAgICAgfSwNCiAgICAgIHNldCgpIHsNCiAgICAgIH0NCiAgICB9DQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICAvKiDpgInmi6nlm77moIcgKi8NCiAgICBjaG9vc2UodmFsdWUpIHsNCiAgICAgIHRoaXMuc2hvdyA9IGZhbHNlOw0KICAgICAgdGhpcy4kZW1pdCgnY2hhbmdlJywgdmFsdWUpOw0KICAgIH0sDQogICAgLyog6K6+572uaW5wdXTlj6ror7sgKi8NCiAgICBzZXRSZWFkb25seShlKSB7DQogICAgICBpZiAodGhpcy5yZWFkb25seSkgZS50YXJnZXQucmVhZE9ubHkgPSB0cnVlOw0KICAgIH0sDQogICAgLyog5by55Ye66Z2i5p2/5omT5byAICovDQogICAgYWZ0ZXJFbnRlcigpIHsNCiAgICAgIGlmICh0aGlzLnRpbWVyKSBjbGVhclRpbWVvdXQodGhpcy50aW1lcik7DQogICAgICB0aGlzLnRpbWVyID0gc2V0VGltZW91dCgoKSA9PiB7DQogICAgICAgIHRoaXMubGlzdFNob3cgPSB0cnVlOw0KICAgICAgfSwgNTApOw0KICAgIH0sDQogICAgLyog5by55Ye66Z2i5p2/5YWz6ZetICovDQogICAgYWZ0ZXJMZWF2ZSgpIHsNCiAgICAgIGlmICh0aGlzLnRpbWVyKSBjbGVhclRpbWVvdXQodGhpcy50aW1lcik7DQogICAgICB0aGlzLmxpc3RTaG93ID0gZmFsc2U7DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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>"]}]}
|
