关于vue中-js使用-css的变量,和css使用js定义的变量
Less Scss 预处理语言
通常咱们会应用less等预处理语言来设定全局的色彩治理
color.less
// DARK-THEME
@base-bg: #001f3b;
// @base-bg: #042d6b;
@light-font-color: rgb(219, 219, 219);
@shadow-color: rgb(59, 54, 54);
@menu-active-color: rgb(193, 194, 196);
@table-head-color: rgba(69, 107, 150, 0.808);
@btn-hover-color: #0f2035;
@primary-color: #39bfed;
@primary-color-opacity: #39c0ed67;
@bg-content: rgba(27, 159, 225, 0.205);
@bg-content-3: rgba(27, 159, 225, 0.116);
有的时候某些场景咱们须要在JS中去应用这些色彩
比方咱们在应用echarts的时候,这时候咱们能够应用 :export 来导出变量
index.less
// DARK-THEME @base-bg: #001f3b; // @base-bg: #042d6b; @light-font-color: rgb(219, 219, 219); @shadow-color: rgb(59, 54, 54); @menu-active-color: rgb(193, 194, 196); @table-head-color: rgba(69, 107, 150, 0.808); @btn-hover-color: #0f2035; @primary-color: #39bfed; @primary-color-opacity: #39c0ed67; @bg-content: rgba(27, 159, 225, 0.205); @bg-content-3: rgba(27, 159, 225, 0.116); :export { primary: @primary-color; primaryOpacity: @primary-color-opacity; }
component.vue
import colors from '../common/color.less' const chartOption = { xAxis: { type: 'value', splitLine: 'none', axisLine: { lineStyle: { color: colors.primary } }, }, yAxis: { type: 'category', splitLine: 'none', axisLine: { lineStyle: { color: colors['primary'] } }, }, }
在vue的style中应用js变量
vue2应用变量形式为传入vars
export default { data () { return { red: 'red' } } } <style lang="less" scoped vars="{red}"> p { color: var(--red) } </style>
vue3中咱们能够子style中间接应用v-bind(attr)来应用变量
<template> <p :class="$style.red"> Edit <code>components/HelloWorld.vue</code> to test hot module replacement. </p> </template> <script setup> const color = 'green' </script> <style scoped module> .red { color: v-bind(color); } </style>
转 : https://lequ7.com/guan-yu-cssvue-zhong-shi-yong-css-bian-liang.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2021-04-22 C# Winform设置焦点focus(textbox)和全选
2021-04-22 C# 运用 log4net.dll 记录日志文件
2021-04-22 C#使用log4net记录日志(项目中用的此方法,在类库里面写的)
2020-04-22 java控制台等待输入