config-provider

config-provider 被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到，config-provider 使用了 Vue 的 provide/inject 特性

基础用法

通过这个组件来给设置默认配置

<script setup lang="ts">
import { ref } from 'vue';

const size = ref('medium');

function handlerClick() {
  size.value = size.value === 'medium' ? 'large' : 'medium';
}
</script>

<template>
  <v-config-provider
    :size="size"
    prefix-cls="v"
    :token="{
      color: {
        primary: '#14C9C9',
      },
    }"
  >
    <v-button theme="primary" @click="handlerClick">
      Button
    </v-button>
  </v-config-provider>
</template>

组件大小

通过修改size自定义组件默认大小。

<script setup lang="ts">
const sizes = ['small', 'medium', 'large'];
</script>

<template>
  <v-space wrap>
    <v-config-provider
      v-for="size in sizes"
      :key="size"
      :size="size"
    >
      <v-space>
        <v-button>Default</v-button>
        <v-button theme="primary">
          Primary
        </v-button>
        <v-button theme="success">
          Success
        </v-button>
        <v-button theme="error">
          Error
        </v-button>
        <v-button theme="warning">
          Warning
        </v-button>
      </v-space>
    </v-config-provider>
  </v-space>
</template>

组件命名空间

通过修改prefixCls自定义组件class名、CSS变量名。(你可以打开调试窗口查看结果)。

<template>
  <v-config-provider
    prefix-cls="p"
  >
    <v-button theme="primary">
      Button
    </v-button>
  </v-config-provider>
</template>

组件token

设置组件默认token，通过修改 token，我们可以呈现出各种各样的样式（内部使用了CSS变量）。

<script setup lang="ts">
import { reactive } from 'vue';

const token = reactive({
  color: {
    primary: '#14C9C9',
  },
});

function changeColor() {
  token.color.primary = token.color.primary === '#14C9C9' ? '#8b5cf6' : '#14C9C9';
}
</script>

<template>
  <v-space>
    <v-button theme="primary">
      Button
    </v-button>
    <v-config-provider :token="token">
      <v-space>
        <v-button theme="primary" @click="changeColor">
          Button
        </v-button>
        <v-config-provider
          :token="{
            color: {
              primary: 'pink',
            },
          }"
        >
          <v-button theme="primary">
            Button
          </v-button>
        </v-config-provider>
      </v-space>
    </v-config-provider>
  </v-space>
</template>

组件主题

组件不负责生成样式，而是通过注入的主题，引入了各种样式。你可以按照自己的需要去修改默认的主题。

<script setup lang="ts">
import { themes } from '@/index';
</script>

<template>
  <v-config-provider
    :themes="themes"
  >
    <v-space wrap>
      <v-button>Default</v-button>
      <v-button theme="primary">
        Primary
      </v-button>
      <v-button theme="success">
        Success
      </v-button>
      <v-button theme="error">
        Error
      </v-button>
      <v-button theme="warning">
        Warning
      </v-button>
    </v-space>
  </v-config-provider>
</template>

设置语言环境

设置组件默认语言环境

API

config-provider 属性

属性名	说明	类型	默认值
size	默认大小	string | enum	medium
prefix-cls	组件命名空间	string	v
token	组件token	Token	默认token
themes	组件主题	Themes	-
locale	语言环境	Locale	-

config-provider 插槽

插槽名	描述
default	默认插槽