From 9ba45be70cb59a8db44ab89c3c242b9906094826 Mon Sep 17 00:00:00 2001 From: codedance Date: Thu, 11 Nov 2021 10:48:20 +0800 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E8=AE=BE=E7=BD=AE=E4=BA=8C=E7=BA=A7=E6=A0=87=E9=A2=98?= =?UTF-8?q?sidebar=E5=B1=95=E5=BC=80bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/docs/components/tag/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md index c96b6238..f1110e85 100644 --- a/packages/devui-vue/docs/components/tag/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -2,11 +2,11 @@ 标签展示组件。 -## 何时使用 +### 何时使用 用户需要展示多个标签时。 -## 基本用法 +### 基本用法 :::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义背景色 @@ -36,16 +36,16 @@ export default defineComponent({ ::: -## API +### API -### Props +#### Props | 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | | :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: | | type | `string` | defalut | 可选，标签的类型 | `success\|info\|warning\|danger` | [示例](#基本用法) | | color | `string` | '' | 可选，标签的主题色 | | | -### Event +#### Event | 名称 | 说明 | | :------------ | --------------------------------- | -- Gitee From 4bbf6dd675f280859444cdace666b6980e7f8daa Mon Sep 17 00:00:00 2001 From: codedance Date: Wed, 17 Nov 2021 21:56:31 +0800 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ecolor=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=8F=AF=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tag/src/hooks/index.ts | 5 ++-- .../src/hooks/{use-style.ts => useClass.ts} | 5 ++-- .../devui-vue/devui/tag/src/hooks/useColor.ts | 30 +++++++++++++++++++ packages/devui-vue/devui/tag/src/tag.tsx | 10 +++---- 4 files changed, 40 insertions(+), 10 deletions(-) rename packages/devui-vue/devui/tag/src/hooks/{use-style.ts => useClass.ts} (57%) create mode 100644 packages/devui-vue/devui/tag/src/hooks/useColor.ts diff --git a/packages/devui-vue/devui/tag/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts index 4f2a8133..2f9fdfa8 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 './useClass' +import useColor from './useColor' -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/useClass.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/useClass.ts index 2dbb29d7..0a5015a9 100644 --- a/packages/devui-vue/devui/tag/src/hooks/use-style.ts +++ b/packages/devui-vue/devui/tag/src/hooks/useClass.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/useColor.ts b/packages/devui-vue/devui/tag/src/hooks/useColor.ts new file mode 100644 index 00000000..485a2a70 --- /dev/null +++ b/packages/devui-vue/devui/tag/src/hooks/useColor.ts @@ -0,0 +1,30 @@ +import { computed } from 'vue' +import { tagProps, TagProps } from '../tag-types' + +export default function (props: TagProps) { + return computed(() => { + const { color } = props + + 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) return {} + // 判断传入的color是colorMap成员or颜色码 + const themeColor = colorMap[color] || color + //color无？ 有 值为map？为#？ + return { + color: themeColor, + borderColor: themeColor, + backgroundColor: '#fff' + } + }) +} diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 61564119..f0c8b58e 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,6 +1,6 @@ import { defineComponent } from 'vue' import { tagProps, TagProps } from './tag-types' -import { useStyle } from './hooks' +import { useClass, useColor } from './hooks' import './tag.scss' // 类型声明 @@ -9,12 +9,12 @@ export default defineComponent({ props: tagProps, emits: [], setup(props: TagProps, { slots }) { - //获取type对应样式 - const tagClass = useStyle(props) + const tagClass = useClass(props) + const tagColor = useColor(props) return () => ( -
- +
+ {slots.default?.()}
-- Gitee From 13345c952c7dcf86c2fd5c4374c680b33c69b97d Mon Sep 17 00:00:00 2001 From: codedance Date: Wed, 17 Nov 2021 22:12:33 +0800 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EtitleContent?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag-types.ts | 4 ++++ packages/devui-vue/devui/tag/src/tag.tsx | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/tag/src/tag-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts index f8fd95a5..16482eb1 100644 --- a/packages/devui-vue/devui/tag/src/tag-types.ts +++ b/packages/devui-vue/devui/tag/src/tag-types.ts @@ -10,6 +10,10 @@ export const tagProps = { color: { type: String as PropType, default: '' + }, + titleContent: { + type: String as PropType, + default: '' } } as const diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index f0c8b58e..44fcf16b 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -11,10 +11,15 @@ export default defineComponent({ setup(props: TagProps, { slots }) { const tagClass = useClass(props) const tagColor = useColor(props) + const tagTitle = props.titleContent || '' return () => (
- + {slots.default?.()}
-- Gitee From 27320d350f26114610bd7f2875495d6bda8c6b23 Mon Sep 17 00:00:00 2001 From: codedance Date: Sat, 20 Nov 2021 17:47:06 +0800 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E5=8F=AF=E9=80=89=E4=B8=AD=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tag/src/hooks/useColor.ts | 19 ++++++++++--------- packages/devui-vue/devui/tag/src/tag-types.ts | 4 ++++ packages/devui-vue/devui/tag/src/tag.scss | 5 ++++- packages/devui-vue/devui/tag/src/tag.tsx | 19 ++++++++++++++----- 4 files changed, 32 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/devui/tag/src/hooks/useColor.ts b/packages/devui-vue/devui/tag/src/hooks/useColor.ts index 485a2a70..3738b5fa 100644 --- a/packages/devui-vue/devui/tag/src/hooks/useColor.ts +++ b/packages/devui-vue/devui/tag/src/hooks/useColor.ts @@ -1,10 +1,15 @@ import { computed } from 'vue' -import { tagProps, TagProps } from '../tag-types' +import { TagProps } from '../tag-types' export default function (props: TagProps) { return computed(() => { - const { color } = props - + const { color, type } = props + const typeMap = { + primary: '#5e7ce0', + success: '#50d4ab', + warning: '#fac20a', + danger: '#f66f6a' + } const colorMap = { 'blue-w98': '#3383ff', 'aqua-w98': '#39afcc', @@ -17,14 +22,10 @@ export default function (props: TagProps) { 'purple-w98': '#a97af8' } - if (!color) return {} + if (!color && type) return typeMap[type] // 判断传入的color是colorMap成员or颜色码 const themeColor = colorMap[color] || color //color无？ 有 值为map？为#？ - return { - color: themeColor, - borderColor: themeColor, - backgroundColor: '#fff' - } + 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 16482eb1..46af892c 100644 --- a/packages/devui-vue/devui/tag/src/tag-types.ts +++ b/packages/devui-vue/devui/tag/src/tag-types.ts @@ -14,6 +14,10 @@ export const tagProps = { titleContent: { type: String as PropType, default: '' + }, + checked: { + 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 8c4fab24..b6b73434 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 44fcf16b..4f8d0d18 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,4 +1,4 @@ -import { defineComponent } from 'vue' +import { defineComponent, ref } from 'vue' import { tagProps, TagProps } from './tag-types' import { useClass, useColor } from './hooks' import './tag.scss' @@ -10,14 +10,23 @@ export default defineComponent({ emits: [], setup(props: TagProps, { slots }) { const tagClass = useClass(props) - const tagColor = useColor(props) + const themeColor = useColor(props) const tagTitle = props.titleContent || '' - + const type = props.type + const color = props.color + const checked = ref(props.checked) + const change = () => { + checked.value = !checked.value + } return () => ( -
+
{slots.default?.()} -- Gitee From e0a065fd756707727f9e7bbddf495aa86d89838b Mon Sep 17 00:00:00 2001 From: codedance Date: Sat, 20 Nov 2021 19:44:56 +0800 Subject: [PATCH 5/8] =?UTF-8?q?doc:=20=E5=AE=8C=E5=96=84=E6=A0=87=E7=AD=BE?= =?UTF-8?q?=E9=80=89=E4=B8=AD=E5=B1=9E=E6=80=A7=E3=80=81=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E3=80=81=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag.tsx | 28 +++++--- .../devui-vue/docs/components/tag/index.md | 68 ++++++++++++++++--- 2 files changed, 74 insertions(+), 22 deletions(-) diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 4f8d0d18..72108c59 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref } from 'vue' +import { defineComponent, ref, toRefs } from 'vue' import { tagProps, TagProps } from './tag-types' import { useClass, useColor } from './hooks' import './tag.scss' @@ -7,25 +7,31 @@ import './tag.scss' export default defineComponent({ name: 'DTag', props: tagProps, - emits: [], - setup(props: TagProps, { slots }) { + emits: ['click'], + setup(props: TagProps, { slots, emit }) { + const { type, color, checked: ischecked, titleContent } = toRefs(props) const tagClass = useClass(props) const themeColor = useColor(props) - const tagTitle = props.titleContent || '' - const type = props.type - const color = props.color - const checked = ref(props.checked) - const change = () => { - checked.value = !checked.value + const tagTitle = titleContent.value || '' + const checked = ref(ischecked) + // 子组件的点击事件 + const Click = () => { + emit('click') } return () => ( -
+
diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md index f1110e85..5357412c 100644 --- a/packages/devui-vue/docs/components/tag/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -8,17 +8,32 @@ ### 基本用法 -:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义背景色 +:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义主题色 ```vue - + + +``` + +::: + ### API #### 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 | 名称 | 说明 | | :------------ | --------------------------------- | +| click | 点击tag 的时候触发的事件 | | tagDelete | 删除 tag 的时候触发的事件 | | checkedChange | tag 的 check 状态改变时触发的事件 | -- Gitee From aa2f2bde7630522380e111d7723aa7c7fc00e906 Mon Sep 17 00:00:00 2001 From: codedance Date: Sun, 21 Nov 2021 10:19:46 +0800 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E5=A3=B0=E6=98=8E=E8=AF=AD=E5=8F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 72108c59..146046f2 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -9,11 +9,10 @@ export default defineComponent({ props: tagProps, emits: ['click'], setup(props: TagProps, { slots, emit }) { - const { type, color, checked: ischecked, titleContent } = toRefs(props) + const { type, color, checked, titleContent } = toRefs(props) const tagClass = useClass(props) const themeColor = useColor(props) const tagTitle = titleContent.value || '' - const checked = ref(ischecked) // 子组件的点击事件 const Click = () => { emit('click') -- Gitee From d704a1a5b808eba2e987f90640ac6d3c8dfb1bd5 Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 23 Nov 2021 17:16:12 +0800 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edeletable?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag-types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/devui-vue/devui/tag/src/tag-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts index 46af892c..cccdb2f1 100644 --- a/packages/devui-vue/devui/tag/src/tag-types.ts +++ b/packages/devui-vue/devui/tag/src/tag-types.ts @@ -18,6 +18,10 @@ export const tagProps = { checked: { type: Boolean as PropType, default: false + }, + deletable: { + type: Boolean as PropType, + default: false } } as const -- Gitee From d534200b8cd023df33371189fb130061ca1c1d47 Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 23 Nov 2021 17:48:23 +0800 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E6=9B=B4=E6=94=B9=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=91=BD=E5=90=8D=E4=B8=BA=E4=B8=AD=E5=88=92=E7=BA=BF=E5=88=86?= =?UTF-8?q?=E5=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/hooks/index.ts | 4 ++-- .../devui/tag/src/hooks/{useClass.ts => use-class.ts} | 0 .../devui/tag/src/hooks/{useColor.ts => use-color.ts} | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) rename packages/devui-vue/devui/tag/src/hooks/{useClass.ts => use-class.ts} (100%) rename packages/devui-vue/devui/tag/src/hooks/{useColor.ts => use-color.ts} (94%) diff --git a/packages/devui-vue/devui/tag/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts index 2f9fdfa8..ff702f19 100644 --- a/packages/devui-vue/devui/tag/src/hooks/index.ts +++ b/packages/devui-vue/devui/tag/src/hooks/index.ts @@ -1,4 +1,4 @@ -import useClass from './useClass' -import useColor from './useColor' +import useClass from './use-class' +import useColor from './use-color' export { useClass, useColor } diff --git a/packages/devui-vue/devui/tag/src/hooks/useClass.ts b/packages/devui-vue/devui/tag/src/hooks/use-class.ts similarity index 100% rename from packages/devui-vue/devui/tag/src/hooks/useClass.ts rename to packages/devui-vue/devui/tag/src/hooks/use-class.ts diff --git a/packages/devui-vue/devui/tag/src/hooks/useColor.ts b/packages/devui-vue/devui/tag/src/hooks/use-color.ts similarity index 94% rename from packages/devui-vue/devui/tag/src/hooks/useColor.ts rename to packages/devui-vue/devui/tag/src/hooks/use-color.ts index 3738b5fa..82adf0c4 100644 --- a/packages/devui-vue/devui/tag/src/hooks/useColor.ts +++ b/packages/devui-vue/devui/tag/src/hooks/use-color.ts @@ -25,7 +25,6 @@ export default function (props: TagProps) { if (!color && type) return typeMap[type] // 判断传入的color是colorMap成员or颜色码 const themeColor = colorMap[color] || color - //color无？ 有 值为map？为#？ return themeColor }) } -- Gitee