vue+vant+带模糊查询的单选组件封装

菜鸟·Lee

已于 2024-05-08 16:14:17 修改

阅读量222

点赞数 1

文章标签： vue.js javascript 前端

于 2024-05-08 16:05:57 首次发布

本文链接：https://blog.csdn.net/weixin_41144016/article/details/138575646

版权

封装的组件代码

<template>
  <div class="select-grid-view">
    <van-search v-model="search_value" placeholder="请输入关键字进行搜索" />
    <div class="select-box">
      <van-radio-group v-model="value">
        <van-radio checked-color="#5282f0" :name="item[id]" v-for="item in selectList" :key="item[id]"
          @click="SelectEvent(item)">{{ item[label] }}</van-radio>
      </van-radio-group>
    </div>
  </div>
</template>
<script>
export default {
  props: ['list', 'id', 'label', 'defaultValue'],
  data() {
    return {
      search_value: '',
      value: '',
      selectList: []
    }
  },
  mounted() {
    this.selectList = this.list
    if (this.defaultValue) this.value = this.defaultValue
  },
  methods: {
    SearchFilterEvent(value) {
      let array = []
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i][this.label].indexOf(value) !== -1) {
          array.push(this.list[i])
        }
      }
      this.selectList = array
    },
    SelectEvent(item) {
      this.$emit('SelectEvent', item)
    }
  },
  watch: {
    search_value(value) {
      if (value) {
        this.SearchFilterEvent(value)
      } else {
        this.selectList = this.list
      }
    }
  }
}
</script>
<style lang="scss">
.select-grid-view {
  padding: 15px 0px 30px;
  box-sizing: border-box;

  .select-box {
    padding: 0px 15px 0px;
  }

  .van-radio {
    padding: 10px 0px;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
  }
}
</style>

引用

<van-dropdown-menu active-color="#5282F0">
	<van-dropdown-item v-model="value1" :options="option1" @change="onSearch" />
	<van-dropdown-item :title="gridTitle" ref="grid">
		<SelectGrid :defaultValue="value2" :list="option2" id="id" label="name" @SelectEvent="SelectEvent($event)"></SelectGrid>
	</van-dropdown-item>
</van-dropdown-menu>

// 事件部分
SelectEvent(event) {
	this.value2 = event.id
	this.gridTitle = event.name
	this.$refs.grid.toggle()
	this.onSearch()
}