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>
  • 相关阅读:
    Entity Framework Core 2.0 新特性
    asp.net core部署时自定义监听端口,提高部署的灵活性
    asp.net core使用jexus部署在linux无法正确 获取远程ip的解决办法
    使用xshell连接服务器,数字键盘无法使用解决办法
    使用Jexus 5.8.2在Centos下部署运行Asp.net core
    【DevOps】DevOps成功的八大炫酷工具
    【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别
    【Network】UDP 大包怎么发? MTU怎么设置?
    【Network】高性能 UDP 应该怎么做?
    【Network】golang 容器项目 flannel/UDP相关资料
  • 原文地址:https://www.cnblogs.com/zhaotq/p/10191411.html
Copyright © 2011-2022 走看看