Vue3 CSS 变量注入

最新推荐文章于 2024-06-18 22:08:44 发布

倔强的小绵羊

最新推荐文章于 2024-06-18 22:08:44 发布

阅读量2.1k

点赞数 2

分类专栏： vue3.0 前端文章标签：前端 vue3 css 变量

本文链接：https://blog.csdn.net/lhz_333/article/details/122219016

版权

前端同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

前言

项目中需要动态修改一个 radio-group 组件的样式，便想到了 css 变量注入的方式。本文主要记录一下。

使用代码如下：

<template>
  <div class="custom-tabs">
    <a-radio-group v-model:value="value" button-style="solid">
      <a-radio-button value="a">Hangzhou</a-radio-button>
      <a-radio-button value="b">Shanghai</a-radio-button>
      <a-radio-button value="c">Beijing</a-radio-button>
      <a-radio-button value="d">Chengdu</a-radio-button>
    </a-radio-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'test',
  setup() {
    const value = ref<string>('a');
    const tabsStyle = ref({
      color: '#41464b',
      activeColor: '#fff',
      backgroundColor: '#409eff'
    })

    return {
      value,
      tabsStyle
    }
  },
})
</script>

<style lang="less" scoped>
.custom-tabs {
  :deep(.ant-radio-group) {
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
      color: v-bind('tabsStyle.activeColor');
      background: v-bind('tabsStyle.backgroundColor');
      border-color: v-bind('tabsStyle.backgroundColor');
    }
    .ant-radio-button-wrapper {
      color: v-bind('tabsStyle.color')
    }
  }
}
</style>

详细了解请移步至：SFC style CSS variable injection (new edition) by yyx990803 · Pull Request #231 · vuejs/rfcs · GitHub