vue在sass或css中使用变量，动态改变样式

目录

一、问题

二、解决方法

三、总结

---

一、问题

   写了一个弹窗，但是弹窗的内容根据外部传入的状态是不同的，导致弹窗的高度不固定，需要根据不同的状态动态变化。

   具体需求：状态为其他时，只显示两个字段；状态为双人核查时，显示四个字段。高度更具字段的多少动态变化。

二、解决方法

1.具体实现方式

   1）在setup或data中定义一个变量 modalHeight。

    2) 在template中 定义一个对象 {'xxx':modalHeight} //xxx就是modalHeight的引用

    3) 在css或sass样式中 可以直接通过  var(xxx)来获取到 modalHeight的值，例如：height: var(xxx)

    4）在setup或mounted中 书写判断逻辑，不同的状态下给modalHeight赋不同的值。

2.代码

<template>
  <Modal
    class="startorder-modal"
    :isShow="configure.isShow"
    :width="configure.width"
    :title="configure.title"
    :style="{ '--modalHeight': modalHeight }"
    @closeModal="handleClose"
  >
    <div v-loading="loading" class="startorder-wrap">
      <Form
        :formData="inputContent"
        class="form-startorder"
        :labelStyle="labelStyle"
        :inputStyle="inputStyle"
        :datePickerStyle="datePickerStyle"
      >
      </Form>
      <div class="button-area">
        <el-button class="button cancel-button" @click.stop="handleClose">取消</el-button>
        <el-button class="button" type="primary" @click.stop="handleSubmit"> 确认</el-button>
      </div>
    </div>
  </Modal>
</template>
<script>
  setup(props,{emit}){
   // 默认弹窗高度
    let modalHeight = ref('29vh');
    onMounted(() => {
      // 动态更改高度
      hiddenCheckInfo();
    });
    const hiddenCheckInfo = () => {
      //需要更改的表单元素
      let checkInfo = ['checkname', 'checkpassword'];
      let skintestConfig = userStore().optionConfig['skin_test_yz_exe'];
      if (props.detailData.action === '皮试' && (skintestConfig === '2' || skintestConfig === '3')) {
        console.log('皮试医嘱');
        for (let i = 0; i < checkInfo.length; i++) {
          inputContent[checkInfo[i]].hidden = false;
        }
        modalHeight.value = '48vh';
      } else {
        for (let i = 0; i < checkInfo.length; i++) {
          inputContent[checkInfo[i]].hidden = true;
        }
      }
    };
    return{
       modalHeight,
    }
  }
</script>
<style lang="scss" scoped>
.startorder-modal {
  font-size: 16px;
  ::v-deep .modal-container {
    height: var(--modalHeight);
    min-height: 270px;
  }
}
</style>

3.最终结果

其他状态

双人核查

 

 

三、总结

1.具体用法

2.写下的东西希望都有意义！

/*

希望对你有帮助！

如有错误，欢迎指正,非常感谢！

*/