业务需求:需要一个开关控制展示不同东西。
代码实现:
<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如何使用。
网友评论