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

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

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

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

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

實現(xiàn)思路簡述：

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

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

具體實現(xiàn)，下面代碼復制到到本地，并允許即可

<!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中實現(xiàn)antd的動態(tài)主題的代碼示例的文章就介紹到這了,更多相關vue antd動態(tài)主題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: