多选组件aSwitch——属性选择系列组件库（design by yRan）

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

目录

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

效果展示

从左到右分别是：属性名、不限按钮、多选属性列表

从上到下分别是：有选中属性（不限未选中）、无选中属性（不限选中）

功能描述

1. 属性名和属性列表均可由父组件传参到子组件
2. 选中“不限”即该属性不做限制，清空后续条件选择
3. 选中条件，“不限”按钮自动取消选中状态
4. 选中属性上圆形按钮的显示字由“无”变为“有”

结构代码

<template>
  <div class="a-switch">
    <Row>
      <Col flex="110px">
        <span class="c-fix-title wt">{
  { attr_name }}</span>
      </Col>
      <Col flex="90px">
        <Button v-if="checked" type="primary" @click="noLimit">不限</Button>
        <Button v-else @click="noLimit">不限</Button>
      </Col>
      <Col flex="auto" class="switch-col">
        <i-switch v-model="item.checked" v-for="item in switchList" :key="item.id" @on-change="switch_handle" size="large" >
          <span slot="open">{
  { item.label }}</span>
          <span slot="close">{
  { item.label }}</span>
        </i-switch>
      </Col>
    </Row>
    <Divider />
  </div>
</template>

• 根据checked确定是不限还是条件限制状态

逻辑代码

// 限制还是不限
    noLimit () {
   
      this.checked = !this.checked
      if (this.checked) {
   
        // 选中不限
        this.switchList.forEach((item) => {
   
          if (item.checked) {
   
            item.checked = false
          }
        })
        this.$emit('getData', [])
      } else {
   
        this.$Message.info('不做任何选择，默认不限哦o(*￣▽￣*)ブ')
      }
    },
    // switch处理
    switch_handle () {
   
      var switchs = []
      this.switchList.forEach((item) => {
   
        if (item.checked) {
   
          switchs.push(item.label)
        }
      })
      if (switchs.length > 0) this.checked = false
      if (switchs.length === 0) this.checked = true
      this.$emit('getData', switchs)
    }

• 选中不限传空

组件应用

<aSwitch
   attr_name="教材领取"
   :attrList="attrList.pfInfoList"
   :initList="init_pfInfoList"
   @getData="switchs_get"
/>

import aSwitch from '@/components/attr-check/a-switch'

components: {
   
    aSwitch
}

data () {
   
    return {
   
        init_pfInfoList: []
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：attr_name属性名、attrList属性列表、initList初始选中属性列表

事件钩子

// 拿到选中的属性
switchs_get (switchs) {
   
      if (switchs && isArray(switchs)) {
   
        var content
        var nolimit = false
        if (switchs.length === 0) {
   
          content = '不限'
          nolimit = true
        } else {
   
          const s = switchs.map((item) => '有' + item)
          content = s.join(',')
        }
        this.previewAttr.some((item) => {
   
          if (item.attr_key === 'pf_info') {
   
            item.attr_content = content
          }
        })
        var obj = {
   
          val: switchs,
          nolimit: nolimit
        }
        this.groupObj.pfinfo_attr.pf_info = obj
      }
    }

• switchs_get：拿到选中的属性数组

github

完整代码：点击这里