区间属性组件aCompare——属性选择系列组件库（design by yRan）

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

目录

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

效果展示

从左到右分别是：属性名、不限按钮、维度选择器、比较数值或区间

从上到下分别是：选中范围时输入比较区间、选择比较符号输入比较数值的区间、选中不限隐藏区间组件

功能描述

1. 属性名和初始数据都由父组件传给子组件，可以为组件赋初值
2. 选择不限时默认对此属性不做限制，取消选中时会有默认值
3. 选择比较符号的时候，后面输入比较的数值
4. 选择范围选项的时候，后面输入范围区间
5. 当输入数值过大右上角会有提示信息
6. 本组件依赖于组件nToN和组件cCompare

结构代码

<template>
  <div class="a-compare">
    <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" v-if="!checked">
        <cCompare
          :init_judge="init_judge"
          v-model="judgeNum"
          :initNum="init_num"
          @getData="getJudge"
        />
        <span v-show="tip_show" class="tip-span">{{ Msg }}</span>
      </Col>
    </Row>
    <Divider />
  </div>
</template>

• 当用户输入数值过大时改行右上角会有提示信息
• judge变化决定第二个组件的显示，比较数值或区间
• judgeNum和父组件双向绑定，v-model和value实现

逻辑代码

// 限制还是不限
    noLimit () {
      this.checked = !this.checked
      if (this.checked) {
        // 选中不限
        this.checked_attr = []
        this.$emit('getData', '不限', this.attr_name)
        this.init_judge = null
        this.judgeNum = null
      } else {
        if (this.tip_show) this.tip_show = false
        var resObj = {}
        this.$Message.info('这里有默认值哦~可以自行修改哦o(*￣▽￣*)ブ')
        this.init_judge = 1
        this.judgeNum = 1
        resObj.content = '>1'
        resObj.val = {
          judge: 1,
          judgeNum: 1,
          nolimit: false
        }
        this.$emit('getData', resObj, this.attr_name)
      }
    },
    getJudge (label, judge, numRange, content) {
      this.checked = false
      var resObj = {}
      if (this.judgeNum === Infinity || this.judgeNum === 1e30) {
        this.Msg = 'Tips：您输入的数值过大o(╥﹏╥)o请重新输入哦~~'
        this.tip_show = true
      } else {
        if (this.tip_show) this.tip_show = false
      }
      if (judge === 7) {
        // range
        resObj.content = content
        resObj.val = {
          judge: 7,
          label: label,
          judgeRange: numRange,
          nolimit: false
        }
      } else {
        // num
        resObj.content =
          this.judgeNum !== null && this.judgeNum !== Infinity && this.judgeNum !== 1e30
            ? label + this.judgeNum
            : ''
        resObj.val = {
          judge: judge,
          label: label,
          judgeNum: this.judgeNum,
          nolimit: false
        }
      }
      this.$emit('getData', resObj, this.attr_name)
    }

• noLimit：限制或不限处理
• getJudge ：拿到数据，包括比较符号，比较数值或区间，拼接显示内容，根据judge判断用户是选择了比较区间还是范围区间

组件应用

<aCompare
  attr_name="年龄"
  :initData="init_vip_level"
  @getData="level_get"
/>

import aCompare from '@/components/attr-check/a-compare'

components: {
    aCompare  
}

data () {
    return {
        init_vip_level: {
       	  judge: 0,
      	  judgeNum: 0,
      	  judgeRange: {
         	 minNum: '',
         	 maxNum: ''
          }
      }
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：attr_name属性名、initData初始数据

事件钩子

// 拿到区间
level_get (resObj, attr_name) {
      var content
      var obj
      if (resObj === '不限' || resObj.content === 'null' || resObj.content === '') {
        content = '不限'
        obj = {
          nolimit: true
        }
      } else {
        content = resObj.content
        obj = resObj.val
      }
      this.previewAttr.some((item) => {
        if (item.attr_name === attr_name + ':') {
          item.attr_content = content
        }
      })
      switch (attr_name) {
        case '年龄':
          this.groupObj.pfinfo_attr.vip_level = obj
          break
      }
    }

• level_get ：拿到区间

github

完整代码：点击这里