快捷導(dǎo)航

elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問題解決

更新時(shí)間：2024年01月23日 14:55:03 作者：Lan.W

這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問題,主要問題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧

問題：

當(dāng)el-select添加filterable屬性時(shí)，彈提示窗時(shí)，點(diǎn)擊確定后，下拉框會(huì)自動(dòng)彈出

分析：

主要問題就是因?yàn)閒ilterable屬性，根本解決方案是選中的時(shí)候讓他失去焦點(diǎn) el-select有一個(gè)visible-change事件，下拉框出現(xiàn)/隱藏時(shí)觸發(fā)

解決：

增加了visible-change事件

change: (item) => {
  console.log('彈窗出select', item)
  if (item) {
    vm.$refs.select.focus()
  } else {
    vm.$refs.select.blur()
  }
},

el-select事件最后增加焦點(diǎn)取消

 vm.$refs.select.blur()

Html源碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="../js/vue3.3.8/vue.global.js"></script>
  <link rel="stylesheet" href="../js/elementPlus/index.css" rel="external nofollow" >
  <script src="../js/elementPlus/index.full.js"></script>
  <title></title>
</head>
<body>
<div id="app">
  <el-divider></el-divider>
  <el-select v-model="value" filterable remote reserve-keyword remote-show-suffix placeholder="請(qǐng)選擇" ref='select'
             @change="handleCustomerChange"  :loading="false"
             @visible-change='change'>
    <!--  <el-select v-model="value" filterable placeholder="請(qǐng)選擇" ref='select'>-->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-divider></el-divider>
  <el-button @click="showModal('彈窗')">打開對(duì)話框</el-button>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>這是一段信息</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
  </span>
  </el-dialog>
</div>
</body>
<script type="module">
  import zhCn from "../js/elementPlus/locale/zh-cn.mjs";
  const {createApp, ref} = Vue
  const {ElMessageBox} = ElementPlus
  const app = createApp({
    setup() {
      const showModal = (message) => {
        ElMessageBox.alert(
          message,
          '提示',
          {
            confirmButtonText: '確認(rèn)',
            callback: (res) => {
              console.log('點(diǎn)擊了', res)
            }
          })
      }
      const options = ref([{
        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: '北京烤鴨'
      }])
      const value = ref('')
      const dialogVisible = ref(false)
      const handleClose = (done) => {
        console.log(done)
        this.$confirm('確認(rèn)關(guān)閉？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      }
      return {
        value, dialogVisible, options, showModal,
        handleClose,
        change: (item) => {
          console.log('彈窗出select', item)
          if (item) {
            vm.$refs.select.focus()
          } else {
            vm.$refs.select.blur()
          }
        },
        handleCustomerChange: (e, item) => {
          console.log('變更select', e, item)
          let filters = options.value.filter(item => item.value = e)
          value.data = filters[0].lang
          vm.$refs.select.blur()
        }
      }
    }
  })
  app.use(ElementPlus, {locale: zhCn})
  const vm = app.mount('#app')
</script>
</html>

到此這篇關(guān)于elementPlus 的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的文章就介紹到這了,更多相關(guān)elementPlus el-select提示框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: