一个选择自定义颜色和 layout 风格的选择器面板，依赖 el-color-picker

基本使用

自定义主题色

hex

r

g

b

预设主题色

布局

横向菜单和纵向菜单混合模式

<template>
    <yb-theme-select v-model="theme" />
</template>
<script>
    export default {
        data() {
            return {
                theme: {
                    primaryColor: '#CD8A26',
                    layout: 'ltr',
                    mixMode: false,
                },
            };
        },
    };
</script>

显示 复制 复制

Props

参数	说明	类型	可选值	默认值
value / v-model	绑定值	object	--	--
value.primaryColor	主题色	string	--	'#409EFF'
value.layout	布局风格	string	--	'tlr'
value.mixMode	横向菜单和纵向菜单混合模式	boolean	--	false
presetColors	预设主题色选项，{name,color}	string[]|object[]	--	['#409EFF','#FA541C','#F47A1D','#1CBBB4','#9D26B0','#49AE17','#722ED1','#333333']
themeLayouts	内置显示的布局类型	string[]	--	['tlr','ltr','tb','lr','tlr-light','ltr-light','tb-light','lr-light']

Events

事件名称	说明	参数
change	选中值发生变化时触发	{ primaryColor,layout}