vue this.$set实现输入框的互斥效果
一. this.$set 实现的功能:
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
本质上: 为了解决 给对象/数组添加了一个新属性,在控制台能打印出来,但是却没有更新到视图上 的问题
二. 使用方法
this.$set( target, key, value )
target: 要更改的数据源(可以是对象或者数组)
key: 要更改的具体数据
value :重新赋的值
三. 举例实现功能 及 效果图
通过设置 this.$set 实现3个输入框为互斥效果
效果图:
1.设置协议价后,专版折扣 与 减价 置灰
2.设置专版折扣后,协议价 和 减价置灰
3.设置减价后,协议价 和 专版折扣置灰
四. 实现原理:
在输入框的聚焦事件中通过 this.$set 添加 blurGray 值,在类名中设置该值,实现置灰效果
五. 实现代码
1 <el-table-column align="center" label="协议价"> 2 <template slot-scope="scope"> 3 <el-form-item prop="skus" label-width="0" class="input_box"> 4 <el-input 5 v-model="scope.row.agreementPrice" 6 @blur="blurAgreementPrice(scope.row)" 7 @focus="()=>$set(scope.row,'blurGray',2)" 8 :class="{'product-config-danger':scope.row.agreementPrice<0, 'blurGray':scope.row.blurGray == 1 || scope.row.blurGray == 0}" 9 ></el-input> 10 <span class="tips">元</span> 11 </el-form-item> 12 <p v-if="scope.row.agreementPrice<0" class="product-config-danger table-tips">协议价需大于0</p> 13 </template> 14 </el-table-column> 15 16 <el-table-column align="center" label="专版折扣"> 17 <template slot-scope="scope"> 18 <el-form-item prop="skus" label-width="0" class="input_box"> 19 <el-input 20 v-model="scope.row.discount" 21 @blur="blurDiscount(scope.row)" 22 @focus="()=>$set(scope.row,'blurGray',0)" 23 :class="{ 'product-config-danger':scope.row.discount<0, 'blurGray':scope.row.blurGray == 1 || scope.row.blurGray == 2 }" 24 ></el-input> 25 <br /> 26 <span class="tips">折</span> 27 </el-form-item> 28 <p v-if="scope.row.discount<0" class="product-config-danger table-tips">专版折扣需大于0</p> 29 </template> 30 </el-table-column> 31 32 <el-table-column align="center" label="减价"> 33 <template slot-scope="scope"> 34 <el-form-item prop="skus" label-width="0" class="input_box"> 35 <el-input 36 v-model="scope.row.priceReduction" 37 @blur="blurCheapen(scope.row)" 38 @focus="()=>$set(scope.row,'blurGray',1)" 39 :class="{ 'product-config-danger':scope.row.priceReduction<0, 'blurGray':scope.row.blurGray == 0 || scope.row.blurGray == 2 }" 40 ></el-input> 41 <span class="tips">元</span> 42 </el-form-item> 43 <p 44 v-if="scope.row.priceReduction<0" 45 class="product-config-danger table-tips" 46 >减价金额需大于0</p> 47 </template> 48 </el-table-column>
设置css
1 .product-config-danger { 2 color: #f56c6c; 3 .el-input__inner { 4 color: #f56c6c; 5 } 6 } 7 .blurGray { 8 .el-input__inner { 9 color: #ccc; 10 border-color: #eee; 11 } 12 }
分享一刻:
一个最简化的 CSS 库,不提供任何自定义的类,只给出最基本的 HTML 元素的样式,适合在它的基础上添加自定义的样式。