{"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=style&index=0&lang=css&","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/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/postcss-loader/src/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: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>"]}]}