yh-pub 1.0.0

package/layout/admin/menu/icon.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    v-model="iconModal"
+    title="选择ICON"
+    :width="1200">
+    <div style="height: 600px">
+      <el-form
+        :model="searchForm"
+        layout="inline">
+        <el-form-item label="筛选图标">
+          <el-input
+            v-model="searchForm.icon"
+            placeholder="输入中文或者字母筛选"
+            allow-clear></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="icon-choose-container">
+        <template v-for="item in resultList">
+          <i
+            :class="item.value"
+            @click="clickIcon(item)"></i>
+        </template>
+      </div>
+    </div>
+    <div slot="footer">
+      <el-button
+        type="primary"
+        @click="ok()">
+        关闭
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+import { ref, reactive, watch, computed } from "vue";
+import iconList from "./iconList.js";
+const props = defineProps({
+  actionData: {
+    type: Object,
+  },
+});
+const emits = defineEmits(["clickSure"]);
+watch(
+  () => props.actionData,
+  (val) => {
+    if (val.type === "select") {
+      iconModal.value = true;
+      // newIconList = iconList;
+    } else {
+      iconModal.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+const resultList = computed(() => {
+  return iconList.filter((item) => {
+    return (item.label && item.label.indexOf(searchForm.icon) > -1) || (item.value && item.value.indexOf(searchForm.icon) > -1);
+  });
+});
+function ok() {
+  iconModal.value = false;
+}
+function cancel() {
+  iconModal.value = false;
+}
+function clickIcon(val) {
+  toIcon.value = val.value;
+  emits("clickSure", toIcon.value);
+  iconModal.value = false;
+}
+const searchForm = reactive({
+  icon: "",
+});
+
+const iconModal = ref(false);
+const toIcon = ref("");
+</script>
+
+<style lang="less">
+.icon-choose-container {
+  overflow: auto;
+  height: 536px;
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  margin-top: 24px;
+  .iconfont {
+    font-size: 26px;
+    display: inline-block;
+    width: 56.7px;
+    height: 56.7px;
+    text-align: center;
+    line-height: 56.7px;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: font-size 0.2s ease-in-out 0s;
+    &:hover {
+      font-size: 40px;
+    }
+  }
+}
+</style>