-
Notifications
You must be signed in to change notification settings - Fork 657
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3d96229
commit 34221f3
Showing
11 changed files
with
399 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <template> | ||
| <div> | ||
| <el-alert | ||
| effect="dark" | ||
| :closable="false" | ||
| title="文字高亮组件 -- 基础用法" | ||
| type="info" | ||
| style="margin-bottom: 20px" | ||
| /> | ||
| <highlight :keys="['vue-element-plus-admin', 'vue-element-admin', 'vben-admin']"> | ||
| vue-element-plus-admin是一个基于vue3、vite2、element-plus的后台解决方案，借鉴了vue-element-admin和vben-admin的写法和优点。内置了动态路由，权限验证，典型的业务模型，丰富的功能组件，并且提供了多页配置，开箱即用，可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型，也可以作为一个示例，用于学习。 | ||
| </highlight> | ||
|
|
||
| <el-alert | ||
| effect="dark" | ||
| :closable="false" | ||
| title="文字高亮组件 -- 点击事件" | ||
| type="info" | ||
| style="margin-top: 20px; margin-bottom: 20px" | ||
| /> | ||
| <highlight | ||
| :keys="['vue-element-plus-admin', 'vue-element-admin', 'vben-admin']" | ||
| @click="keyClick" | ||
| > | ||
| vue-element-plus-admin是一个基于vue3、vite2、element-plus的后台解决方案，借鉴了vue-element-admin和vben-admin的写法和优点。内置了动态路由，权限验证，典型的业务模型，丰富的功能组件，并且提供了多页配置，开箱即用，可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型，也可以作为一个示例，用于学习。 | ||
| </highlight> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts" name="HighlightDemo"> | ||
| import Highlight from '_c/Highlight/index' | ||
| import { Message } from '_c/Message' | ||
| function keyClick(key: string) { | ||
| Message.success(key) | ||
| } | ||
| </script> | ||
|
|
||
| <style></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.