Skip to content

Commit 2b2c147

Browse files
c0dedancec0dedance
authored
docs: 补全中英文文档 (DevCloudFE#350)
1 parent b92e68b commit 2b2c147

File tree

2 files changed

+231
-37
lines changed

2 files changed

+231
-37
lines changed

‎packages/devui-vue/docs/components/tag/index.md‎

Lines changed: 68 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,44 @@
3535
</div>
3636
</template>
3737
<script>
38-
import { defineComponent } from 'vue'
38+
import { defineComponent } from 'vue';
3939
4040
export default defineComponent({
4141
setup() {
42-
return {
43-
msg: 'Tag 标签 组件文档示例'
44-
}
45-
}
46-
})
42+
return {};
43+
},
44+
});
45+
</script>
46+
47+
<style></style>
48+
```
49+
50+
:::
51+
52+
### 自定义
53+
54+
:::demo 使用默认插槽可自由定制你的 tag
55+
56+
```vue
57+
<template>
58+
<div>
59+
<d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
60+
<d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
61+
<d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </d-tag>
62+
</div>
63+
</template>
64+
<script>
65+
import { defineComponent, ref } from 'vue';
66+
67+
export default defineComponent({
68+
setup() {
69+
const isChecked = ref(true);
70+
const tagClick = () => {
71+
isChecked.value = !isChecked.value;
72+
};
73+
return { isChecked, tagClick };
74+
},
75+
});
4776
</script>
4877
4978
<style></style>
@@ -53,7 +82,7 @@ export default defineComponent({
5382

5483
### 可被选中
5584

56-
:::demo 由`checked`属性来设置 tag 选中的初始状态，可通过监听点击事件来改变`checked`的值
85+
:::demo 由`checked`属性来设置 tag 选中的状态，可通过点击来改变`checked`的值
5786

5887
```vue
5988
<template>
@@ -63,47 +92,49 @@ export default defineComponent({
6392
</div>
6493
</template>
6594
<script>
66-
import { defineComponent, ref } from 'vue'
95+
import { defineComponent, ref } from 'vue';
6796
6897
export default defineComponent({
6998
setup() {
70-
const isChecked = ref(true)
99+
const isChecked = ref(true);
71100
const tagClick = () => {
72-
isChecked.value = !isChecked.value
73-
}
74-
return { isChecked, tagClick }
75-
}
76-
})
101+
isChecked.value = !isChecked.value;
102+
};
103+
return { isChecked, tagClick };
104+
},
105+
});
77106
</script>
78107
79108
<style></style>
80109
```
81110

82111
:::
83112

84-
### 可关闭的
113+
### 可移除的
85114

86-
:::demo 由`deletable`属性来设置 tag 选中的初始状态，可通过监听点击事件来改变`checked`的值
115+
:::demo 由`deletable`属性来设置标签是否可删除
87116

88117
```vue
89118
<template>
90119
<div>
91-
<d-tag deletable @click="handleClose">tag2</d-tag>
92-
<d-tag type="primary" deletable @click="handleClose">tag2</d-tag>
93-
<d-tag color="#39afcc" deletable @click="handleClose">tag2</d-tag>
120+
<d-tag deletable @tag-delete="handleClose">tag1</d-tag>
121+
<d-tag type="primary" deletable @tag-delete="handleClose">tag2</d-tag>
122+
<d-tag color="#39afcc" deletable @tag-delete="handleClose">tag3</d-tag>
94123
</div>
95124
</template>
96125
<script>
97-
import { defineComponent } from 'vue'
126+
import { defineComponent } from 'vue';
98127
99128
export default defineComponent({
100129
setup() {
101130
const handleClose = () => {
102-
console.log('handleClose')
103-
}
104-
return { handleClose }
105-
}
106-
})
131+
console.log('handleClose');
132+
};
133+
return {
134+
handleClose,
135+
};
136+
},
137+
});
107138
</script>
108139
109140
<style></style>
@@ -115,18 +146,18 @@ export default defineComponent({
115146

116147
#### Props
117148

118-
| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo |
119-
| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: |
120-
| type | `string` | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) |
121-
| color | `string` | '' | 可选，标签的主题色 | - | [示例](#基本用法) |
122-
| titleContent | `string` | '' | 可选，设置鼠标悬浮时 title 的显示内容 | - | [示例](#基本用法) |
123-
| checked | `boolean` | false | 可选，标签选中的初始状态 | `true\|false` | [示例](#可被选中) |
124-
| deletable | `boolean` | false | 可选，设置标签是否可删除 | `true\|false` | [示例](#可关闭的) |
149+
| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo |
150+
| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :-------------------: |
151+
| type | `string` | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [基本用法](#基本用法) |
152+
| color | `string` | '' | 可选，标签的主题色 | - | [基本用法](#基本用法) |
153+
| title-content | `string` | '' | 可选，设置鼠标悬浮时 title 的显示内容 | - | [基本用法](#基本用法) |
154+
| checked | `boolean` | false | 可选，标签选中的初始状态 | `true\|false` | [可被选中](#可被选中) |
155+
| deletable | `boolean` | false | 可选，设置标签是否可删除 | `true\|false` | [可移除的](#可移除的) |
125156

126157
#### Event
127158

128-
| 名称 | 说明 |
129-
| :------------ | ----------------------------------------------------------- |
130-
| click | 点击 tag 的时候触发的事件 |
131-
| tagDelete | 删除 tag 的时候触发的事件 |
132-
| checkedChange | tag 的 check 状态改变时触发的事件，通过参数接收标签最新状态 |
159+
| 名称 | 说明 |
160+
| :------------- | ----------------------------------------------------------- |
161+
| click | 点击 tag 的时候触发的事件 |
162+
| tag-delete | 删除 tag 的时候触发的事件 |
163+
| checked-change | tag 的 check 状态改变时触发的事件，通过参数获取标签最新状态 |

‎packages/devui-vue/docs/en-US/components/tag/index.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
# Tag 标签
2+
3+
Tags.
4+
5+
### When To Use
6+
7+
When multiple tags need to be displayed
8+
9+
### Basic
10+
11+
:::demo Defines the label style by using the `type` attribute or `color` attribute.
12+
13+
```vue
14+
<template>
15+
<div>
16+
<d-tag>tag1</d-tag>
17+
<d-tag type="primary">tag2</d-tag>
18+
<d-tag type="success">tag3</d-tag>
19+
<d-tag type="warning">tag4</d-tag>
20+
<d-tag type="danger">tag5</d-tag>
21+
</div>
22+
<div>
23+
<d-tag color="blue-w98">blue-w98</d-tag>
24+
<d-tag color="aqua-w98">aqua-w98</d-tag>
25+
<d-tag color="aqua-w98">aqua-w98</d-tag>
26+
<d-tag color="olivine-w98">olivine-w98</d-tag>
27+
<d-tag color="green-w98">green-w98</d-tag>
28+
<d-tag color="yellow-w98">yellow-w98</d-tag>
29+
<d-tag color="orange-w98">orange-w98</d-tag>
30+
<d-tag color="red-w98">red-w98</d-tag>
31+
<d-tag color="pink-w98">pink-w98</d-tag>
32+
<d-tag color="purple-w98">purple-w98</d-tag>
33+
<d-tag color="#aa2116">#aa2116</d-tag>
34+
<d-tag color="#007d65">#007d65</d-tag>
35+
</div>
36+
</template>
37+
<script>
38+
import { defineComponent } from 'vue';
39+
40+
export default defineComponent({
41+
setup() {
42+
return {};
43+
},
44+
});
45+
</script>
46+
47+
<style></style>
48+
```
49+
50+
:::
51+
52+
### Custom
53+
54+
:::demo Use the default slot to customize your tag.
55+
56+
```vue
57+
<template>
58+
<div>
59+
<d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
60+
<d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
61+
<d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </d-tag>
62+
</div>
63+
</template>
64+
<script>
65+
import { defineComponent, ref } from 'vue';
66+
67+
export default defineComponent({
68+
setup() {
69+
const isChecked = ref(true);
70+
const tagClick = () => {
71+
isChecked.value = !isChecked.value;
72+
};
73+
return { isChecked, tagClick };
74+
},
75+
});
76+
</script>
77+
78+
<style></style>
79+
```
80+
81+
:::
82+
83+
### Can be selected
84+
85+
:::demo The `checked` attribute is used to set the checked status of the tag, and the `checked` value can be changed by clicking.
86+
87+
```vue
88+
<template>
89+
<div>
90+
<d-tag type="primary" :checked="isChecked" @click="tagClick">don't click me</d-tag>
91+
<d-tag color="#39afcc" :checked="isChecked" @click="tagClick">don't click me</d-tag>
92+
</div>
93+
</template>
94+
<script>
95+
import { defineComponent, ref } from 'vue';
96+
97+
export default defineComponent({
98+
setup() {
99+
const isChecked = ref(true);
100+
const tagClick = () => {
101+
isChecked.value = !isChecked.value;
102+
};
103+
return { isChecked, tagClick };
104+
},
105+
});
106+
</script>
107+
108+
<style></style>
109+
```
110+
111+
:::
112+
113+
### Deletable
114+
115+
:::demo The `deletable` attribute is used to set whether the tag can be deleted
116+
117+
```vue
118+
<template>
119+
<div>
120+
<d-tag deletable @tag-delete="handleClose">tag1</d-tag>
121+
<d-tag type="primary" deletable @tag-delete="handleClose">tag2</d-tag>
122+
<d-tag color="#39afcc" deletable @tag-delete="handleClose">tag3</d-tag>
123+
</div>
124+
</template>
125+
<script>
126+
import { defineComponent } from 'vue';
127+
128+
export default defineComponent({
129+
setup() {
130+
const handleClose = () => {
131+
console.log('handleClose');
132+
};
133+
return {
134+
handleClose,
135+
};
136+
},
137+
});
138+
</script>
139+
140+
<style></style>
141+
```
142+
143+
:::
144+
145+
### API
146+
147+
#### Props
148+
149+
| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo |
150+
| :----------: | :-------: | :-------: | :----------------------------------------------------------------------------------: | :------------------------------: | :---------------------------------: |
151+
| 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) |
152+
| color | `string` | '' | Optional. Theme color of the a tag. | - | [Basic](#basic) |
153+
| title-content | `string` | '' | Optional. Sets the title displayed when the cursor is hovered. | - | [Basic](#basic) |
154+
| checked | `boolean` | false | Optional. Initial status of a tag. selected. | `true\|false` | [Can be selected](#can-be-selected) |
155+
| deletable | `boolean` | false | Optional. Specifies whether a tag can be deleted. | `true\|false` | [Deletable](#deletable) |
156+
157+
#### Event
158+
159+
| 名称 | 说明 |
160+
| :------------- | --------------------------------------------------------- |
161+
| click | Event triggered when a tag is clicked. |
162+
| tag-delete | Event triggered when a tag is deleted. |
163+
| checked-change | Event triggered when the check status of the tag changes. |

0 commit comments

Comments
 (0)