在vue中實現antd的動態(tài)主題的代碼示例

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

在需求開發(fā)階段,鑒于項目采用了antd作為基礎組件庫,確保組件外觀與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當前antd-vue尚未實現這一便捷的CSS變量特性,但理解其背后的實現機制后,我們可以自行構建這一功能,需要的朋友可以參考下

在需求開發(fā)階段，鑒于項目采用了antd作為基礎組件庫，確保組件外觀與antd一致變得尤為重要，這包括顏色、字體大小及尺寸等樣式的統(tǒng)一。antd在其最新版本中，通過CSS變量（也稱為CSS自定義屬性）的形式，將所有樣式整合至<style>標簽內，極大地方便了開發(fā)者通過var(--antd-xxx)語法直接引用antd的樣式設置。

然而，截至當前（版本4.2.3），antd-vue尚未實現這一便捷的CSS變量特性。但理解其背后的實現機制后，我們可以自行構建這一功能。

實現思路簡述：

獲取Antd樣式：利用theme.userToken接口（或類似機制，具體依據antd-vue或自定義主題的接口而定），提取antd的樣式定義。
注入樣式：將獲取到的樣式通過JavaScript動態(tài)地添加到HTML文檔的<style>標簽中，確保組件能夠訪問到這些CSS變量。
動態(tài)更新：為了支持樣式變量的動態(tài)變更（如主題切換），需監(jiān)聽theme.userToken或相關主題配置的變化，并實時更新DOM中的<style>標簽內容，同時確保樣式更新的單一性和高效性，避免冗余或沖突。

通過以上步驟，即使antd-vue當前版本未內置CSS變量支持，我們也能通過自定義實現來達成與antd樣式的高度一致，提升開發(fā)效率和組件的可用性。

具體實現，下面代碼復制到到本地，并允許即可

<!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: '西湖區(qū)湖底公園1號',
          },
          {
            key: '2',
            name: '胡彥祖',
            age: 42,
            address: '西湖區(qū)湖底公園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的動態(tài)主題的代碼示例的文章就介紹到這了,更多相關vue antd動態(tài)主題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue electron應用調exe程序的實現步驟
這篇文章主要介紹了vue electron應用調exe程序的實現步驟,用Python寫了一個本地服務編譯成exe程序,在electron程序啟動后,自動執(zhí)行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打包后靜態(tài)資源圖片失效徹底解決的終極指南
文章詳細分析了Vue項目中靜態(tài)資源路徑失效的問題,包括開發(fā)、構建、部署等階段的常見原因,并提供了多種解決方案,旨在幫助開發(fā)者系統(tǒng)性地解決靜態(tài)資源路徑問題,構建穩(wěn)定可靠的前端應用,需要的朋友可以參考下
2025-03-03
vue 源碼解析之虛擬Dom-render
這篇文章主要介紹了vue 源碼解析 --虛擬Dom-render的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
Vue計算屬性與偵聽器和過濾器超詳細介紹
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10