TinyVue如何自定义设计规范
TinyVue提供了自定义设计规范的能力。
比如：我想修改Grid表格组件排序图标。
自定义设计规范步骤：
- 定义设计规范对象 design，包含name/version/components三个字段，我们要定制Grid组件的icon
- 给Grid组件外层包一个 ConfigProvider 组件，配置 design 属性
具体代码如下：
<script setup lang="ts">
import { ref } from 'vue'
import { Grid as TinyGrid, ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
import { iconUp, iconDown } from '@opentiny/vue-icon'
const design = ref({
name: 'element-ui', // 设计规范名称
version: '1.0.0', // 设计规范版本号
components: {
Grid: {
icons: {
sortDefault: null,
sortAsc: iconUp(),
sortDesc: iconDown(),
}
}
}
})
</script>
<template>
<tiny-config-provider :design="design">
<tiny-grid ...>
...
</tiny-grid>
</tiny-config-provider>
</template>
效果如下：
你可以在 Playground 代码演练场上查看效果。