app-mob-select-changeTheme.vue 2.2 KB
Newer Older
KK's avatar
KK committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
<template>
    <div  class="app-mobile-select"  >
        <div  class="ion-select-icon"></div>
        <ion-select  :value="curValue"  @ionChange="change" interface="action-sheet"  :cancel-text="$t('app.button.cancel')">
                <ion-select-option  v-for="option of options" :key="option.value" :value="option.value" class="mob-select-text">{{option.text}}</ion-select-option>
        </ion-select>
      
    </div>   
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";

@Component({
    components: {},
})
export default class AppSelect extends Vue {
    /**
     * 当前选中值
     * @memberof AppSelect
     */
    get curValue(){
        return  this.activeTheme;
    }
    
    set curValue(value:any){
        this.themeChange(value.detail.value);
    }

    public getTheme(){
        if (this.$router.app.$store.state.selectTheme) {
            return this.$router.app.$store.state.selectTheme;
        } else if (localStorage.getItem('theme-class')) {
            return localStorage.getItem('theme-class');
        } else {
            return 'app-dark-blue-theme';
        }
    }

    /**
     * change事件
     *
     * @memberof AppSelect
     */
    public change(value: any) {
        this.themeChange(value.detail.value);
    }

    /**
     * 下拉数据数组
     *
     * @type {any[]}
     * @memberof AppSelect
     */
    public options: any[] = [
        {value:"app-blue-theme",text:"dark"},
        {value:"app-dark-blue-theme",text:"light"},
        {value:"app-default-theme",text:"default"},
    ];

    /**
     * mounted
     */
    public mounted() {
        this.activeTheme = this.getTheme();
    }

    /**
     * 激活主题
     *
     * @type {any[]}
     * @memberof AppSelect
     */
    public activeTheme = "";

    /**
     * 主题变化
     *
     * @param {*} val
     * @memberof AppTheme
     */
    public themeChange(val: any) {
        if (!Object.is(this.activeTheme, val)) {
            this.activeTheme = val;
            localStorage.setItem('theme-class', val);
            this.$router.app.$store.commit('setCurrentSelectTheme', val);
        }
    }

}
</script>

<style lang="less">
@import './app-mob-select-changeTheme.less';
</style>