如何使用手写笔访问vue文件中的javascript变量？
如何使用手写笔访问vue文件中的javascript变量？
提问于 2018-07-05 01:38:56
例如：
<script>
export default {
data() {
return{
varinjs: 1,
}
}
}
</script>
<style lang="stylus">
varincss = varinjs
body
if varincss == 0
background-color red
else varincss == 1
background-color blue
</style>有没有办法在css中访问javascript变量？可以使用sass或更少，但我更喜欢触控笔。
回答 2
Stack Overflow用户
发布于 2018-07-10 12:26:34
我知道这不是“这个”问题的答案(我想发表评论)，但我会试着给出一个替代的解决方案。
手写笔支持内置函数json(path[, options])，这意味着您可以将所有变量放入一个JSON文件中，并将它们提供给您的JS文件和Stylus文件。
您不能使用JS访问手写笔变量，除非您找到某种构建时库来将指定的js文件/变量转换为手写笔变量，否则您可能无法这样做。
Stack Overflow用户
发布于 2018-07-10 23:13:40
您可以使用CSS自定义属性来实现这一点。
使用它们绑定手写笔变量，只需处理JavaScript上的更改。
<script>
export default {
data () {
return {
theme: { background: '#ff0000' }
};
},
watch: {
'theme.background': { immediate: true, handler: 'applyVariables' }
},
methods: {
applyVariables () {
const scope = document.documentElement.styles;
scope['--theme-background'] = this.theme.background;
}
}
};
</script>
<style lang="stylus">
theme-background = var(--theme-background, #ff054a);
// The first argument is variable name and second is placeholder value.
.theme-button
background-color: theme-background
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51178697
复制相关文章
相似问题