root.style.setProperty('--theme-color1', themeObj.list[0]){
const style = document.createElement('style');
style.textContent = `
:root {
--theme-color1: ${themeObj.list[0]};
--theme-color2: ${themeObj.list[1]};
}
`;
document.head.appendChild(style);
}上方两种都是不可行的
css 变量使用demo
<template>
<view class="content" :style="{'--color': cssColor }">
<text>test css变量</text>
</view>
</template>
<script>
export default {
data() {
return {
cssColor: "red"
}
},
mounted() {
setInterval(() => {
this.cssColor = this.cssColor == 'blue' ? 'red' : 'blue'
},1000)
},
}
</script>
<style>
page {
--color: #ccc
}
.content {
color: var(--color);
}
</style>
我的实际业务是--color需要被每一个vue文件使用，我计划在app.vue里定义它，但是在app.vue里 我该怎么实现<view class="content" :style="{'--color': cssColor }"> ，从而改变值呢。按照你这个写法，我是不是得去每个页面都写一个--color
2024-08-21 11:41
<template>
<view class="" :style="{ '--mobile': isSmall }">
</view>
</template>
<script>
export default {
globalData: {
_i18n: {},
},
data() {
return {
isSmall: 0.65
};
},
onLaunch: function() {
setInterval(() => {
this.isSmall = this.isSmall === 0.65 ? 0.5 : 0.65;
console.log('this.isSmall', this.isSmall)
}, 5000);
},
onShow: function() {
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
@import '@/static/common.scss';
</style>
<style>
/* #ifndef APP-PLUS-NVUE */
page {
--mobile: 0.5;
}
/* #endif */
</style> 这是我写在APP.vue的变量，这个变量每个vue文件都会获取到，但是不会变，同样的代码写到单独的vue文件，变量就会变了，是不是因为我两个style顺序关系，但是scss写下面的话，页面都会乱。。求大神帮忙看看
DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001
Azikou
哥，你能展开说说，写个大致的示例嘛。。我这个变量问题纠结好几天了。
2024-08-21 08:53