feat: Add highlight demo

src/locales/en.ts

@@ -91,7 +91,8 @@ export default {
     echart: 'Echart',
     countTo: 'Count to',
     watermark: 'Watermark',
-    qrcode: 'Qrcode'
+    qrcode: 'Qrcode',
+    highlight: 'Highlight'
   },
   analysis: {
     newUser: 'New user',
@@ -245,5 +246,11 @@ export default {
     logoConfig: 'Logo config',
     logoStyle: 'Logo style',
     size: 'size config'
+  },
+  highlightDemo: {
+    highlight: 'Highlight',
+    message: 'The best time to plant a tree is ten years ago, followed by now.',
+    keys1: 'ten years ago',
+    keys2: 'now'
   }
 }

src/locales/zh-CN.ts

@@ -91,7 +91,8 @@ export default {
     echart: '图表',
     countTo: '数字动画',
     watermark: '水印',
-    qrcode: '二维码'
+    qrcode: '二维码',
+    highlight: '高亮'
   },
   analysis: {
     newUser: '新增用户',
@@ -244,5 +245,11 @@ export default {
     logoConfig: 'logo配置',
     logoStyle: 'logo样式',
     size: '大小配置'
+  },
+  highlightDemo: {
+    highlight: '高亮',
+    message: '种一棵树最好的时间是十年前，其次就是现在。',
+    keys1: '十年前',
+    keys2: '现在'
   }
 }

src/router/index.ts

@@ -135,6 +135,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.qrcode')
         }
+      },
+      {
+        path: 'highlight',
+        component: () => import('@/views/Components/Highlight.vue'),
+        name: 'Highlight',
+        meta: {
+          title: t('router.highlight')
+        }
       }
     ]
   },

src/views/Components/Highlight.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Highlight } from '@/components/Highlight'
+import { ElMessage } from 'element-plus'
+
+const { t } = useI18n()
+
+const keyClick = (key: string) => {
+  ElMessage.info(key)
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('highlightDemo.highlight')">
+    <Highlight :keys="[t('highlightDemo.keys1'), t('highlightDemo.keys2')]" @click="keyClick">
+      {{ t('highlightDemo.message') }}
+    </Highlight>
+  </ContentWrap>
+</template>

src/views/Components/Qrcode.vue

@@ -34,19 +34,19 @@ const disabledClick = () => {
     <ElRow :gutter="20" justify="space-between">
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.basicUsage') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.basicUsage') }}</div>
           <Qrcode :text="title" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.imgTag') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.imgTag') }}</div>
           <Qrcode :text="title" tag="img" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.style') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.style') }}</div>
           <Qrcode
             :text="title"
             :options="{
@@ -60,31 +60,31 @@ const disabledClick = () => {
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.click') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.click') }}</div>
           <Qrcode :text="title" @click="codeClick" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.asynchronousContent') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.asynchronousContent') }}</div>
           <Qrcode :text="asyncTitle" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.invalid') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.invalid') }}</div>
           <Qrcode :text="title" disabled @disabled-click="disabledClick" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.logoConfig') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.logoConfig') }}</div>
           <Qrcode :text="title" :logo="logoImg" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.logoStyle') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.logoStyle') }}</div>
           <Qrcode
             :text="title"
             :logo="{
@@ -99,7 +99,7 @@ const disabledClick = () => {
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.size') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.size') }}</div>
           <Qrcode :text="title" :width="250" />
         </ElCard>
       </ElCol>