vue this.$set实现输入框的互斥效果

一.  this.$set 实现的功能:

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

 本质上： 为了解决 给对象/数组添加了一个新属性，在控制台能打印出来，但是却没有更新到视图上 的问题

二. 使用方法

this.$set( target, key, value )

target： 要更改的数据源(可以是对象或者数组)

key： 要更改的具体数据

value ：重新赋的值

三. 举例实现功能 及 效果图

通过设置 this.$set  实现3个输入框为互斥效果

效果图:

1.设置协议价后,专版折扣 与 减价 置灰

2.设置专版折扣后,协议价 和 减价置灰

3.设置减价后,协议价 和 专版折扣置灰

四. 实现原理:

　　在输入框的聚焦事件中通过 this.$set 添加 blurGray 值,在类名中设置该值,实现置灰效果

五. 实现代码

            <el-table-column align="center" label="协议价">
              <template slot-scope="scope">
                <el-form-item prop="skus" label-width="0" class="input_box">
                  <el-input
                    v-model="scope.row.agreementPrice"
                    @blur="blurAgreementPrice(scope.row)"
                    @focus="()=>$set(scope.row,'blurGray',2)"
 8                     :class="{'product-config-danger':scope.row.agreementPrice<0, 'blurGray':scope.row.blurGray == 1 || scope.row.blurGray == 0}"
                  ></el-input>
                  <span class="tips">元</span>
                </el-form-item>
                <p v-if="scope.row.agreementPrice<0" class="product-config-danger table-tips">协议价需大于0</p>
              </template>
            </el-table-column>

            <el-table-column align="center" label="专版折扣">
              <template slot-scope="scope">
                <el-form-item prop="skus" label-width="0" class="input_box">
                  <el-input
                    v-model="scope.row.discount"
                    @blur="blurDiscount(scope.row)"
                    @focus="()=>$set(scope.row,'blurGray',0)"
23                     :class="{ 'product-config-danger':scope.row.discount<0,  'blurGray':scope.row.blurGray == 1 || scope.row.blurGray == 2  }"
                  ></el-input>
                  <br />
                  <span class="tips">折</span>
                </el-form-item>
                <p v-if="scope.row.discount<0" class="product-config-danger table-tips">专版折扣需大于0</p>
              </template>
            </el-table-column>

            <el-table-column align="center" label="减价">
              <template slot-scope="scope">
                <el-form-item prop="skus" label-width="0" class="input_box">
                  <el-input
                    v-model="scope.row.priceReduction"
                    @blur="blurCheapen(scope.row)"
                    @focus="()=>$set(scope.row,'blurGray',1)"
39                     :class="{ 'product-config-danger':scope.row.priceReduction<0, 'blurGray':scope.row.blurGray == 0 || scope.row.blurGray == 2  }"
                  ></el-input>
                  <span class="tips">元</span>
                </el-form-item>
                <p
                  v-if="scope.row.priceReduction<0"
                  class="product-config-danger table-tips"
                >减价金额需大于0</p>
              </template>
            </el-table-column>

设置css

.product-config-danger {
    color: #f56c6c;
    .el-input__inner {
      color: #f56c6c;
    }
  }
 .blurGray {
    .el-input__inner {
      color: #ccc;
      border-color: #eee;
    }
 }

分享一刻:

mvp.css

一个最简化的 CSS 库，不提供任何自定义的类，只给出最基本的 HTML 元素的样式，适合在它的基础上添加自定义的样式。