theme 主题组件 OK

基础用法

ykc-theme 的基础用法。

说明

文档中是通过 mounted 钩子函数获取 DOM 元素后再挂载 ykc-theme 组件的。Why (opens new window)
实际项目中，可以直接将 target 设置成 window.document.documentElement 或者 window.document.body

<template>
  <div ref="demo">
    <ykc-theme v-if="target" :target="target" :themes="themes">
      <div class="theme-demo-basic">
        <span>云快充，让充电更美好！</span>
        <ykc-button type="primary" @click="switchTheme">切换主题色</ykc-button>
      </div>
    </ykc-theme>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        target: null,
        themes: {
          '--color-red': 'red',
          '--color-blue': 'blue',
        },
      };
    },
    methods: {
      switchTheme() {
        const originRed = this.themes['--color-red'];
        if (originRed === 'red') {
          this.themes = {
            '--color-red': 'black',
            '--color-blue': 'green',
          };
        } else {
          this.themes = {
            '--color-red': 'red',
            '--color-blue': 'blue',
          };
        }
      },
    },
    mounted() {
      this.target = this.$refs.demo;
    },
  };
</script>
<style>
  div.theme-demo-basic {
    width: 400px;
    color: var(--color-red);
    border: 2px solid var(--color-blue);
    padding: 8px 0 8px 16px;
    font-weight: bold;
  }
</style>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值
target	是	需要应用主题变量的 DOM 元素	Element	无	无
themes	否	给 target 应用主题变量	Object(每个 key 必须符合 css 变量定义要求)	无	'--theme-color-primary': '#4d8cfd' '--theme-color-primary': '#386cc8'