vxe下拉容器实现可填可选

最新推荐文章于 2024-08-23 14:19:04 发布

€云起

最新推荐文章于 2024-08-23 14:19:04 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_45061924/article/details/132823253

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在VueVXE组件的下拉容器中实现输入框的可填可选功能，通过`v-model`绑定输入值，自定义插槽添加下拉箭头，利用`togglePanel()`方法控制下拉面板的开关。

摘要由CSDN通过智能技术生成

在vxe的功能组件中，输入框input只能用于填写，而下拉容器只能选择数据。然而，在下拉容器中，其实也存在输入框input，那么，基于下拉容器的input，就可以实现可填可选的效果。

一、效果

直接输入：

下拉选项

二、实现


<template>
  <div>
    <vxe-pulldown ref="pulldownRef">
      <template #default>
        <vxe-input v-model="inputValue" style="width: 100px">
          <template #suffix>
            <i class="vxe-icon-arrow-down" @click="selectData()"></i>
          </template>
        </vxe-input>
      </template>
      <template #dropdown>
        <div class="my-dropdown1" >
          <div class="list-item1" v-for="item in selectList"
            :key="item.value" @click="selectEvent(item.value)">
            <span>{{ item.label }}</span>
          </div>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>


<script>
  export default {
    name: "inputOrSelect",
    data() {
      return {
        inputValue:undefined,
        selectList:[
          { label: '选项1', value: '选项1' },
          { label: '选项2', value: '选项2' },
          { label: '选项3', value: '选项3' },
          { label: '选项4', value: '选项4' }
        ]
      }
    },
    methods: {
      selectData() {
        console.log(this.$refs.pulldownRef)
        //切换下拉面板
        this.$refs.pulldownRef.togglePanel()
        //this.$refs.pulldownRef[0].togglePanel()
      },
      selectEvent(val) {
        console.log(val)
        this.inputValue = val
        //切换下拉面板
        this.$refs.pulldownRef.togglePanel()
        //this.$refs.pulldownRef[0].togglePanel()
      }
    }
  }
</script>

<style scoped>

</style>

下拉容器使用ref绑定组件，ref=“pulldownRef”
下拉容器的输入框绑定输入值inputValue，使用自定义插槽添加向下箭头的后缀图标，并绑定事件selectData()用于开启下拉选项
下拉容器利用div标签和v-for用于显示下拉选项，在div标签上绑定selectEvent()事件用于选中下拉数据后的回调
在下拉容器的API中togglePanel()用于切换下拉面板，所以在selectData()使用togglePanel()打开下拉面板，而在selectEvent()使用togglePanel()关闭下拉面板

三、注意

在利用this.$refs.pulldownRef时获取到的数据可能直接就是需要的下拉容器组件，但是有时返回的是一个集合，这就需要额外判断使用的是哪一个下拉容器了。例如，使用console.log(this.$refs.pulldownRef)打印：此时如果选择第一个下拉容器则使用this.$refs.pulldownRef[0].togglePanel()