526互联

如何对 el-slider 的 v-model 更新数据时做额外工作？

发布时间 2023-05-08 02:13:37作者: Himmelbleu

v-model 可以通过修饰符做一些更新数据时的前置或后置工作，但是对于 Element 这样的三方封装好的组件，我们不可能对其再封装一个自定义的修饰符来达到标题所说的目标。

v-model 要的是一个响应式数据，Vue 计算属性 computed 可以返回一个继承于 Ref 的 WritableComputedRef 接口类型，即一个 Ref 类型的响应式数据。

Vue 计算属性 computed 函数可以传入一个 getter 和 setter，通过这两个拦截器可以切入我们任何额外的工作。也就是说我们可以通过计算属性对 el-slider 的 v-model 做更新数据时的额外工作的目标。

const computeCabinetWidth = computed({
  get() {
    return localSetting.value.cabinet.width;
  },
  set(value) {
    disabled.value = inspect();
    localSetting.value.cabinet.width = value;
    LiteConfig.eleHtml.style.setProperty(LiteCssVars.cabinetWidth, value + "rem");
  }
});

const computeContentWidth = computed({
  get() {
    return localSetting.value.content.width;
  },
  set(value) {
    disabled.value = inspect();
    localSetting.value.content.width = value;
    LiteConfig.eleHtml.style.setProperty(LiteCssVars.contentWidth, value + "vw");
  }
});

<el-collapse-item title="宽度设置">
  <div class="mb-4">
    <div class="mb-2">设置陈列柜宽度</div>
    <el-slider :min="13" :step="0.5" :max="20" v-model="computeCabinetWidth" size="small" />
  </div>
  <div>
    <div class="mb-2">设置中间内容宽度</div>
    <el-slider :disabled="disabled" :min="50" :step="1" :max="60" v-model="computeContentWidth" size="small" />
  </div>
</el-collapse-item>
</el-collapse>