本元件二次封裝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

完整程式碼：點選這裡