diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md index dfb22a07c7..0e09ca451d 100644 --- a/packages/devui-vue/docs/components/tag/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -35,15 +35,44 @@ + + +``` + +::: + +### 自定义 + +:::demo 使用默认插槽可自由定制你的 tag + +```vue + + @@ -53,7 +82,7 @@ export default defineComponent({ ### 可被选中 -:::demo 由`checked`属性来设置 tag 选中的初始状态,可通过监听点击事件来改变`checked`的值 +:::demo 由`checked`属性来设置 tag 选中的状态,可通过点击来改变`checked`的值 ```vue @@ -81,29 +110,31 @@ export default defineComponent({ ::: -### 可关闭的 +### 可移除的 -:::demo 由`deletable`属性来设置 tag 选中的初始状态,可通过监听点击事件来改变`checked`的值 +:::demo 由`deletable`属性来设置标签是否可删除 ```vue @@ -115,18 +146,18 @@ export default defineComponent({ #### Props -| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | -| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: | -| type | `string` | 'defalut' | 可选,标签的类型,指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) | -| color | `string` | '' | 可选,标签的主题色 | - | [示例](#基本用法) | -| titleContent | `string` | '' | 可选,设置鼠标悬浮时 title 的显示内容 | - | [示例](#基本用法) | -| checked | `boolean` | false | 可选,标签选中的初始状态 | `true\|false` | [示例](#可被选中) | -| deletable | `boolean` | false | 可选,设置标签是否可删除 | `true\|false` | [示例](#可关闭的) | +| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | +| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :-------------------: | +| type | `string` | 'defalut' | 可选,标签的类型,指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [基本用法](#基本用法) | +| color | `string` | '' | 可选,标签的主题色 | - | [基本用法](#基本用法) | +| title-content | `string` | '' | 可选,设置鼠标悬浮时 title 的显示内容 | - | [基本用法](#基本用法) | +| checked | `boolean` | false | 可选,标签选中的初始状态 | `true\|false` | [可被选中](#可被选中) | +| deletable | `boolean` | false | 可选,设置标签是否可删除 | `true\|false` | [可移除的](#可移除的) | #### Event -| 名称 | 说明 | -| :------------ | ----------------------------------------------------------- | -| click | 点击 tag 的时候触发的事件 | -| tagDelete | 删除 tag 的时候触发的事件 | -| checkedChange | tag 的 check 状态改变时触发的事件,通过参数接收标签最新状态 | +| 名称 | 说明 | +| :------------- | ----------------------------------------------------------- | +| click | 点击 tag 的时候触发的事件 | +| tag-delete | 删除 tag 的时候触发的事件 | +| checked-change | tag 的 check 状态改变时触发的事件,通过参数获取标签最新状态 | diff --git a/packages/devui-vue/docs/en-US/components/tag/index.md b/packages/devui-vue/docs/en-US/components/tag/index.md new file mode 100644 index 0000000000..330c32aa49 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/tag/index.md @@ -0,0 +1,163 @@ +# Tag 标签 + +Tags. + +### When To Use + +When multiple tags need to be displayed + +### Basic + +:::demo Defines the label style by using the `type` attribute or `color` attribute. + +```vue + + + + +``` + +::: + +### Custom + +:::demo Use the default slot to customize your tag. + +```vue + + + + +``` + +::: + +### Can be selected + +:::demo The `checked` attribute is used to set the checked status of the tag, and the `checked` value can be changed by clicking. + +```vue + + + + +``` + +::: + +### Deletable + +:::demo The `deletable` attribute is used to set whether the tag can be deleted + +```vue + + + + +``` + +::: + +### API + +#### Props + +| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | +| :----------: | :-------: | :-------: | :----------------------------------------------------------------------------------: | :------------------------------: | :---------------------------------: | +| type | `string` | 'defalut' | Optional. Type of the a tag, color does not take effect after the type is specified. | `success\|info\|warning\|danger` | [Basic](#basic) | +| color | `string` | '' | Optional. Theme color of the a tag. | - | [Basic](#basic) | +| title-content | `string` | '' | Optional. Sets the title displayed when the cursor is hovered. | - | [Basic](#basic) | +| checked | `boolean` | false | Optional. Initial status of a tag. selected. | `true\|false` | [Can be selected](#can-be-selected) | +| deletable | `boolean` | false | Optional. Specifies whether a tag can be deleted. | `true\|false` | [Deletable](#deletable) | + +#### Event + +| 名称 | 说明 | +| :------------- | --------------------------------------------------------- | +| click | Event triggered when a tag is clicked. | +| tag-delete | Event triggered when a tag is deleted. | +| checked-change | Event triggered when the check status of the tag changes. |