美文网首页
Vue 关于如何使用mt-switch控件

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

作者: 三月木头 | 来源:发表于2020-10-23 16:50 被阅读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如何使用。

相关文章

网友评论

      本文标题:Vue 关于如何使用mt-switch控件

      本文链接:https://www.haomeiwen.com/subject/cevvmktx.html