合并master

manager/src/views/my-components/lili/icon-choose.vue

@@ -1,221 +0,0 @@
-<template>
-  <div>
-    <div style="display:flex">
-      <Input
-        v-model="currentValue"
-        @on-change="handleChange"
-        :placeholder="placeholder"
-        :size="size"
-        :disabled="disabled"
-        :readonly="readonly"
-        :maxlength="maxlength"
-        :icon="currentValue"
-      />
-      <Button
-        @click="iconModalVisible=true"
-        :size="size"
-        :disabled="disabled"
-        :icon="icon"
-        style="margin-left:10px"
-      >选择图标</Button>
-    </div>
-
-    <Modal
-      title="选择图标"
-      v-model="iconModalVisible"
-      :width="950"
-      :styles="{top: '30px'}"
-      footer-hide
-      :z-index="1060"
-    >
-      <div class="icon-search">
-        <input
-          type="text"
-          v-model="key"
-          :placeholder="tip"
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-        >
-      </div>
-      <div class="icon-block icon-bar">
-        <div class="icon-wrap" v-for="(item, i) in iconData" :key="i" @click="hanleChoose(item)">
-          <div class="icons-item">
-            <Icon :type="item" style="font-size: 32px;"/>
-            <p>{{item}}</p>
-          </div>
-        </div>
-      </div>
-    </Modal>
-  </div>
-</template>
-
-<script>
-import { icons } from "@/libs/icon";
-export default {
-  name: "iconChoose",
-  props: {
-    value: {
-      type: String,
-      default: ""
-    },
-    size: String,
-    placeholder: {
-      type: String,
-      default: "输入图标名或选择图标"
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    maxlength: Number,
-    icon: {
-      type: String,
-      default: "md-ionic"
-    }
-  },
-  data() {
-    return {
-      iconModalVisible: false, // modal显隐
-      currentValue: this.value, // 当前值
-      iconData: [], // icon列表
-      key: "", // 关键词
-      tip: "输入英文关键词搜索，比如 success"
-    };
-  },
-  methods: {
-    init() {
-      let re = [];
-      icons.forEach(e => {
-        e.icons.forEach(item => {
-          re.push(item);
-        });
-      });
-      this.iconData = re;
-    },
-    handleInput() {
-      if (this.key) {
-        // 搜索
-        let re = [];
-        icons.forEach(e => {
-          e.tags.forEach(item => {
-            if (item.indexOf(this.key) >= 0) {
-              e.icons.forEach(r => {
-                re.push(r);
-              });
-            }
-          });
-        });
-        this.iconData = re;
-      } else {
-        this.init();
-      }
-    },
-    handleFocus() {
-      if (!this.key) {
-        this.tip = "";
-      }
-    },
-    handleBlur() {
-      if (!this.key) {
-        this.tip = "输入英文关键词搜索，比如 success";
-      }
-    },
-    handleChange(v) {
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue);
-    },
-    setCurrentValue(value) {
-      if (value === this.currentValue) {
-        return;
-      }
-      this.currentValue = value;
-    },
-    hanleChoose(v) {
-      this.currentValue = v;
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue);
-      this.iconModalVisible = false;
-    }
-  },
-  watch: {
-    value(val) {
-      this.setCurrentValue(val);
-    }
-  },
-  created() {
-    this.init();
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.icon-search {
-  position: relative;
-  margin: 20px auto 30px;
-  text-align: center;
-  input {
-    width: 500px;
-    box-sizing: border-box;
-    border: 0;
-    border-radius: 4px;
-    background: #f5f5f5;
-    text-align: center;
-    font-size: 14px;
-    outline: none;
-    margin: 0 auto;
-    padding: 8px 0;
-  }
-}
-.icon-block {
-  display: flex;
-  flex-wrap: wrap;
-  max-height: 500px;
-  overflow: auto;
-}
-.icon-bar {
-  overflow: auto;
-  overflow-x: hidden;
-}
-.icon-bar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.icon-bar::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: #c3c3c3;
-}
-
-.icon-bar::-webkit-scrollbar-track {
-  background: #fff;
-}
-.icon-wrap {
-  :hover {
-    color: #1890ff;
-    transition: color 0.3s;
-  }
-}
-.icons-item {
-  margin: 6px 6px 6px 0;
-  width: 145px;
-  text-align: center;
-  list-style: none;
-  cursor: pointer;
-  height: 100px;
-  color: #5c6b77;
-  transition: all 0.2s ease;
-  position: relative;
-  padding-top: 10px;
-  p {
-    padding-top: 15px;
-    margin: 5px;
-    font-size: 14px;
-  }
-}
-</style>
-