主题色

设计器内置了五种主题色供用户选择，您可以通过 theme 配置项轻松切换主题。

type Theme = 'purple' | 'orange' | 'pink' | 'green' | 'default';

• default: 默认主题
• purple: 紫色主题
• orange: 橙色主题
• pink: 粉色主题
• green: 绿色主题

如何使用？

要应用主题色，您只需在设计器组件中设置 theme 属性。例如，若要使用粉色主题，可以按以下方式配置

<fc-designer ref="designer" theme="pink" height="100vh"/>

示例

以下是一个完整的示例，展示如何在设计器中使用不同的主题色：

<template>
    <div>
        <h1>选择设计器主题</h1>
        <fc-designer ref="designer" :theme="currentTheme" height="100vh"/>
        <button @click="setTheme('purple')">紫色主题</button>
        <button @click="setTheme('orange')">橙色主题</button>
        <button @click="setTheme('pink')">粉色主题</button>
        <button @click="setTheme('green')">绿色主题</button>
        <button @click="setTheme('default')">默认主题</button>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const currentTheme = ref('default');
function setTheme(theme) {
    currentTheme.value = theme;
}
</script>

在这个示例中，用户可以通过按钮选择不同的主题色。每次点击按钮时，currentTheme 的值会更新，从而动态改变设计器的主题色。这种灵活性使得设计器能够更好地适应用户的喜好。