elementUI下拉框實現(xiàn)隱藏時觸發(fā)相關事件方式

更新時間：2023年10月25日 09:03:41 作者：跳跳的小古風

這篇文章主要介紹了elementUI下拉框實現(xiàn)隱藏時觸發(fā)相關事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

elementUI下拉框隱藏時觸發(fā)相關事件

el-select 下拉框隱藏時觸發(fā)相關事件 =>@visible-change

設置額外的class，=> popper-class

	@visible-change="changeValue1($event)"

	changeValue1: function(callback, vc) {
				//只有回調參數(shù)為true時才觸發(fā) ctx.getAreaListDataSearch(vc,1)這個函數(shù);
				if (callback === true) {
					document.getElementsByClassName("quhua")[0].style.zIndex = "-1";
				} else {
					document.getElementsByClassName("quhua")[0].style.zIndex = "1200";
				}
			},

頁面滾動時隱藏element-ui下拉框/時間彈框

場景

在系統(tǒng)中，當（有垂直滾動時）點擊下拉框后滾動頁面，會發(fā)現(xiàn)下拉項會遮蓋住頁面中的元素，不會隱藏

解決：(以vue為例)

在頁面滾動或者縮放時隱藏下拉項即可（借助點擊目標元素，下拉項會自動隱藏的特點）

案例代碼：

<template>
  <div class="wrapper">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活動名稱" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活動區(qū)域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="請選擇活動區(qū)域">
          <el-option label="區(qū)域一" value="shanghai"></el-option>
          <el-option label="區(qū)域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="即時配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-select v-model="value" placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="活動性質" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
          <el-checkbox label="地推活動" name="type"></el-checkbox>
          <el-checkbox label="線下主題活動" name="type"></el-checkbox>
          <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-select v-model="value2" placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="特殊資源" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="線上品牌商贊助"></el-radio>
          <el-radio label="線下場地免費"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-select v-model="value3" placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="活動形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-select v-model="value4" placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        options: [{
          value: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value: '',
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        rules: {
        },
        mouseUp: null,
        mouseDown: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        let scrollDom = document.querySelectorAll('.wrapper')[0];
        // 滾動監(jiān)聽的容器是scrollDom或者window下，在哪個下監(jiān)聽哪個
        window.addEventListener('scroll', () => {
          this.scrollHide('.el-select-dropdown');
        }, false);
      })
    },
    methods: {
      // 隱藏popper
      hidePopper(cls = '.el-popper') {
        const dom = document.querySelector(cls);
        console.log(cls, dom, 9999999);
        if( !dom ){ return; }
        // 創(chuàng)建鼠標事件
        if (!this.mouseUp || !this.mouseDown) {
          console.log('-----create events-----');
          this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });
          this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });
        }
        // 順序觸發(fā)mouseDown、mouseUp
        dom.dispatchEvent(this.mouseDown);
        dom.dispatchEvent(this.mouseUp);
      },
      // 清除鼠標事件
      delEvents() {
        console.log('-----delete events-----');
        this.mouseUp = null;
        this.mouseDown = null;
      },
      /**
      * 滾動時隱藏
      * @param cls 隱藏的元素class:如下拉、時間彈框等
      */
      scrollHide(cls) {
        if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除
        this.hidePopper(cls);
      },
 
 
      submitForm(formName) {
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

 
<style lang="less">
.wrapper {
  width: 100%;
  height: 2000px;
}
</style>

主要邏輯代碼：

1、監(jiān)聽當前滾動元素的scroll事件

// window或當前滾動元素的dom節(jié)點  
// 滾動監(jiān)聽的容器 滾動容器是哪個就監(jiān)聽哪個
// let scrollDom = document.querySelectorAll('.wrapper')[0];
// scrollDom下滾動或者window下滾動
window.addEventListener('scroll', () => {
   this.scrollHide('.el-select-dropdown');
}, false);

2、定義滾動監(jiān)聽的容器

/**
 * 滾動時隱藏
 * @param cls 隱藏的元素class:如下拉、時間彈框等
*/
scrollHide(cls) {
  if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除
  this.hidePopper(cls);
},

3、隱藏popper

hidePopper(cls = '.el-popper') {
   const dom = document.querySelector(cls);
   console.log(cls, dom, 9999999);
   if( !dom ){ return; }
   // 創(chuàng)建鼠標事件
   if (!this.mouseUp || !this.mouseDown) {
      console.log('-----create events-----');
      this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });
      this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });
    }
    // 順序觸發(fā)mouseDown、mouseUp
    dom.dispatchEvent(this.mouseDown);
    dom.dispatchEvent(this.mouseUp);
},

4、清除鼠標事件

delEvents() {
   console.log('-----delete events-----');
   this.mouseUp = null;
   this.mouseDown = null;
},

使用：

1、隱藏下拉項

// 如果是el-table中的select，則監(jiān)聽的dom為.el-table__body-wrapper
// 如果是在自定義的元素里，則監(jiān)聽的dom為自定義滾動的元素 如 .wrapper
window.addEventListener('scroll', () => {
    this.scrollHide('.el-select-dropdown');
}, false);

2、隱藏時間彈框

// 如果是el-table中的select，則監(jiān)聽的dom為.el-table__body-wrapper
// 如果是在自定義的元素里，則監(jiān)聽的dom為自定義滾動的元素 如 .wrapper
 
window.addEventListener('scroll', () => {
    this.scrollHide('.el-date-range-picker');
}, false);

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

深入淺析vue全局環(huán)境變量和模式
這篇文章主要介紹了vue全局環(huán)境變量和模式的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
Vue分頁組件的封裝方法
這篇文章主要為大家詳細介紹了Vue分頁組件的封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
vue開發(fā)樹形結構組件(組件遞歸)
這篇文章主要為大家詳細介紹了vue開發(fā)樹形結構組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue?PC前端掃碼登錄功能實現(xiàn)
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實現(xiàn)過程,下面這篇文章主要給大家介紹了關于Vue?PC前端掃碼登錄功能實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12
vue中關于computed的this指向問題
這篇文章主要介紹了vue中關于computed的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue中如何下載文件導出保存到本地
這篇文章主要介紹了vue中如何下載文件導出保存到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解如何使用Vue2做服務端渲染
本篇文章主要介紹了如何使用Vue2做服務端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
vue 通過下拉框組件學習vue中的父子通訊
這篇文章主要介紹了vue 通過下拉框組件學習vue中的父子通訊的相關知識,文中涉及到了父組件，子組件的實現(xiàn)代碼，需要的朋友可以參考下
2017-12-12
詳解vue-cli3多環(huán)境打包配置
這篇文章主要介紹了vue-cli3多環(huán)境打包配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
vue實現(xiàn)橫向斜切柱狀圖
這篇文章主要為大家詳細介紹了vue實現(xiàn)橫向斜切柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09