zoukankan      html  css  js  c++  java
  • el-dropdown 两个以上el-dropdown互相切换时,第一次active只切换,不展示下拉框,第二次再点击,才展示下拉框

    1.可以在el-dropdown上设置蒙层使第一次点击时,点击触发在蒙层上,不触发el-dropdown点击事件。

    <template>
        <div id="test">
            <div class="train-tab__item"  @click="tabFeatureList(0)" style="min- 135px;height: 40px;float: left">
                <el-dropdown style="cursor: pointer; outline: none;margin-left: -15px;height: 40px;line-height: 40px;"  @command="getList" trigger="click">
                    <div id="list">
                        <span class="el-dropdown-link">
                            我是tab1
                        </span>
                    </div>
    
                    <el-dropdown-menu slot="dropdown" class="pro-dropdown-menu">
                        <el-dropdown-item
                            v-for="(item, index) in featureList"
                            :divided="index==1"
                            :command="item"
                            :key="item.name + index">
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div style="top: 0; left: -20px;position: absolute; height: 40px; opacity: 0;" v-if="activeIndex != 0">
                    <span style="margin-left: 20px; margin-right: 90px;">{{ curFeatureObj.name }}</span>
                </div>
            </div>
            <div class="train-tab__item" :class="{'train-tab__actived': activeIndex == 1}" @click="tabOriginData(1)">
                <span>
                    <img src="../../images/origin-dataset.png" class="origin-data-pic">
                    <span>我是tab2</span>
                </span>
            </div>
        </div>
    </template>
    <script>
        export default {
            data () {
    
            },
            methods: {
                tabFeatureList (tag) {
                    this.activeIndex = tag;
                },
                tabOriginData (tag) {
                    this.activeIndex = tag;
                },
            }
        }
    </script>

    2.第二种方式

    利用点击时activeIndex更换时dom渲染的规律及顺序,使第一次点击时不展示下拉(由于activeIndex切换,会把原来的那个dom删掉,这个过程中没有来得及显示之前的点击),这个方式不是很稳妥,第一种方式相对好一些

    <template>
        <div id="test">
            <div class="train-tab__item"  @click="tabFeatureList(0)" v-if="activeIndex != 0" style="min- 135px;height: 40px;float: left">
                    <el-dropdown style="cursor: pointer; outline: none;margin-left: -15px;height: 40px;line-height: 40px;"  @command="getList" trigger="click">
                        <div id="list">
                            <span class="el-dropdown-link">
                                我是tab1
                            </span>
                        </div>
    
                        <el-dropdown-menu slot="dropdown" class="pro-dropdown-menu">
                            <el-dropdown-item
                                v-for="(item, index) in featureList"
                                :divided="index==1"
                                :command="item"
                                :key="item.name + index">
                                {{ item.name }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
            </div>
            <div class="train-tab__item"  @click="tabFeatureList(0)" v-else style="min- 135px;height: 40px;float: left">
                    <el-dropdown style="cursor: pointer; outline: none;margin-left: -15px;height: 40px;line-height: 40px;"  @command="getList" trigger="click">
                        <div id="list1">
                            <span class="el-dropdown-link">
                                我是tab1
                            </span>
                        </div>
    
                        <el-dropdown-menu slot="dropdown" class="pro-dropdown-menu">
                            <el-dropdown-item
                                    v-for="(item, index) in featureList"
                                    :divided="index==1"
                                    :command="item"
                                    :key="item.name + index">
                                {{ item.name }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
            </div>
            <div class="train-tab__item" :class="{'train-tab__actived': activeIndex == 1}" @click="tabOriginData(1)">
                <span>
                    <img src="../../images/origin-dataset.png" class="origin-data-pic">
                    <span>我是tab2</span>
                </span>
            </div>
        </div>
    </template>
    <script>
        export default {
            data () {
    
            },
            methods: {
                tabFeatureList (tag) {
                    this.activeIndex = tag;
                },
                tabOriginData (tag) {
                    this.activeIndex = tag;
                },
            }
        }
    </script>
  • 相关阅读:
    CodeForces 785D Anton and School
    CodeForces 785C Anton and Fairy Tale
    CodeForces 785B Anton and Classes
    CodeForces 785A Anton and Polyhedrons
    爱奇艺全国高校算法大赛初赛C
    爱奇艺全国高校算法大赛初赛B
    爱奇艺全国高校算法大赛初赛A
    EOJ 3265 七巧板
    EOJ 3256 拼音魔法
    EOJ 3262 黑心啤酒厂
  • 原文地址:https://www.cnblogs.com/zhaotq/p/10191411.html
Copyright © 2011-2022 走看看