Vue 关于如何使用mt-switch控件

2020-10-23  本文已影响0人  三月木头

业务需求:需要一个开关控制展示不同东西。

代码实现:

     <div class="menu_item">
        <mt-switch v-model="nightTheme" class="fr xq_switch"></mt-switch>
        <span>{{$t('nav.atnight')}}</span>
      </div>

此处的组件mt-switch 其实就是我们导入js的手机框架mint-ui里面的框架。
我们使用这个组件时候,会感觉很怪。怎样才能知道这个组件开关的变化呢?其实代码是通过监听,捆绑到这个组件上属性的变化来感知变化。也就是我们需要监听nightTheme 这个属性的变化来感知开关。所以我们通过如下代码进行处理。

 @Watch('nightTheme')
  nightThemeChange(val:boolean){
    console.log(val,"nightTheme")
    if(val){
      this.$store.commit('setTradeThem','black')      
    }else{
      this.$store.commit('setTradeThem','white')
    }
  }

这就是mt-switch如何使用。

上一篇 下一篇

猜你喜欢

热点阅读