input输入框readonly与clearable不共存，但是又同时需要两者

最新推荐文章于 2024-06-05 10:23:17 发布

原创最新推荐文章于 2024-06-05 10:23:17 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #javascript #js #前端

本文介绍了一个在Vue中实现的自定义输入框清空功能，该功能不仅清空输入框内容，还同步更新了绑定的popover内下拉树的数据。通过监听鼠标进入和离开事件来控制清空图标显示，并在点击清空图标时关闭popover，确保了用户交互的顺畅。同时，代码示例展示了如何重写clearable功能并处理popover的显隐状态。

解决方法：自己重写clearable功能

代码：

<el-input v-model="search.deptName" v-popover:equipSelect placeholder="请选择" readonly  @mouseenter.native="enter" @mouseleave.native="leave" >
    <span slot="suffix">
        <i class="el-icon-circle-close" v-show="iconShow" @click="clearDataByIcon" style="margin-right: 5px;cursor: pointer;" />
    </span>
</el-input>
<el-popover ref="equipSelect" placement="bottom-start" trigger="click" v-model="popoverShow" >
    <!--下拉树-->
    <deptSelect ref="deptSelect" @selectDept="selectDept" />
</el-popover>

  data() {
    return {
      //查询条件
      search:{
        deptName:'',
        deptId:'', // 部门id
        startTime:'',
        endTime:'',
      },
      iconShow: false,
    };
  },
  methods: {
    // 鼠标进入
    enter(){
      if (this.search.deptName){
        this.iconShow = true;
        this.$forceUpdate()
      }
    },
    // 鼠标移出
    leave(){
      this.iconShow = false;
      this.$forceUpdate()
    },
    // 点击输入框的×号，清空输入框中的内容
    clearDataByIcon(){
      this.search.deptId = '';
      this.search.deptName = ''
      // 重置下拉树
      this.$refs.deptSelect.resetTreeNode()
      this.$forceUpdate()
      // 期望点击×号时，popover弹框不要弹出，但是点击弹框外的地方会触发popover显隐反转，所以应该设为true，而不是false
      this.popoverShow = true
    },
  }

输入框绑定了popover弹框，所以在点击×号时，也要清除popover弹框里的内容，同时关闭popover