vue3.x + elementPlus 封装组件之select下拉选择篇

根据上篇文章，我们创建了对应的组件js和视图对应的dome页面，这一次我们处理select

1.根据上篇一样我们创建对应的select文件和select.vue文件 下面就是里面的内容

<template>
  <el-select
    v-if="!isSearch"
    :model-value="value"
    :multiple="multiple"
    :disabled="disabled"
    clearable
    collapse-tags
    collapse-tags-tooltip
    placeholder="请选择"
    @change="change"
  >
    <el-option
      v-for="item in selectList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
  <el-select
    v-else
    :model-value="valueSearch"
    :multiple="multipleSearch"
    filterable
    remote
    reserve-keyword
    collapse-tags
    collapse-tags-tooltip
    placeholder="请选择"
    :remote-method="remoteMethod"
    :loading="loading"
    :disabled="disabledSearch"
  >
    <el-option
      v-for="item in selectList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</template>

<script>
export default {
  props: {
    isSearch: {
      default() {
        return false
      },
      type: Boolean
    },
    loading: {
      default() {
        return false
      },
      type: Boolean
    },
    // 是否多选
    multipleSearch: {
      default() {
        return false
      },
      type: Boolean
    },
    // value
    valueSearch: {
      default() {
        return ''
      },
      type: String
    },
    // 是否禁止
    disabledSearch: {
      default() {
        return false
      },
      type: Boolean
    },
    // 是否多选
    multiple: {
      default() {
        return false
      },
      type: Boolean
    },
    // 是否禁止
    disabled: {
      default() {
        return false
      },
      type: Boolean
    },
    // value
    value: {
      default() {
        return ''
      },
      type: String
    },
    // 数据
    selectList: {
      default() {
        return []
      },
      type: Array
    }
  },
  emits: ['selectChange', 'remoteMethodSelct'],
  setup(props, ctx) {
    const change = (value) => {
      ctx.emit('selectChange', value)
    }
    const remoteMethod = (query) => {
      ctx.emit('remoteMethodSelct', query)
    }
    return { change, remoteMethod }
  }
}
</script>

2.在components/index.js文件里面导入对应的dialog.vue文件

import LZSelect from './select/select.vue'

export default {
  install: (Vue) => { Vue.component('LZSelect ', LZSelect ) }

}

3.使用

<template>
  <div class="align-flex">
    <span>下拉菜单选择单选</span>
    <LZSelect
      v-model="selectData.value1"
      :select-list="selectData.selectList"
      class="check-box"
      @selectChange="selectChange"
    ></LZSelect>
  </div>
  <div class="align-flex">
    <span>下拉菜单选择多选</span>
    <LZSelect
      v-model="selectData.value2"
      multiple
      :select-list="selectData.selectList"
      class="check-box"
      @selectChange="selectChange"
    ></LZSelect>
  </div>
  <div class="align-flex">
    <span>下拉菜单选择远程搜索单选</span>
    <LZSelect
      v-model="selectData.value3"
      is-search
      :loading="selectData.loading"
      :select-list="selectData.selectListSearch"
      class="check-box"
      @selectChange="selectChange"
      @remoteMethodSelct="remoteMethodSelct"
    ></LZSelect>
  </div>
  <div class="align-flex">
    <span>下拉菜单选择远程搜索多选</span>
    <LZSelect
      v-model="selectData.value4"
      multiple-search
      is-search
      :loading="selectData.loading"
      :select-list="selectData.selectListSearch"
      class="check-box"
      @selectChange="selectChange"
      @remoteMethodSelct="remoteMethodSelct"
    ></LZSelect>
  </div>
</template>

<script>
import { reactive } from 'vue'
const selectData = reactive({
  selectList: [
    {
      value: '选项1',
      label: '黄金糕',
      disabled: false
    },
    {
      value: '选项2',
      label: '双皮奶',
      disabled: false
    },
    {
      value: '选项3',
      label: '蚵仔煎',
      disabled: false
    },
    {
      value: '选项4',
      label: '龙须面',
      disabled: false
    },
    {
      value: '选项5',
      label: '北京烤鸭',
      disabled: false
    }
  ],
  value1: '',
  value2: '',
  value3: '',
  value4: '',
  selectVal: '黄金糕',
  inputVal: '黄金糕',
  selectVal2: '黄金糕1',
  inputVal2: '黄金糕1',
  selectListSearch: [],
  loading: false // 搜索loading
})
export default {
  setup() {
    selectData.value1 = selectData.selectList[0].label
    // 选择回调   返回选中的数据value
    const selectChange = (val) => {
      console.log(val)
    }
    // 远程搜索的回调 搜索成功之后改变对应的数据展示
    const remoteMethodSelct = (query) => {
      console.log(query)
      selectData.loading = true
      setTimeout(() => {
        selectData.selectListSearch = selectData.selectList
        selectData.loading = false
      }, 2000)
    }

    return { selectData, selectChange, remoteMethodSelct }
  }
}
</script>
<style lang="scss">

</style>