主题组件

src/components/app-mob-select-changeTheme/app-mob-select-changeTheme.less

@@ -32,4 +32,11 @@
     border-left: 5px solid transparent;
     color: #615e5ec4;
   }
+  .activeoption{
+    padding: 5px;
+    font-size: 12px;
+    width: 50px;
+    text-align: center;
+    border-radius: 2px;
+  }
 }
\ No newline at end of file

src/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue

 <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')">
+    <div  class="app-mobile-select"   @click="open">
+        <div class="activeoption" v-if="activeoption" :style="{'background':activeoption.background,'color':activeoption.color}">{{activeoption.text}}</div>
+        <ion-select v-show="false"  ref="themeselect" :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>
 
@@ -15,6 +14,8 @@ import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decora
     components: {},
 })
 export default class AppSelect extends Vue {
+
+
     /**
      * 当前选中值
      * @memberof AppSelect
@@ -27,6 +28,8 @@ export default class AppSelect extends Vue {
         this.themeChange(value.detail.value);
     }
 
+    public activeoption:any = {};
+
     public getTheme(){
         if (this.$router.app.$store.state.selectTheme) {
             return this.$router.app.$store.state.selectTheme;
@@ -53,9 +56,9 @@ export default class AppSelect extends Vue {
      * @memberof AppSelect
      */
     public options: any[] = [
-        {value:"app-blue-theme",text:"dark"},
-        {value:"app-dark-blue-theme",text:"light"},
-        {value:"app-default-theme",text:"default"},
+        {value:"app-blue-theme",text:"dark",background:"#705697",color:"#fff"},
+        {value:"app-dark-blue-theme",text:"light",background:"#5475ab",color:"#fff"},
+        {value:"app-default-theme",text:"fault",background:"#3880ff",color:"#fff"},
     ];
 
     /**
@@ -63,6 +66,7 @@ export default class AppSelect extends Vue {
      */
     public mounted() {
         this.activeTheme = this.getTheme();
+        this.setActiveoption();
     }
 
     /**
@@ -73,6 +77,20 @@ export default class AppSelect extends Vue {
      */
     public activeTheme = "";
 
+    /**
+     * 设置
+     *
+     * @type {any[]}
+     * @memberof AppSelect
+     */
+    public setActiveoption(){
+        let index = this.options.findIndex((item:any)=>{
+            return this.activeTheme == item.value;
+        })
+        console.log(index);
+       this.activeoption =  index>-1? this.options[index]:null;
+    }
+
     /**
      * 主题变化
      *
@@ -85,8 +103,21 @@ export default class AppSelect extends Vue {
             localStorage.setItem('theme-class', val);
             this.$router.app.$store.commit('setCurrentSelectTheme', val);
         }
+        this.setActiveoption();
     }
 
+    /**
+     * 打开
+     *
+     * @param {*} val
+     * @memberof AppTheme
+     */
+    public open(){
+        let select :any= this.$refs.themeselect;
+        if(select){
+            select.open();
+        }
+    }
 }
 </script>