diff --git a/packages/devui-vue/devui/tag/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts index 4f2a81330a29bc727b263472411883487b12f5f4..ff702f1951e71c1a6cadfd5319b47675852dd153 100644 --- a/packages/devui-vue/devui/tag/src/hooks/index.ts +++ b/packages/devui-vue/devui/tag/src/hooks/index.ts @@ -1,3 +1,4 @@ -import useStyle from './use-style' +import useClass from './use-class' +import useColor from './use-color' -export { useStyle } +export { useClass, useColor } diff --git a/packages/devui-vue/devui/tag/src/hooks/use-style.ts b/packages/devui-vue/devui/tag/src/hooks/use-class.ts similarity index 57% rename from packages/devui-vue/devui/tag/src/hooks/use-style.ts rename to packages/devui-vue/devui/tag/src/hooks/use-class.ts index 2dbb29d72cc7711ee2481484387b90a5ae9d0a01..0a5015a92a57d19230f90160dfe186f33792c18d 100644 --- a/packages/devui-vue/devui/tag/src/hooks/use-style.ts +++ b/packages/devui-vue/devui/tag/src/hooks/use-class.ts @@ -3,8 +3,7 @@ import { tagProps, TagProps } from '../tag-types' export default function (props: TagProps) { return computed(() => { - const { type } = props - - return `devui-tag devui-tag-${type || 'default'}` + const { type, color } = props + return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'}` }) } diff --git a/packages/devui-vue/devui/tag/src/hooks/use-color.ts b/packages/devui-vue/devui/tag/src/hooks/use-color.ts new file mode 100644 index 0000000000000000000000000000000000000000..82adf0c41388f977bafe237ec0e5f51681060ceb --- /dev/null +++ b/packages/devui-vue/devui/tag/src/hooks/use-color.ts @@ -0,0 +1,30 @@ +import { computed } from 'vue' +import { TagProps } from '../tag-types' + +export default function (props: TagProps) { + return computed(() => { + const { color, type } = props + const typeMap = { + primary: '#5e7ce0', + success: '#50d4ab', + warning: '#fac20a', + danger: '#f66f6a' + } + const colorMap = { + 'blue-w98': '#3383ff', + 'aqua-w98': '#39afcc', + 'olivine-w98': '#2fa898', + 'green-w98': '#4eb15e', + 'yellow-w98': '#b08d1a', + 'orange-w98': '#d47f35', + 'red-w98': '#f66f6a', + 'pink-w98': '#f3689a', + 'purple-w98': '#a97af8' + } + + if (!color && type) return typeMap[type] + // 判断传入的color是colorMap成员or颜色码 + const themeColor = colorMap[color] || color + return themeColor + }) +} diff --git a/packages/devui-vue/devui/tag/src/tag-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts index f8fd95a57f4f119dcc6f936a55362e4121b9a462..cccdb2f1470d87d800dbf4ffd4b0e1a5382e1961 100644 --- a/packages/devui-vue/devui/tag/src/tag-types.ts +++ b/packages/devui-vue/devui/tag/src/tag-types.ts @@ -10,6 +10,18 @@ export const tagProps = { color: { type: String as PropType, default: '' + }, + titleContent: { + type: String as PropType, + default: '' + }, + checked: { + type: Boolean as PropType, + default: false + }, + deletable: { + type: Boolean as PropType, + default: false } } as const diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss index 8c4fab2446c573f8a75ca71c8f6f9721c5eef1fc..b6b73434648457cfb7cb9e2baa2849b6aa692b4a 100644 --- a/packages/devui-vue/devui/tag/src/tag.scss +++ b/packages/devui-vue/devui/tag/src/tag.scss @@ -25,6 +25,9 @@ $devui-tag-normal-config: ( color: $devui-danger, background-color: $devui-danger-bg, border-color: $devui-danger-line + ), + colorful: ( + background-color: #fff ) ); @@ -45,7 +48,7 @@ $devui-tag-normal-config: ( position: relative; cursor: default; - @each $type in default, primary, success, warning, danger { + @each $type in default, primary, success, warning, danger, colorful { &.devui-tag-#{$type} { @each $key, $value in map-get($devui-tag-normal-config, $type) { #{$key}: $value; diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 615641197e99bcea75035dbb35a61d70c551cfc3..146046f2c0f21c7feccab9a956f51bc42639ea05 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,20 +1,39 @@ -import { defineComponent } from 'vue' +import { defineComponent, ref, toRefs } from 'vue' import { tagProps, TagProps } from './tag-types' -import { useStyle } from './hooks' +import { useClass, useColor } from './hooks' import './tag.scss' // 类型声明 export default defineComponent({ name: 'DTag', props: tagProps, - emits: [], - setup(props: TagProps, { slots }) { - //获取type对应样式 - const tagClass = useStyle(props) - + emits: ['click'], + setup(props: TagProps, { slots, emit }) { + const { type, color, checked, titleContent } = toRefs(props) + const tagClass = useClass(props) + const themeColor = useColor(props) + const tagTitle = titleContent.value || '' + // 子组件的点击事件 + const Click = () => { + emit('click') + } return () => ( -
- +
+ {slots.default?.()}
diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md index c96b6238269cb9840a566900ab74031101aada47..5357412c3924c7ee2bd5a44f029a3c788a5d4537 100644 --- a/packages/devui-vue/docs/components/tag/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -2,23 +2,38 @@ 标签展示组件。 -## 何时使用 +### 何时使用 用户需要展示多个标签时。 -## 基本用法 +### 基本用法 -:::demo 由`type`属性来选择 tag 的类型,也可以通过`color`属性来自定义背景色 +:::demo 由`type`属性来选择 tag 的类型,也可以通过`color`属性来自定义主题色 ```vue - + + +``` + +::: + +### API -### Props +#### Props -| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | -| :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: | -| type | `string` | defalut | 可选,标签的类型 | `success\|info\|warning\|danger` | [示例](#基本用法) | -| color | `string` | '' | 可选,标签的主题色 | | | +| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | +| :-----: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: | +| type | `string` | 'defalut' | 可选,标签的类型,指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) | +| color | `string` | '' | 可选,标签的主题色 | | | +| checked | `boolean` | false | 可选,可选,标签选中的初始状态 | `true\|false` | [示例](#基本用法) | -### Event +#### Event | 名称 | 说明 | | :------------ | --------------------------------- | +| click | 点击tag 的时候触发的事件 | | tagDelete | 删除 tag 的时候触发的事件 | | checkedChange | tag 的 check 状态改变时触发的事件 |