elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式

更新時(shí)間：2023年10月25日 09:03:41 作者：跳跳的小古風(fēng)

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

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

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

設(shè)置額外的class，=> popper-class

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

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

頁面滾動(dòng)時(shí)隱藏element-ui下拉框/時(shí)間彈框

場(chǎng)景

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

解決：(以vue為例)

在頁面滾動(dòng)或者縮放時(shí)隱藏下拉項(xiàng)即可（借助點(diǎn)擊目標(biāo)元素，下拉項(xiàng)會(huì)自動(dòng)隱藏的特點(diǎn)）

案例代碼：

<template>
  <div class="wrapper">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活動(dòng)名稱" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活動(dòng)區(qū)域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(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="即時(shí)配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-select v-model="value" placeholder="請(qǐng)選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="活動(dòng)性質(zhì)" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
          <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
          <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
          <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-select v-model="value2" placeholder="請(qǐng)選擇">
        <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="線下場(chǎng)地免費(fèi)"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-select v-model="value3" placeholder="請(qǐng)選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="活動(dòng)形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-select v-model="value4" placeholder="請(qǐng)選擇">
        <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: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value: '',
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        rules: {
        },
        mouseUp: null,
        mouseDown: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        let scrollDom = document.querySelectorAll('.wrapper')[0];
        // 滾動(dòng)監(jiān)聽的容器是scrollDom或者window下，在哪個(gè)下監(jiān)聽哪個(gè)
        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)建鼠標(biāo)事件
        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);
      },
      // 清除鼠標(biāo)事件
      delEvents() {
        console.log('-----delete events-----');
        this.mouseUp = null;
        this.mouseDown = null;
      },
      /**
      * 滾動(dòng)時(shí)隱藏
      * @param cls 隱藏的元素class:如下拉、時(shí)間彈框等
      */
      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)聽當(dāng)前滾動(dòng)元素的scroll事件

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

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

/**
 * 滾動(dòng)時(shí)隱藏
 * @param cls 隱藏的元素class:如下拉、時(shí)間彈框等
*/
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)建鼠標(biāo)事件
   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、清除鼠標(biāo)事件

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

使用：

1、隱藏下拉項(xiàng)

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

2、隱藏時(shí)間彈框

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