Vue项目在样式文件中使用js里定义的变量

 后台页面配置一系列页面参数，想着增加一个预览实时展示给客户看，效果更加直观。需要每次把配置的样式对应展示出来，需要在样式中引用JS里定义的变量

Vue3的写法：

实例场景：后台配置页面参数，传给后端接口保存，但是页面需要一个直观的配置预览

首先看效果：

主要实现代码如下,主要看下如何定义和使用的即可：

1.scss模块

<style lang="scss">
$bg-color: v-bind('bgColor');
$txt-color: v-bind('txtColor');
$txt-size: v-bind('`${txtSize}px`');//这里注意要有px单位
.Editpage{
    .preview-box{
        background-color: $bg-color;
        color: $header-color;
        font-size:$txt-size;
    }
}

2.页面template

<div class="Editpage">
<el-form ref="formEl" :model="formData" :rules="rules" label-width="150px" style="max-width: 40%; margin-top: 30px;">
        <el-form-item label="编号" prop="no">
          <el-input v-model="formData.no" placeholder="请输入叫号屏编号" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入叫号屏名称" />
        </el-form-item>
        <el-form-item label="列表背景色" prop="bgColor">
            <el-input
              v-model="formData.bgColor"
              style="width: 200px; margin-right: 10px;"
              @change="colorChange"
            />
            <el-color-picker v-model="formData.bgColor" @change="colorChange" />
        </el-form-item>
        <el-form-item label="列表文字颜色" prop="txtColor">
            <el-input
              v-model="formData.txtColor"
              style="width: 200px; margin-right: 10px;"
              @change="colorChange"
            />
            <el-color-picker v-model="formData.txtColor" @change="colorChange" />
        </el-form-item>
        <el-form-item label="列表文字字号" prop="txtSize">
            <el-input-number v-model="formData.txtSize" :min="14" :max="18" :step="1" @change="numberChange" />
        </el-form-item>
      </el-form>

    <!-- 预览效果 -->
    <div class="preview-box" style="width: 50%;">
        <p>
          * 预览效果(数据仅作为参考,无意义)
        </p>
        <p class="middle">请 苏易云 到301诊室就诊</p>
        <h2>301室<br>苏易云</h2>
    </div>
</div>

3.js模块

<script setup lang="ts">
import { ref } from 'vue'
const bgColor = ref() // 背景颜色
const txtColor = ref() // 文字颜色
const txtSize = ref() // 列表文字字号
// 表单数据
const formData = ref({
  id: '',
  no: '',
  name: '',
  bgColor: '#012FA7',
  txtColor: '#FAFCF9',
  txtSize: '14',
})
bgColor.value = formData.value.bgColor
txtColor.value = formData.value.txtColor
txtSize.value = formData.value.txtSize
//颜色切换
function colorChange() {
  bgColor.value = formData.value.bgColor
  txtColor.value = formData.value.txtColor
}
//字号变化
function numberChange() {
  txtSize.value = formData.value.txtSize
}
/**
 * 新增事件
 */
const loading = ref(false)
async function handleAddNewData() {
  await formEl.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true
      const obj = JSON.stringify({
        bgColor: formData.value.bgColor,
        txtColor: formData.value.txtColor,
        txtSize: formData.value.txtSize,
      })
      // 版本号
      try {
          await apiCallScreen.saveCallScreen({
            no: formData.value.no,
            name: formData.value.name,
            setting: obj,
          })
          Message.success('新增成功', {
            zIndex: 2000,
          })
        router.back()
      }
      catch (error) {
      }
      finally {
        loading.value = false
      }
    }
    else {
      Message.success('验证失败', {
        zIndex: 9000,
      })
    }
  })
}
</script>

Vue2的写法：

实例场景：依据后端接口返回的配置项，按需渲染展示对应配置（页面背景、文字颜色、字号等）

1.样式（scss）文件里使用

<div class="waiting-screen" :style="cssVars">
<div>
.waiting-screen{
    background: var(--bgColor);
    color: var(--txtColor);
}

注意：:style="cssVars"一定要写在需要用到变量样式的外层标签结构上，才能生效

2.JS定义变量

data() {
    return {
        bgColor:'',//页面背景颜色
        txtColor:'',// 文字颜色
        txtSize:'',// 文字字号
    }
}

3.在computed中增加

computed: {
    cssVars() {
      return {
        '--bgColor': this.bgColor || '#012FA7',// 背景颜色
        '--txtColor': this.txtColor || '#FAFCF9',// 文字颜色
        '--txtSize': this.txtSize || '14',// 文字字号
      };
    }
  },

4.从接口里获取用于初始渲染页面的默认配置（看个人情况，可能直接前端自己定义配置就可以）

// 获取配置数据
    getScreenSetting(num) { //根据自己需要哈
      axios.get(this.linkUrl+`/api/his/v1/call/screen/detail/${this.clinicId}/${num}`)
      .then(res => {
        // 处理响应数据
        const obj = JSON.parse(res.data.data.setting)
        console.log(obj)
        this.bgColor = obj.bgColor
        this.txtColor = obj.txtColor
        this.txtSize = obj.txtSize+'px'
      })
    },

以上就是所有代码啦，希望对你有所帮助

感慨下：经济下行大环境下，职场寒冬中愿你不那么冷，快乐的牛马O(∩_∩)O哈哈~