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>
  • 相关阅读:
    Java:抽象类与接口
    OOP编程思想:类的设计原则
    Win10系统下设置Go环境变量和go语言开启go module
    Windows下Golang安装Iris框架
    AOS.JS 和基于Animation.css的收费库WOW.JS相似
    文本比价工具
    MySQL Order By Rand()效率
    datatable分页
    PHP面向对象之魔术方法
    PHP面向对象之序列化与反序列化
  • 原文地址:https://www.cnblogs.com/zhaotq/p/10191411.html
Copyright © 2011-2022 走看看