Vue項(xiàng)目在樣式文件中使用js定義的變量方法示例

更新時間：2025年05月27日 09:33:27 作者：程序媛蕎麥

在Vue中要在style標(biāo)簽中使用JavaScript變量,這篇文章主要介紹了Vue項(xiàng)目在樣式文件中使用js定義的變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

后臺頁面配置一系列頁面參數(shù)，想著增加一個預(yù)覽實(shí)時展示給客戶看，效果更加直觀。需要每次把配置的樣式對應(yīng)展示出來，需要在樣式中引用JS里定義的變量

Vue3的寫法：

實(shí)例場景：后臺配置頁面參數(shù)，傳給后端接口保存，但是頁面需要一個直觀的配置預(yù)覽

首先看效果：

主要實(shí)現(xiàn)代碼如下,主要看下如何定義和使用的即可：

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>

    <!-- 預(yù)覽效果 -->
    <div class="preview-box" style="width: 50%;">
        <p>
          * 預(yù)覽效果(數(shù)據(jù)僅作為參考,無意義)
        </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() // 列表文字字號
// 表單數(shù)據(jù)
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('驗(yàn)證失敗', {
        zIndex: 9000,
      })
    }
  })
}
</script>

Vue2的寫法：

實(shí)例場景：依據(jù)后端接口返回的配置項(xiàng)，按需渲染展示對應(yīng)配置（頁面背景、文字顏色、字號等）

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

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

注意：:style="cssVars"一定要寫在需要用到變量樣式的外層標(biāo)簽結(jié)構(gòu)上，才能生效

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.從接口里獲取用于初始渲染頁面的默認(rèn)配置（看個人情況，可能直接前端自己定義配置就可以）

// 獲取配置數(shù)據(jù)
    getScreenSetting(num) { //根據(jù)自己需要哈
      axios.get(this.linkUrl+`/api/his/v1/call/screen/detail/${this.clinicId}/${num}`)
      .then(res => {
        // 處理響應(yīng)數(shù)據(jù)
        const obj = JSON.parse(res.data.data.setting)
        console.log(obj)
        this.bgColor = obj.bgColor
        this.txtColor = obj.txtColor
        this.txtSize = obj.txtSize+'px'
      })
    },