Skip to content

E
Element
Commit b7f7a818 authored by baiyaaaaa's avatar baiyaaaaa Committed by 杨奕
Browse files
Options

add improve tag docs

parent 0c126c6f
Show whitespace changes
Inline Side-by-side
Showing with 196 additions and 38 deletions
examples/docs/en-US/tag.md
View file @ b7f7a818
...@@ -3,18 +3,34 @@ ...@@ -3,18 +3,34 @@
data() { data() {
return { return {
tags: [ tags: [
{ key: 1, name: 'Tag one', type: '' }, { name: 'Tag 1', type: '' },
{ key: 2, name: 'Tag Two', type: 'gray' }, { name: 'Tag 2', type: 'gray' },
{ key: 5, name: 'Tag Three', type: 'primary' }, { name: 'Tag 3', type: 'primary' },
{ key: 3, name: 'Tag Four', type: 'success' }, { name: 'Tag 4', type: 'success' },
{ key: 4, name: 'Tag Five', type: 'warning' }, { name: 'Tag 5', type: 'warning' },
{ key: 6, name: 'Tag Six', type: 'danger' } { name: 'Tag 6', type: 'danger' }
] ],
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: ''
}; };
}, },
methods: { methods: {
handleClose(tag) { handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1); this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
} }
} }
} }
...@@ -25,6 +41,20 @@ ...@@ -25,6 +41,20 @@
.el-tag + .el-tag { .el-tag + .el-tag {
margin-left: 10px; margin-left: 10px;
} }
.button-new-tag {
margin-left: 10px;
height: 24px;
line-height: 22px;
padding: 0 *;
}
.input-new-tag {
width: 78px;
margin-left: 10px;
.el-input__inner {
height: 24px;
}
}
} }
</style> </style>
...@@ -48,16 +78,13 @@ Used for marking and selection. ...@@ -48,16 +78,13 @@ Used for marking and selection.
### Removable Tag ### Removable Tag
:::demo Set the `closable` attribute to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed. :::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
```html ```html
<el-tag <el-tag
v-for="tag in tags" v-for="tag in tags"
:closable="true" :closable="true"
:type="tag.type" :type="tag.type"
:key="tag"
:close-transition="false"
@close="handleClose(tag)"
> >
{{tag.name}} {{tag.name}}
</el-tag> </el-tag>
...@@ -67,18 +94,70 @@ Used for marking and selection. ...@@ -67,18 +94,70 @@ Used for marking and selection.
data() { data() {
return { return {
tags: [ tags: [
{ key: 1, name: 'Tag One', type: '' }, { name: 'Tag 1', type: '' },
{ key: 2, name: 'Tag Two', type: 'gray' }, { name: 'Tag 2', type: 'gray' },
{ key: 5, name: 'Tag Three', type: 'primary' }, { name: 'Tag 3', type: 'primary' },
{ key: 3, name: 'Tag Four', type: 'success' }, { name: 'Tag 4', type: 'success' },
{ key: 4, name: 'Tag Five', type: 'warning' }, { name: 'Tag 5', type: 'warning' },
{ key: 6, name: 'Tag Six', type: 'danger' } { name: 'Tag 6', type: 'danger' }
] ]
}; };
}
}
</script>
```
:::
### Edit Dynamically
You can use the `close` event to add and remove tag dynamically.
:::demo
```html
<el-tag
v-for="tag in dynamicTags"
:closable="true"
:close-transition="false"
@close="handleClose(tag)"
>
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="mini"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
<script>
export default {
data() {
return {
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: ''
};
}, },
methods: { methods: {
handleClose(tag) { handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1); this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
} }
} }
} }
......
examples/docs/zh-CN/tag.md
View file @ b7f7a818
...@@ -3,18 +3,34 @@ ...@@ -3,18 +3,34 @@
data() { data() {
return { return {
tags: [ tags: [
{ key: 1, name: '标签一', type: '' }, { name: '标签一', type: '' },
{ key: 2, name: '标签二', type: 'gray' }, { name: '标签二', type: 'gray' },
{ key: 5, name: '标签三', type: 'primary' }, { name: '标签三', type: 'primary' },
{ key: 3, name: '标签四', type: 'success' }, { name: '标签四', type: 'success' },
{ key: 4, name: '标签五', type: 'warning' }, { name: '标签五', type: 'warning' },
{ key: 6, name: '标签六', type: 'danger' } { name: '标签六', type: 'danger' }
] ],
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
}; };
}, },
methods: { methods: {
handleClose(tag) { handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1); this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
} }
} }
} }
...@@ -25,6 +41,20 @@ ...@@ -25,6 +41,20 @@
.el-tag + .el-tag { .el-tag + .el-tag {
margin-left: 10px; margin-left: 10px;
} }
.button-new-tag {
margin-left: 10px;
height: 24px;
line-height: 22px;
padding: 0 *;
}
.input-new-tag {
width: 78px;
margin-left: 10px;
.el-input__inner {
height: 24px;
}
}
} }
</style> </style>
...@@ -48,16 +78,13 @@ ...@@ -48,16 +78,13 @@
### 可移除标签 ### 可移除标签
:::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。 :::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。
```html ```html
<el-tag <el-tag
v-for="tag in tags" v-for="tag in tags"
:closable="true" :closable="true"
:type="tag.type" :type="tag.type"
:key="tag"
:close-transition="false"
@close="handleClose(tag)"
> >
{{tag.name}} {{tag.name}}
</el-tag> </el-tag>
...@@ -67,18 +94,70 @@ ...@@ -67,18 +94,70 @@
data() { data() {
return { return {
tags: [ tags: [
{ key: 1, name: '标签一', type: '' }, { name: '标签一', type: '' },
{ key: 2, name: '标签二', type: 'gray' }, { name: '标签二', type: 'gray' },
{ key: 5, name: '标签三', type: 'primary' }, { name: '标签三', type: 'primary' },
{ key: 3, name: '标签四', type: 'success' }, { name: '标签四', type: 'success' },
{ key: 4, name: '标签五', type: 'warning' }, { name: '标签五', type: 'warning' },
{ key: 6, name: '标签六', type: 'danger' } { name: '标签六', type: 'danger' }
] ]
}; };
}
}
</script>
```
:::
### 动态编辑标签
动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现
:::demo
```html
<el-tag
v-for="tag in dynamicTags"
:closable="true"
:close-transition="false"
@close="handleClose(tag)"
>
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="mini"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
};
}, },
methods: { methods: {
handleClose(tag) { handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1); this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment