feat: Highlight组件重构

src/components/Dialog/index.vue

@@ -167,24 +167,29 @@ if (props.draggable) {
   color: #909399;
   cursor: pointer;
   transition: color 0.2s;
+
   &:hover {
     color: #409eff;
   }
 }
+
 .com-dialog__content {
   .content__wrap {
     padding-right: 10px;
   }
+
   :deep(.el-scrollbar__wrap) {
     max-height: 600px; // 最大高度
     overflow-x: hidden; // 隐藏横向滚动栏
   }
 }
+
 .com-dialog__content--fullscreen {
   :deep(.el-scrollbar__wrap) {
     height: calc(~'100vh - 46px - 60px'); // 最大高度
   }
 }
+
 .com-dialog__content--footer {
   :deep(.el-scrollbar__wrap) {
     max-height: calc(~'100vh - 46px - 60px - 70px'); // 最大高度

src/components/Highlight/index.tsx

@@ -0,0 +1,68 @@
+import { defineComponent, PropType, computed, h } from 'vue'
+export default defineComponent({
+  name: 'Highlight',
+  props: {
+    tag: {
+      type: String as PropType<string>,
+      default: 'span'
+    },
+    keys: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    color: {
+      type: String as PropType<string>,
+      default: '#2d8cf0'
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const keyNodes = computed(() => {
+      return props.keys.map((key) => {
+        return h(
+          'span',
+          {
+            onClick: () => {
+              emit('click', key)
+            },
+            style: {
+              color: props.color,
+              cursor: 'pointer'
+            }
+          },
+          key
+        )
+      })
+    })
+
+    function parseText(text: string) {
+      props.keys.forEach((key, index) => {
+        const regexp = new RegExp(key, 'g')
+        text = text.replace(regexp, `{{${index}}}`)
+      })
+      return text.split(/{{|}}/)
+    }
+
+    return {
+      keyNodes,
+      parseText
+    }
+  },
+  render(props: any) {
+    if (!props.$slots.default) return null
+    const node = props.$slots.default()[0].children
+    if (!node) {
+      console.warn('Highlight组件的插槽必须要是文本')
+      return props.$slots.default()[0]
+    }
+    const textArray = props.parseText(node)
+    const regexp = /^[0-9]*$/
+    const nodes = textArray.map((t: any) => {
+      if (regexp.test(t)) {
+        return props.keyNodes[Math.floor(t)] || t
+      }
+      return t
+    })
+    return h(props.tag, nodes)
+  }
+})

src/components/Qrcode/index.vue

@@ -238,28 +238,31 @@ function canvasRoundRect(ctx: CanvasRenderingContext2D) {
 
 <style lang="less" scoped>
 .qrcode__wrap {
-  display: inline-block;
   position: relative;
+  display: inline-block;
+
   .disabled__wrap {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.95);
     top: 0;
     left: 0;
     display: flex;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.95);
     align-items: center;
     justify-content: center;
-    cursor: pointer;
+
     & > div {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%);
       font-weight: bold;
+      transform: translate(-50%, -50%);
+
       i {
-        font-size: 30px;
         margin-bottom: 10px;
+        font-size: 30px;
       }
     }
   }

src/components/Search/index.vue

@@ -306,32 +306,38 @@ function changeVal(val: any, item: any): void {
   .ant-form-item {
     min-height: 60px;
   }
+
   .ant-form-item-with-help {
     margin-bottom: 0;
   }
 }
+
 .search__bottom {
-  text-align: center;
   padding-bottom: 20px;
+  text-align: center;
+
   .search__bottom--button {
     display: inline-block;
   }
 }
+
 .search__bottom--col {
+  position: relative;
   padding-bottom: 0;
   margin-top: 5px;
-  position: relative;
+
   .search__bottom--button {
     display: inline-block;
   }
 }
+
 .search__bottom--col::before {
-  content: '';
-  width: 1px;
-  height: 100%;
-  border-left: 1px solid #d9d9d9;
   position: absolute;
   top: 0;
   left: 0;
+  width: 1px;
+  height: 100%;
+  border-left: 1px solid #d9d9d9;
+  content: '';
 }
 </style>