<!-- 功能：自定义主题 ; 作者：LZJ; 时间：2022年10月11日 15:39:59-->
<template>
    <div id="Theme" class="pd20">
        <div class="flex-start-center ft18 mb20">
            <span class="c-theme">主题色选择：</span>
            <ThemePicker @change="themeChange" />
        </div>
        <div class="pd20 ft18 border br8 bgc-f5f5f5 fw-500">
            <code>
                <pre><font class="keyword-tag">&lt;template&gt;</font></pre>
                <pre>   <font class="keyword-tag">&lt;ThemePicker @change=<font class="string-tag">"themeChange"</font> /&gt;</font></pre>
                <pre><font class="keyword-tag">&lt;/template&gt;</font></pre>
                <br>
                <CodeBuild :script-obj="scriptObj">
                    <div slot="methods" class="plr20">
                        <div class="plr20">themeChange(<span class="string-tag">val</span>) {
                            this.$store.dispatch('changeSetting', {
                            <p class="plr20">key: <span class="value-tag">'theme'</span>,</p>
                            <p class="plr20">value: <span class="string-tag">val</span></p>
                        </div>
                        <p> });</p>
                    </div>
                </CodeBuild>
            </code>
        </div>
    </div>
</template>

<script>

import ThemePicker from '@/components/layouts/ThemePicker.vue';

import CodeBuild from './CodeBuild.vue';
export default {
    // 组件名称
    name: 'Theme',
    // 局部注册的组件
    components: { ThemePicker, CodeBuild },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            code: `<ThemePicker @change="themeChange" />`,
            scriptObj: {
                importArr: [{ component: 'ThemePicker', componentUrl: '@/components/layouts/ThemePicker.vue' }]
            }
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        themeChange(val) {
            this.$store.dispatch('changeSetting', {
                key: 'theme',
                value: val
            });
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>

</style>
