在vue中实现antd的动态主题的代码示例

更新时间：2024年07月17日 09:28:01 作者：淡淡的夏季

在需求开发阶段,鉴于项目采用了antd作为基础组件库,确保组件外观与antd一致变得尤为重要,这包括颜色、字体大小及尺寸等样式的统一,然而,截至当前antd-vue尚未实现这一便捷的CSS变量特性,但理解其背后的实现机制后,我们可以自行构建这一功能,需要的朋友可以参考下

在需求开发阶段，鉴于项目采用了antd作为基础组件库，确保组件外观与antd一致变得尤为重要，这包括颜色、字体大小及尺寸等样式的统一。antd在其最新版本中，通过CSS变量（也称为CSS自定义属性）的形式，将所有样式整合至<style>标签内，极大地方便了开发者通过var(--antd-xxx)语法直接引用antd的样式设置。

然而，截至当前（版本4.2.3），antd-vue尚未实现这一便捷的CSS变量特性。但理解其背后的实现机制后，我们可以自行构建这一功能。

实现思路简述：

获取Antd样式：利用theme.userToken接口（或类似机制，具体依据antd-vue或自定义主题的接口而定），提取antd的样式定义。
注入样式：将获取到的样式通过JavaScript动态地添加到HTML文档的<style>标签中，确保组件能够访问到这些CSS变量。
动态更新：为了支持样式变量的动态变更（如主题切换），需监听theme.userToken或相关主题配置的变化，并实时更新DOM中的<style>标签内容，同时确保样式更新的单一性和高效性，避免冗余或冲突。

通过以上步骤，即使antd-vue当前版本未内置CSS变量支持，我们也能通过自定义实现来达成与antd样式的高度一致，提升开发效率和组件的可用性。

具体实现，下面代码复制到到本地，并允许即可

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://registry.npmmirror.com/@babel/standalone/^7/files/babel.min.js"></script>
  <script src="https://registry.npmmirror.com/vue/3/files/dist/vue.global.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/^1/files/dayjs.min.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/customParseFormat.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/advancedFormat.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/weekday.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/localeData.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/weekOfYear.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/weekYear.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.11/files/plugin/quarterOfYear.js"></script>
  <script src="https://registry.npmmirror.com/ant-design-vue/4.2.3/files/dist/antd.min.js"></script>


  <style>
    .test {
      color: var(--antv-color-primary)
    }
  </style>
</head>

<body>
  <div id="root"></div>

  <script>
    Babel.registerPreset("env-plus", {
      presets: [
        [Babel.availablePresets["env"]],
        [Babel.availablePresets['react'], { pragma: 'h', pragmaFrag: "Fragment", }]
      ],
      plugins: [],
    });

    const toLine = (name) => {
      if (!name) return name
      return name.replace(/([A-Z])/g, '-$1').toLowerCase()
    }
  </script>


  <!-- 代码开始 -->
  <script type="text/babel" data-presets="env-plus">
    const { createApp, ref, h, watch } = Vue
    const { Button, ConfigProvider, theme, Table } = antd

    const { useToken } = theme

    
    const styleDom = document.createElement('style')
    document.head.appendChild(styleDom)

    const setCssVar = (data) => {
      const list = Object.entries((data)).map(([key, val]) => {
        return `--antv-${toLine(key)}: ${val}`
      }).join(';')

      const css = `:root { ${list} }`
      styleDom.textContent = css
    }


    const App = {
      setup() {

        const { token } = useToken()


        watch(token, (newToken) => {
          setCssVar(newToken)
        }, {
          immediate: true
        })
        
        
        const myTheme = ref({
          colorPrimary: 'red',
          colorTextHeading: 'red',
          colorText: 'red',
          fontWeightStrong: 400
        })

        const handleTheme = () => {
          myTheme.value.colorPrimary = myTheme.value.colorPrimary === 'red' ? 'green' : 'red'
        }

        const dataSource = [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ];

        const columns = [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ]

        return () => {
          return <ConfigProvider
            theme={{ token: myTheme.value }}
          >
            <Button type="primary" onClick={handleTheme}>切换主题</Button>
            <div class='test'>使用--antv-colorPrimary变量</div>

            <Table columns={columns} dataSource={dataSource} />
          </ConfigProvider>
        }
      },
    }



    const app = createApp(App)
    app.mount('#root')
  </script>
</body>

</html>

到此这篇关于在vue中实现antd的动态主题的代码示例的文章就介绍到这了,更多相关vue antd动态主题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue electron应用调exe程序的实现步骤
这篇文章主要介绍了vue electron应用调exe程序的实现步骤,用Python写了一个本地服务编译成exe程序,在electron程序启动后,自动执行exe程序,文中有详细的代码示例供大家参考,需要的朋友可以参考下
2024-02-02
在vue-cli中引入lodash.js并使用详解
今天小编就为大家分享一篇在vue-cli中引入lodash.js并使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
详解vue 实例方法和数据
这篇文章主要介绍了vue 实例方法和数据的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-10-10
vue实现密码显示与隐藏按钮的自定义组件功能
本文通过两种思路给大家介绍vue实现密码显示与隐藏按钮的自定义组件功能，感兴趣的朋友跟随小编一起看看吧
2019-04-04
vue控制滚动条滑到某个位置的方法实例
当容器有滚动条时,有时需要将滚动条滑到某个位置,下面这篇文章主要给大家介绍了关于vue控制滚动条滑到某个位置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
解决vue页面刷新vuex中state数据丢失的问题
这篇文章介绍了解决vue页面刷新vuex中state数据丢失的问题，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
Vue privide 和inject 依赖注入的使用详解
这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Vue打包后静态资源图片失效彻底解决的终极指南
文章详细分析了Vue项目中静态资源路径失效的问题,包括开发、构建、部署等阶段的常见原因,并提供了多种解决方案,旨在帮助开发者系统性地解决静态资源路径问题,构建稳定可靠的前端应用,需要的朋友可以参考下
2025-03-03
vue 源码解析之虚拟Dom-render
这篇文章主要介绍了vue 源码解析 --虚拟Dom-render的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue计算属性与侦听器和过滤器超详细介绍
这篇文章主要介绍了Vue计算属性与侦听器和过滤器，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10

在vue中实现antd的动态主题的代码示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具