From b74df0952f0915e6bedaa53c4c380fd920809945 Mon Sep 17 00:00:00 2001 From: codedance Date: Fri, 26 Nov 2021 11:19:07 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AE=8C=E6=88=90=E8=BF=9B=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/tag/index.ts b/packages/devui-vue/devui/tag/index.ts index 43310285..d3b5f916 100644 --- a/packages/devui-vue/devui/tag/index.ts +++ b/packages/devui-vue/devui/tag/index.ts @@ -10,7 +10,7 @@ export { Tag } export default { title: 'Tag 标签', category: '数据展示', - status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '70%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(Tag as any) } -- Gitee From f47c0c6a6754d8188038f8dfe24e37e78801bc76 Mon Sep 17 00:00:00 2001 From: codedance Date: Sat, 27 Nov 2021 22:48:50 +0800 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8F=AF?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=B1=9E=E6=80=A7deletable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tag/src/assets/close.svg | 1 + .../devui/tag/src/assets/defaultClose.svg | 1 + packages/devui-vue/devui/tag/src/tag.scss | 14 ++++++++++ packages/devui-vue/devui/tag/src/tag.tsx | 27 ++++++++++++++++--- 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 packages/devui-vue/devui/tag/src/assets/close.svg create mode 100644 packages/devui-vue/devui/tag/src/assets/defaultClose.svg diff --git a/packages/devui-vue/devui/tag/src/assets/close.svg b/packages/devui-vue/devui/tag/src/assets/close.svg new file mode 100644 index 00000000..cc282b26 --- /dev/null +++ b/packages/devui-vue/devui/tag/src/assets/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/devui-vue/devui/tag/src/assets/defaultClose.svg b/packages/devui-vue/devui/tag/src/assets/defaultClose.svg new file mode 100644 index 00000000..443d80e9 --- /dev/null +++ b/packages/devui-vue/devui/tag/src/assets/defaultClose.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss index b6b73434..db099fa1 100644 --- a/packages/devui-vue/devui/tag/src/tag.scss +++ b/packages/devui-vue/devui/tag/src/tag.scss @@ -56,4 +56,18 @@ $devui-tag-normal-config: ( } } } + .remove-button { + display: inline-block; + margin-left: 12px; + font-size: $devui-font-size-icon; + cursor: pointer; + width: 12px; + height: 12px; + line-height: 12px; + border-radius: 50%; + text-align: center; + position: relative; + top: -0.1255em; + vertical-align: middle; + } } diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 146046f2..f0e28aed 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,22 +1,42 @@ -import { defineComponent, ref, toRefs } from 'vue' +import { defineComponent, toRefs } from 'vue' import { tagProps, TagProps } from './tag-types' import { useClass, useColor } from './hooks' +import IconClose from './assets/close.svg' +import IconDefaultClose from './assets/defaultClose.svg' import './tag.scss' // 类型声明 export default defineComponent({ name: 'DTag', props: tagProps, - emits: ['click'], + emits: ['click', 'tagDelete'], setup(props: TagProps, { slots, emit }) { - const { type, color, checked, titleContent } = toRefs(props) + const { type, color, checked, titleContent, deletable } = toRefs(props) const tagClass = useClass(props) const themeColor = useColor(props) const tagTitle = titleContent.value || '' + const isDefaultTag = () => !type.value && !color.value // 子组件的点击事件 const Click = () => { emit('click') } + const handleDelete = () => { + emit('tagDelete') + } + const closeIconEl = () => { + return deletable.value ? ( + + {isDefaultTag() ? : } + + ) : null + } + return () => (
{slots.default?.()} + {closeIconEl()}
) -- Gitee From 6769e9ab32e0fb36912e5eae5693130084aff8f8 Mon Sep 17 00:00:00 2001 From: codedance Date: Sat, 27 Nov 2021 22:49:55 +0800 Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=A4=8D?= =?UTF-8?q?=E6=9D=82=E7=9A=84checked=E6=A0=B7=E5=BC=8F=E5=A4=84=E7=90=86?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index f0e28aed..834b92e2 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -44,13 +44,7 @@ export default defineComponent({ style={{ display: 'block', color: checked.value ? '#fff' : themeColor.value, - backgroundColor: checked.value - ? themeColor.value - : type.value - ? '' - : !color.value - ? '' - : '#fff' + backgroundColor: checked.value ? themeColor.value : (!color.value ? '' : '#fff') }} title={tagTitle} > -- Gitee From 921f50eac7358b2a9a492f55e400d9ca99f60bf9 Mon Sep 17 00:00:00 2001 From: codedance Date: Sat, 27 Nov 2021 23:10:40 +0800 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Etag=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E7=A7=BB=E9=99=A4=E5=90=8E=E9=94=80=E6=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag.tsx | 37 +++++++++++++----------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 834b92e2..5b5c1cc5 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, toRefs } from 'vue' +import { defineComponent, toRefs, ref } from 'vue' import { tagProps, TagProps } from './tag-types' import { useClass, useColor } from './hooks' import IconClose from './assets/close.svg' @@ -16,11 +16,13 @@ export default defineComponent({ const themeColor = useColor(props) const tagTitle = titleContent.value || '' const isDefaultTag = () => !type.value && !color.value + const isShow = ref(true) // 子组件的点击事件 const Click = () => { emit('click') } const handleDelete = () => { + isShow.value = false emit('tagDelete') } const closeIconEl = () => { @@ -37,21 +39,22 @@ export default defineComponent({ ) : null } - return () => ( -
- - {slots.default?.()} - {closeIconEl()} - -
- ) + return () => + isShow.value && ( +
+ + {slots.default?.()} + {closeIconEl()} + +
+ ) } }) -- Gitee From b460ce609c85f5db11a59fecc987756c4eb26386 Mon Sep 17 00:00:00 2001 From: codedance Date: Sun, 28 Nov 2021 18:20:53 +0800 Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=BB=98?= =?UTF-8?q?=E8=AE=A4svg=E5=9B=BE=E6=A0=87=E4=B8=8D=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/assets/defaultClose.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/tag/src/assets/defaultClose.svg b/packages/devui-vue/devui/tag/src/assets/defaultClose.svg index 443d80e9..367b8930 100644 --- a/packages/devui-vue/devui/tag/src/assets/defaultClose.svg +++ b/packages/devui-vue/devui/tag/src/assets/defaultClose.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file -- Gitee From 7cf3ae23d2be67d8bbdcb619bcd31af257fe0340 Mon Sep 17 00:00:00 2001 From: codedance Date: Mon, 29 Nov 2021 17:09:50 +0800 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EcheckedChange?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tag/src/tag.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 5b5c1cc5..20d26381 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, toRefs, ref } from 'vue' +import { defineComponent, toRefs, ref, watch, onUnmounted } from 'vue' import { tagProps, TagProps } from './tag-types' import { useClass, useColor } from './hooks' import IconClose from './assets/close.svg' @@ -9,7 +9,7 @@ import './tag.scss' export default defineComponent({ name: 'DTag', props: tagProps, - emits: ['click', 'tagDelete'], + emits: ['click', 'tagDelete', 'checkedChange'], setup(props: TagProps, { slots, emit }) { const { type, color, checked, titleContent, deletable } = toRefs(props) const tagClass = useClass(props) @@ -18,7 +18,7 @@ export default defineComponent({ const isDefaultTag = () => !type.value && !color.value const isShow = ref(true) // 子组件的点击事件 - const Click = () => { + const handleClick = () => { emit('click') } const handleDelete = () => { @@ -38,10 +38,16 @@ export default defineComponent({ ) : null } + //tag 的 check 状态改变时触发的事件checkedChange + const unWatch = watch(checked, (newVal) => { + console.log('checkedChange') + emit('checkedChange', newVal) + }) + onUnmounted(() => unWatch()) return () => isShow.value && ( -
+
Date: Mon, 29 Nov 2021 17:13:46 +0800 Subject: [PATCH 07/10] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/docs/components/tag/index.md | 55 +++++++++++++++---- 1 file changed, 44 insertions(+), 11 deletions(-) diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md index 5357412c..dfb22a07 100644 --- a/packages/devui-vue/docs/components/tag/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -58,7 +58,8 @@ export default defineComponent({ ```vue + + +``` + +::: + ### API #### Props -| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | -| :-----: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: | -| type | `string` | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) | -| color | `string` | '' | 可选，标签的主题色 | | | -| checked | `boolean` | false | 可选，可选，标签选中的初始状态 | `true\|false` | [示例](#基本用法) | +| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | +| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: | +| type | `string` | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) | +| color | `string` | '' | 可选，标签的主题色 | - | [示例](#基本用法) | +| titleContent | `string` | '' | 可选，设置鼠标悬浮时 title 的显示内容 | - | [示例](#基本用法) | +| checked | `boolean` | false | 可选，标签选中的初始状态 | `true\|false` | [示例](#可被选中) | +| deletable | `boolean` | false | 可选，设置标签是否可删除 | `true\|false` | [示例](#可关闭的) | #### Event -| 名称 | 说明 | -| :------------ | --------------------------------- | -| click | 点击tag 的时候触发的事件 | -| tagDelete | 删除 tag 的时候触发的事件 | -| checkedChange | tag 的 check 状态改变时触发的事件 | +| 名称 | 说明 | +| :------------ | ----------------------------------------------------------- | +| click | 点击 tag 的时候触发的事件 | +| tagDelete | 删除 tag 的时候触发的事件 | +| checkedChange | tag 的 check 状态改变时触发的事件，通过参数接收标签最新状态 | -- Gitee From 1e0064f65f29491c3ace1678ac781456aa946083 Mon Sep 17 00:00:00 2001 From: codedance Date: Mon, 29 Nov 2021 17:54:29 +0800 Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dcss=E6=B1=A1?= =?UTF-8?q?=E6=9F=93=EF=BC=88=E5=85=B6=E4=BB=96=E7=BB=84=E4=BB=B6=E4=BD=BF?= =?UTF-8?q?=E7=94=A8tag=E9=BB=98=E8=AE=A4=E7=B1=BB=E5=90=8D=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/cascader/components/cascader-tag/index.scss | 2 +- .../devui-vue/devui/cascader/components/cascader-tag/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss index 2e57f9bc..885242d3 100644 --- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss +++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss @@ -1,7 +1,7 @@ @import '../../../style/theme/color'; @import '../../../style/theme/corner'; @import '../../../style/core/font'; -.devui-tag { +.devui-cascader-tag { margin: 2px 4px 2px 0; display: inline-block; position: relative; diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx index 8c4ff034..5315b808 100644 --- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx +++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx @@ -16,7 +16,7 @@ export default (props: PropsType) => { multipleDeleteTag(tagList, tag) } return ( -
+
{ tag?.label }
-- Gitee From c8453d4d884dbc9fd0c1872de17ecdd228468b61 Mon Sep 17 00:00:00 2001 From: codedance Date: Mon, 29 Nov 2021 20:46:46 +0800 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=E6=9B=B4=E6=8D=A2close=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E4=B8=BAicon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tag/src/assets/close.svg | 1 - .../devui/tag/src/assets/defaultClose.svg | 1 - packages/devui-vue/devui/tag/src/tag.scss | 2 +- packages/devui-vue/devui/tag/src/tag.tsx | 16 ++++++---------- 4 files changed, 7 insertions(+), 13 deletions(-) delete mode 100644 packages/devui-vue/devui/tag/src/assets/close.svg delete mode 100644 packages/devui-vue/devui/tag/src/assets/defaultClose.svg diff --git a/packages/devui-vue/devui/tag/src/assets/close.svg b/packages/devui-vue/devui/tag/src/assets/close.svg deleted file mode 100644 index cc282b26..00000000 --- a/packages/devui-vue/devui/tag/src/assets/close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/devui-vue/devui/tag/src/assets/defaultClose.svg b/packages/devui-vue/devui/tag/src/assets/defaultClose.svg deleted file mode 100644 index 367b8930..00000000 --- a/packages/devui-vue/devui/tag/src/assets/defaultClose.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss index db099fa1..0ef0d585 100644 --- a/packages/devui-vue/devui/tag/src/tag.scss +++ b/packages/devui-vue/devui/tag/src/tag.scss @@ -67,7 +67,7 @@ $devui-tag-normal-config: ( border-radius: 50%; text-align: center; position: relative; - top: -0.1255em; + top: -0.22em; vertical-align: middle; } } diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx index 20d26381..7d86daa1 100644 --- a/packages/devui-vue/devui/tag/src/tag.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,8 +1,6 @@ import { defineComponent, toRefs, ref, watch, onUnmounted } from 'vue' import { tagProps, TagProps } from './tag-types' import { useClass, useColor } from './hooks' -import IconClose from './assets/close.svg' -import IconDefaultClose from './assets/defaultClose.svg' import './tag.scss' // 类型声明 @@ -27,14 +25,12 @@ export default defineComponent({ } const closeIconEl = () => { return deletable.value ? ( - - {isDefaultTag() ? : } + + {isDefaultTag() ? ( + + ) : ( + + )} ) : null } -- Gitee From 387e8c0fc88e111ee28271a1c1fb5df0419db30d Mon Sep 17 00:00:00 2001 From: codedance Date: Mon, 29 Nov 2021 20:51:38 +0800 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E5=AF=B9?= =?UTF-8?q?=E5=85=B6=E4=BB=96=E7=BB=84=E4=BB=B6=E7=9A=84=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/cascader/components/cascader-tag/index.scss | 2 +- .../devui/cascader/components/cascader-tag/index.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss index 885242d3..2e57f9bc 100644 --- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss +++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss @@ -1,7 +1,7 @@ @import '../../../style/theme/color'; @import '../../../style/theme/corner'; @import '../../../style/core/font'; -.devui-cascader-tag { +.devui-tag { margin: 2px 4px 2px 0; display: inline-block; position: relative; diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx index 5315b808..4b68406c 100644 --- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx +++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx @@ -16,11 +16,11 @@ export default (props: PropsType) => { multipleDeleteTag(tagList, tag) } return ( -
- { tag?.label } -
- +
+ {tag?.label} +
+
) -} \ No newline at end of file +} -- Gitee