多选一级下拉组件aSimSelect——属性选择系列组件库（design by yRan）

本组件二次封装iview，可以在全局安装了Iview的项目或者局部引入了Select的页面中自由使用。

目录

• 效果展示
• 功能描述
• 结构代码
• 逻辑代码
• 组件应用
• 事件钩子
• github

效果展示

从左到右分别是：属性名、不限按钮、多选一级下拉

从上到下分别是：选中单项、全选、点击不限

功能描述

1. 属性名和下拉提示由父组件传给子组件
2. 点击不限隐藏下拉，取消显示下拉
3. 本组件依赖于组件cSearch，下拉逻辑参考该组件

结构代码

<template>
  <div class="a-sim-select">
    <Row>
      <Col flex="110px">
        <span class="c-fix-title wt">{{ attr_name }}</span>
      </Col>
      <Col flex="90px" v-if="nolimit">
        <Button v-if="checked" type="primary" @click="noLimit">不限</Button>
        <Button v-else @click="noLimit">不限</Button>
      </Col>
      <!-- 单层选择器 -->
      <Col flex="auto" class="sim-sel">
        <Csearch
          v-if="!checked"
          :placeholder="btn_name"
          :trans_unselList="attr_List"
          :trans_selList="res_attr_List"
          @func="getAttr_List"
        />
      </Col>
    </Row>
    <Divider />
  </div>
</template>

• checked：下拉显示隐藏
• btn_name：下拉的placeholder

逻辑代码

  data () {
    return {
      checked: true,
      attr_List: [],
      res_attr_List: deepCopy(this.init_selList),
      sel_attr_List: []
    }
  },
  props: {
    nolimit: {
      type: Boolean,
      default () {
        return true
      }
    },
    attr_name: {
      type: String,
      default () {
        return '属性名'
      }
    },
    btn_name: {
      type: String,
      default () {
        return '请选择'
      }
    },
    attrList: {
      type: Array,
      default () {
        return []
      }
    },
    init_selList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {},
  methods: {
    // 限制还是不限
    noLimit () {
      this.checked = !this.checked
      if (this.checked) {
        // 选中不限
        this.$emit('getData', [], [], this.attr_name)
      } else {
        this.$Message.info('不做任何选择，默认不限哦o(*￣▽￣*)ブ')
      }
    },
    // 拿到选择的属性
    getAttr_List (list, lables) {
      this.sel_attr_List = list
      this.$emit('getData', this.sel_attr_List, lables, this.attr_name)
    }
  },
  created () {
    setTimeout(() => {
      this.checked = false
      this.attr_List = deepCopy(this.attrList)
      this.res_attr_List = deepCopy(this.init_selList)
    }, 1000)
  }

• noLimit：限制不限处理，取消不限时提示用户进行选择
• getAttr_List：拿到用户选择的属性，往上回传数据

组件应用

<aSimSelect
   attr_name="水果"
   btn_name="喜欢的水果"
   :attrList="fruitList"
   :init_selList="init_fruitList"
   @getData="sim_select_get"
/>

import aSimSelect from '@/components/attr-check/a-sim-select'
components: {
    aSimSelect 
}

data () {
    return {
        init_fruitList: [],
        fruitList: [
          {
            value: 1,
            label: '哈密瓜'
          }, {
            value: 2,
            label: '西瓜'
          }, {
            value: 2,
            label: '芒果'
          }]
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：attr_name属性名、btn_name按钮名、init_selList初始选中数据赋值、attrList下拉列表数据

事件钩子

// 拿到选择的数据
sim_select_get (ids, labels, attr_name) {
      if (labels && isArray(labels)) {
        var content
        var nolimit = false
        if (labels.length === 0) {
          content = '不限'
          nolimit = true
        } else {
          content = labels.join(',')
        }
        this.previewAttr.some((item) => {
          if (item.attr_name === attr_name + ':') {
            item.attr_content = content
          }
        })
        var obj = {
          service: ids,
          nolimit: nolimit
        }
        switch (attr_name) {
          case '水果':
            this.groupObj.pfinfo_attr.vip_service = obj
            break
        }
      }
    }

• sim_select_get：拿到选择的数据

github

完整代码：点击这里