vue elementUI 点击当前设置选中样式，其他样式显示正常

vue elementUI 点击当前设置选中样式，其他样式显示正常<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/inde...

花世界hua

3373人浏览 · 2019-10-18 16:00:48

花世界hua · 2019-10-18 16:00:48 发布

vue elementUI 点击当前设置选中样式，其他样式显示正常

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-tag + .el-tag {
            margin-left: 10px;
            cursor: pointer;
        }
        .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;
        }
        .el-tag.clickBgs{//重点 核心  :class="{clickBgs:tag.label==showWhite}"
            background: aquamarine;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button @click="dialogVisible = true">Button</el-button>
    <el-dialog :visible.sync="dialogVisible" title="" :close-on-click-modal="false">
        <div style="margin-bottom: 15px;text-align: right">
            <el-button @click="setChange">设置</el-button>
        </div>
        <el-tag
                :key="tag.label"
                v-for="tag in items"
                :closable="showClose"
                :disable-transitions="false"
                @close="handleClose(tag)"
                @click="handleClick(tag)"
                :class="{clickBgs:tag.label==showWhite}">
            {{tag.label}}
        </el-tag>
        <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput" v-show="showClose">+ New Tag</el-button>

             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
           </span>
    </el-dialog>

</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
   var app =  new Vue({
        el: '#app',
        data: function() {
            return {
                dialogVisible: false,
                items: [
                    { label: '标签一' },
                    { label: '标签二'},
                    { label: '标签三'},
                ],
                inputVisible: false,
                inputValue: '',
                showWhite:-1,
                showClose:false,
            };
        },
       methods: {
           setChange:function(){
              this.showClose = true;
           },
           handleClose:function(tag) {
               if(this.showClose){
                   this.items.splice(this.items.indexOf(tag), 1);
               }

           },
           handleClick:function(tag) {
               this.showWhite = tag.label;
           },
           showInput:function() {
               this.inputVisible = true;
               this.$nextTick(_ => {
                   this.$refs.saveTagInput.$refs.input.focus();
               });
           },
           handleInputConfirm:function() {
               let inputValue = this.inputValue;
               if (inputValue) {
                   this.items.push({label:inputValue});
               }
               this.inputVisible = false;
               this.inputValue = '';
           }
       }

    })
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^