elementPlust 的el-select在提示框关闭时自动弹出

这篇具有很好参考价值的文章主要介绍了elementPlust 的el-select在提示框关闭时自动弹出。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题:

当el-select添加filterable属性时,弹提示窗时,点击确定后,下拉框会自动弹出

elementPlust 的el-select在提示框关闭时自动弹出,vue.js,elementui,javascript

分析:

主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发

解决:

增加了visible-change事件

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

el-select事件最后增加焦点取消

 vm.$refs.select.blur() 

Html源码 文章来源地址https://www.toymoban.com/news/detail-817781.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">
  <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="请选择" ref='select'
             @change="handleCustomerChange"  :loading="false"
             @visible-change='change'>
    <!--  <el-select v-model="value" filterable placeholder="请选择" 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('弹窗')">打开对话框</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: '确认',
            callback: (res) => {
              console.log('点击了', res)
            }
          })
      }
      const options = ref([{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }])
      const value = ref('')
      const dialogVisible = ref(false)
      const handleClose = (done) => {
        console.log(done)
        this.$confirm('确认关闭?')
          .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>

到了这里,关于elementPlust 的el-select在提示框关闭时自动弹出的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-select 分页加载

    针对数据量大的选择器,需要分页从后端接口获取数据,前端监听选择器下拉框的滚动事件,当往下滚动至底部一定位置时,调接口

    2024年02月14日
    浏览(38)
  • el-select范围选择框

    仅供参考,具体的实现可能根据自己的需要修改 ,仅供参考!仅供参考!仅供参考!

    2024年02月11日
    浏览(47)
  • 修改 el-select 背景图 样式

    1. 原图------------效果图  2.  css  

    2024年02月12日
    浏览(42)
  • el-select 远程搜索 懒加载

    参考链接:el-select实现远程搜索和懒加载_select 懒加载_qd-hhkj的博客-CSDN博客 自定义懒加载 HTML 定义变量 方法

    2024年02月15日
    浏览(43)
  • 【elementUI】el-select相关问题

    :popper-append-to-body=\\\"false\\\" v-if=\\\"item.value !== form.id\\\"

    2024年01月21日
    浏览(46)
  • vue el-select默认值

    情景:在调取接口后渲染数据时需要将选取的select设为默认值,具体案例为调取省份数据后,根据省份获取其对应的城市数据,并将其对应的el-select默认选中该数据的状态 问题:看到网上很多说直接改el-select绑定的v-model的值,这样做就会掉入select框中仅仅是显示相应的文字

    2024年02月13日
    浏览(54)
  • el-select 右侧icon样式问题

    el-select 右侧icon样式问题 样式问题如图: 解决方法: 注意:样式需写在没有scoped的style标签里

    2024年02月15日
    浏览(35)
  • el-select 触底分页+远程搜索

    🍿*★,°*:.☆( ̄▽ ̄)/$:*.°★* 🍿 🍟欢迎来到前端初见的博文,本文主要讲解el-select 触底分页+远程搜索🍟 👨‍🔧 个人主页 : 前端初见 🥞喜欢的朋友可以关注一下,下次更新不迷路🥞 @[TOC](文章目录) 大部分情况下使用 el-select 的时候,el-options 中 options 的值都是后端接口

    2024年02月14日
    浏览(53)
  • el-select 无限下拉滚动加载数据

    template   div     el-form       ref=\\\"saveParameter\\\"       :model=\\\"saveParameter\\\"       inline       inline-message       style=\\\"margin:10px\\\"           el-form-item label=\\\"供应商\\\" prop=\\\"lngcustomerid\\\"         el-select           v-model=\\\"saveParameter.lngcustomerid\\\"           v-loadmore=\\\"loadMore()\\\"           styl

    2024年02月14日
    浏览(41)
  • el-input/el-select placeholder样式修改

    目录 一、placehodler样式修改的方法 二、总结 1. 使用伪类 ::placeholder即可 。 2.其他标签也是在对应的Dom元素加上 ::placeholder伪类即可。 例如text-area,在.el-textarea__inner 类上加上伪类 ::placeholder即可 1)结果 2)代码 注: 是 sass语法:表示选择上一级元素 ; 下面的代码表示: 在.

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包