Skip to content

docs(tag): 补全中英文文档 #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 1 commit into from
Mar 28, 2022
Merged

docs(tag): 补全中英文文档 #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 68 additions & 37 deletions packages/devui-vue/docs/components/tag/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,44 @@
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { defineComponent } from 'vue';

export default defineComponent({
setup() {
return {
msg: 'Tag 标签 组件文档示例'
}
}
})
return {};
},
});
</script>

<style></style>
```

:::

### 自定义

:::demo 使用默认插槽可自由定制你的 tag

```vue
<template>
<div>
<d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
<d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
<d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </d-tag>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
setup() {
const isChecked = ref(true);
const tagClick = () => {
isChecked.value = !isChecked.value;
};
return { isChecked, tagClick };
},
});
</script>

<style></style>
Expand All @@ -53,7 +82,7 @@ export default defineComponent({

### 可被选中

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

```vue
<template>
Expand All @@ -63,47 +92,49 @@ export default defineComponent({
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { defineComponent, ref } from 'vue';

export default defineComponent({
setup() {
const isChecked = ref(true)
const isChecked = ref(true);
const tagClick = () => {
isChecked.value = !isChecked.value
}
return { isChecked, tagClick }
}
})
isChecked.value = !isChecked.value;
};
return { isChecked, tagClick };
},
});
</script>

<style></style>
```

:::

### 可关闭的
### 可移除的

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

```vue
<template>
<div>
<d-tag deletable @click="handleClose">tag2</d-tag>
<d-tag type="primary" deletable @click="handleClose">tag2</d-tag>
<d-tag color="#39afcc" deletable @click="handleClose">tag2</d-tag>
<d-tag deletable @tag-delete="handleClose">tag1</d-tag>
<d-tag type="primary" deletable @tag-delete="handleClose">tag2</d-tag>
<d-tag color="#39afcc" deletable @tag-delete="handleClose">tag3</d-tag>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { defineComponent } from 'vue';

export default defineComponent({
setup() {
const handleClose = () => {
console.log('handleClose')
}
return { handleClose }
}
})
console.log('handleClose');
};
return {
handleClose,
};
},
});
</script>

<style></style>
Expand All @@ -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 状态改变时触发的事件，通过参数获取标签最新状态 |
163 changes: 163 additions & 0 deletions packages/devui-vue/docs/en-US/components/tag/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<template>
<div>
<d-tag>tag1</d-tag>
<d-tag type="primary">tag2</d-tag>
<d-tag type="success">tag3</d-tag>
<d-tag type="warning">tag4</d-tag>
<d-tag type="danger">tag5</d-tag>
</div>
<div>
<d-tag color="blue-w98">blue-w98</d-tag>
<d-tag color="aqua-w98">aqua-w98</d-tag>
<d-tag color="aqua-w98">aqua-w98</d-tag>
<d-tag color="olivine-w98">olivine-w98</d-tag>
<d-tag color="green-w98">green-w98</d-tag>
<d-tag color="yellow-w98">yellow-w98</d-tag>
<d-tag color="orange-w98">orange-w98</d-tag>
<d-tag color="red-w98">red-w98</d-tag>
<d-tag color="pink-w98">pink-w98</d-tag>
<d-tag color="purple-w98">purple-w98</d-tag>
<d-tag color="#aa2116">#aa2116</d-tag>
<d-tag color="#007d65">#007d65</d-tag>
</div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
setup() {
return {};
},
});
</script>

<style></style>
```

:::

### Custom

:::demo Use the default slot to customize your tag.

```vue
<template>
<div>
<d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
<d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
<d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </d-tag>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
setup() {
const isChecked = ref(true);
const tagClick = () => {
isChecked.value = !isChecked.value;
};
return { isChecked, tagClick };
},
});
</script>

<style></style>
```

:::

### 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
<template>
<div>
<d-tag type="primary" :checked="isChecked" @click="tagClick">don't click me</d-tag>
<d-tag color="#39afcc" :checked="isChecked" @click="tagClick">don't click me</d-tag>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
setup() {
const isChecked = ref(true);
const tagClick = () => {
isChecked.value = !isChecked.value;
};
return { isChecked, tagClick };
},
});
</script>

<style></style>
```

:::

### Deletable

:::demo The `deletable` attribute is used to set whether the tag can be deleted

```vue
<template>
<div>
<d-tag deletable @tag-delete="handleClose">tag1</d-tag>
<d-tag type="primary" deletable @tag-delete="handleClose">tag2</d-tag>
<d-tag color="#39afcc" deletable @tag-delete="handleClose">tag3</d-tag>
</div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
setup() {
const handleClose = () => {
console.log('handleClose');
};
return {
handleClose,
};
},
});
</script>

<style></style>
```

:::

### 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. |