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

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

目录

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

效果展示

从左到右分别是：维度选择器、比较数值或区间

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

功能描述

1. 选择比较符号的时候，后面输入比较的数值
2. 选择范围选项的时候，后面输入范围区间
3. 本组件依赖于组件nToN

结构代码

<template>
  <div class="c-compare">
    <Select v-model="judge" placeholder="比较" style="width: 80px" @on-open-change="judge_change" >
      <Option v-for="item in judgeList" :value="item.value" :key="item.value">{
  {
        item.label
      }}</Option>
    </Select>
    <InputNumber v-if="judge !== 7" v-model="judgeNum" :value="judgeNum" :min="0" @on-blur="getNum" ></InputNumber>
    <nToN v-if="judge === 7" @func="setData" :initNum="init_num" :num-flag="1"></nToN>
  </div>
</template>

• judge变化决定第二个组件
• judgeNum和父组件双向绑定，v-model和value实现

逻辑代码

props: {
   
    init_judge: {
   
      type: Number,
      default () {
   
        return 0
      }
    },
    value: {
   
      type: Number
    },
    initNum: {
   
      type: Object,
      default () {
   
        return {
   
          minNum: '',
          maxNum: ''
        }
      }
    }
  },
  computed: {
   
    judgeNum: {
   
      get () {
   
        return this.value
      },
      set (val) {
   
        this.$emit('input', val)
        if (!this.judge) {
   
          this.judge = 1
          this.judgelabel = '>'
        }
        if (this.judge !== 7) {
   
          this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
        } else {
   
          this.$emit(
            'getData',
            this.judgelabel,
            this.judge,
            this.judgeRange,
            this.judgeContent
          )
        }
      }
    }
  },
  data () {
   
    return {
   
      attrBox: attrBox,
      init_num: this.initNum,
      judge: this.init_judge,
      judgelabel: '',
      judgeContent: '',
      judgeRange: {
   
        min: '',
        max: ''
      },
      judgeList: attrBox.judgeList
    }
  },
  watch: {
   
    init_judge (n, o) {
   
      this.judge = n
    }
  },
  methods: {
   
    setData (data) {
   
      this.judgeContent = ntnData_handle(data).content
      this.judgeRange = ntnData_handle(data).range
      this.$emit(
        'getData',
        this.judgelabel,
        this.judge,
        this.judgeRange,
        this.judgeContent
      )
    },
    getNum () {
   
      if (typeof this.judgeNum === 'number') {
   
      } else {
   
        this.$Message.info('这里有默认值哦~可以自行修改哦o(*￣▽￣*)ブ')
        this.judgeNum = 1
      }
    },
    judge_change (open) {
   
      if (!open) {
   
        if (typeof this.judge === 'number') {
   
          if (this.judge !== 0) {
   
            this.judgelabel = this.judgeList.find(
              (item) => item.value === this.judge
            ).label
          }
          if (this.judge !== 7) {
   
            if (!this.judgeNum) this.judgeNum = 1
            this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
          } else {
   
            const range = commit_range_handle(this.judgeRange)
            this.$emit('getData', this.judgelabel, this.judge, range, this.judgeContent)
          }
        }
      }
    }
  },
  created () {
   
    setTimeout(() => {
   
      this.init_num = init_range_handle(this.initNum)
      this.judge = this.init_judge
      this.judge_change()
    }, 2100)
  }

• judgeNum通过v-model和value双向绑定，拿值通过value从父组件拿到，值变化通过Input事件通知父组件数值变化
• 因为v-model只能绑定一个，init_judge使用监听的方式实现双向绑定
• judge_change：比较符号变化处理
• getNum：拿到输入的比较数值，当它为空时提示用户有默认值并将默认值设置为1
• setData：拿到用户输入的区间并进行处理

组件应用

<cCompare
    :init_judge="init_judge"
     v-model="judgeNum"
    :initNum="init_num"
     @getData="getJudge"
/>

import cCompare from '@/components/c-compare'

components: {
   
    cCompare 
}

data () {
   
    return {
   
        init_num: deepCopy(this.initData.judgeRange),
        init_judge: this.initData.judge,
        judgeNum: this.initData.judgeNum
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：initNum初始区间、init_judge初始比较符号、judgeNum双向绑定的比较数值

事件钩子

// 拿到区间
getJudge (label, judge, numRange, content) {
   
      this.checked = false
      var resObj = {
   }
      if (this.judgeNum === Infinity || this.judgeNum === 1e30) {
   
        debugger
        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)
    }

• getJudge ：拿到区间

github

完整代码：点击这里