做电影网站看电影算网站流量吗,做解密类网站可行,中国出口贸易网官网,网站计数代码用于标记和选择。 1.如何使用#xff1f;
由type属性来选择tag的类型#xff0c;也可以通过color属性来自定义背景色。el-tag标签一/el-tag
el-tag typesuccess标签二/el-tag
el-tag typeinfo标签三/e… 用于标记和选择。 1.如何使用
由type属性来选择tag的类型也可以通过color属性来自定义背景色。el-tag标签一/el-tag
el-tag typesuccess标签二/el-tag
el-tag typeinfo标签三/el-tag
el-tag typewarning标签四/el-tag
el-tag typedanger标签五/el-tag
2.可移除标签
//设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画如果不想使用可以设置disable-transitions属性它接受一个Booleantrue 为关闭。el-tagv-fortag in tags:keytag.nameclosable:typetag.type{{tag.name}}
/el-tagscriptexport default {data() {return {tags: [{ name: 标签一, type: },{ name: 标签二, type: success },{ name: 标签三, type: info },{ name: 标签四, type: warning },{ name: 标签五, type: danger }]};}}
/script
3. 动态编辑标签
动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现
el-tag:keytagv-fortag in dynamicTagsclosable:disable-transitionsfalseclosehandleClose(tag){{tag}}
/el-tag
el-inputclassinput-new-tagv-ifinputVisiblev-modelinputValuerefsaveTagInputsizesmallkeyup.enter.nativehandleInputConfirmblurhandleInputConfirm/el-input
el-button v-else classbutton-new-tag sizesmall clickshowInput New Tag/el-buttonstyle.el-tag .el-tag {margin-left: 10px;}.button-new-tag {margin-left: 10px;height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;}.input-new-tag {width: 90px;margin-left: 10px;vertical-align: bottom;}
/stylescriptexport default {data() {return {dynamicTags: [标签一, 标签二, 标签三],inputVisible: false,inputValue: };},methods: {handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);},showInput() {this.inputVisible true;this.$nextTick(_ {this.$refs.saveTagInput.$refs.input.focus();});},handleInputConfirm() {let inputValue this.inputValue;if (inputValue) {this.dynamicTags.push(inputValue);}this.inputVisible false;this.inputValue ;}}}
/script
4.不同尺寸
Tag 组件提供除了默认值以外的三种尺寸可以在不同场景下选择合适的按钮尺寸。
额外的尺寸medium、small、mini通过设置size属性来配置它们。el-tag closable默认标签/el-tag
el-tag sizemedium closable中等标签/el-tag
el-tag sizesmall closable小型标签/el-tag
el-tag sizemini closable超小标签/el-tag
5.不同主题
Tag 组件提供了三个不同的主题dark、light 和 plain
通过设置effect属性来改变主题默认为 lightdiv classtag-groupspan classtag-group__titleDark/spanel-tagv-foritem in items:keyitem.label:typeitem.typeeffectdark{{ item.label }}/el-tag
/div
div classtag-groupspan classtag-group__titlePlain/spanel-tagv-foritem in items:keyitem.label:typeitem.typeeffectplain{{ item.label }}/el-tag
/divscriptexport default {data() {return {items: [{ type: , label: 标签一 },{ type: success, label: 标签二 },{ type: info, label: 标签三 },{ type: danger, label: 标签四 },{ type: warning, label: 标签五 }]}}}
/script
