yh-pub 1.0.0 → 1.0.2

package/layout/admin/menu/icon.vue

@@ -1,108 +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>
+<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>