技術標籤：vuevue.js

//左側控制是否選中狀態
<template>
    <div 
    	v-for="item in normOptions" 
    	:key="item.key" 
    	class="checkbox"
    >
         <div class="box">
           <div class="box-left" 
                :class="{ active: item.editable }"
 
 
                @click="chartShow==1&&boxBUttonClick(item)"
             >{{ item.value }}{{ item.row }}</div>
           <check-box-filter 
                :chartShow='chartShow' 
                :isDisabled='isDisabled' 
                :minDesc="item.minDesc"
 
 
                :editable='item.editable' 
                :maxDesc="item.maxDesc" 
                @inputChange="(list) => handleFilterChange(list, item)">
            </check-box-filter>
           </div>
    </div>
</template>

<script>
export
 
 default {
  data(){
      return{
       normOptions : 
       [
        { 
            key: 'tax', 
            value: '稅收', 
            row: '(萬元)',
            minDesc: '同比開始值',
            maxDesc: '同比結束值',  
            minKey: 'taxAccumulateStart', 
            maxKey: 'taxAccumulateEnd', 
            editable: true 
        },
        { 
            key: 'electricity', 
            value: '用電', 
            row: '(千瓦時)', 
            minDesc: '同比開始值', 
            maxDesc: '同比結束值',  
            minKey: 'electricityAccumulateStart', 
            maxKey: 'electricityAccumulateEnd', 
            editable: false 
        },
        ]
      }
  },
  computed:{
      isSingle(){
          return this.normOptions.filter(v=>v.editable).length<=1
      }
  },
  methods:{
     /**
      * @description 點選時啟用按鈕狀態更新
      */
      activeButton(item){
       if(!this.isSingle||!item.editable){
           item.editable=!item.editable
       }
      },
      /**
	     * @func handleFilterChange
	     * @desc 獲取右側輸入框值
	   */
    handleFilterChange(list, item) {
      this.condition[item.minKey] = list.min
      this.condition[item.maxKey] = list.max
    },
  }
}
</script>
<style lang="scss" scoped>
        .content-norm{
          .checkbox{
            display: flex;
            align-items: center;
            margin-top: .24rem;     
            .box{
              display: flex;
              height:0.36rem;
              .box-left {
                display: flex;
                flex-direction: column;
                align-items: center;   
                justify-content: center;
                width: 1.4rem;
                color: #fff;
                font-size: 0.14rem;
                white-space: nowrap;
                cursor: pointer;
                background-color: #0e2074;
                border-radius: 0.02rem;
                margin-right: .14rem;
                border: 0.01rem solid  #02fbfc;
                padding:0 0.08rem;
                &.active {
                  background-color: #02fbfc;
                  color: #0e2074;
                }
              }
            }
          }
        }
</style>

右側建立check-box-filter子元件獲取輸入框最大最小值

```html
<template>
    <div class="box-right">
        <el-form :model="ruleForm" 
        :rules="rules" ref="ruleForm" 
        label-width="100px" 
        class="demo-ruleForm">
            <el-form-item prop="min">
                <el-input 
                :disabled='readOnly' 
                v-model="ruleForm.min" 
                :placeholder="minDesc" 
                @change="change"
                >
                    <template slot="append">%</template>
                </el-input>
            </el-form-item>
            <span class="dot">&nbsp;—&nbsp;</span>
            <el-form-item prop="max">
                <el-input :disabled='readOnly'
                 v-model="ruleForm.max" 
                 :placeholder=" maxDesc" 
                 @change="change"
                 >
                    <template slot="append">%</template>
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'CheckBoxFilter',
  props: {
    editable: {
      type: Boolean,
      default: false
    },
    minDesc: {
      type: String
    },
    maxDesc: {
      type: String
    },
    isDisabled: {
      type: Boolean
    },
  },
  computed: {
    readOnly() {
        return !this.editable
    }
  },
  watch: {
  },
  data() {
    const reg =  /^(\-?\d+)(.\d{0,2})?$/
    return {
      ruleForm: {
        min: null,
        max: null
      },
      rules: {
       // min: [{ validator: minPass, trigger: 'blur' }],
       // max: [{ validator: maxPass, trigger: 'blur' }]
      }
    }
  },
  methods: {
    change() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$emit('inputChange', this.ruleForm)
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-ruleForm {
    display: flex;
    height: 100%;
    .dot {
        color: #02fbfc;
        margin: 0.1rem;
    }
    /deep/.el-form-item {
        height: 100%;
        margin-bottom: 0 !important;
        .el-input.el-input--medium.el-input-group.el-input-group--append {
            height: 100%;
        }
        .el-form-item__content {
            height: 100%;
            margin-left: 0 !important;
            .el-input__inner {
                background-color: #0e2074;
                box-shadow: 0 5px 5px 0 rgba(0, 45, 73, 0.2);
                border-color: #02fbfc;
                font-size: 0.14rem;
                height: 100%;
                color: #02fbfc !important;
                line-height: 0.36rem;
            }
            .el-input-group__append {
                background-color: #02fbfc;
                color: #0e2074;
                height: 100%;
                border-color: #02fbfc;
                box-shadow: 0 5px 5px 0 rgba(0, 45, 73, 0.2);
                padding: 0 0.1rem !important;
            }
        }
    }
}
</style>