Vue项目在样式文件中使用js定义的变量方法示例
作者：程序媛荞麦
在Vue中要在style标签中使用JavaScript变量,这篇文章主要介绍了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'
})
},总结
到此这篇关于Vue项目在样式文件中使用js定义的变量的文章就介绍到这了,更多相关Vue样式文件使用js变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！