weex-12-组件switch

酷走天涯

发布于 2018-09-14 15:16:35

1.6K0

发布于 2018-09-14 15:16:35

本节内容比较简单,创建一个switch.vue 来写本节的内容, 注意一点,本节内容请务必使用真机测试

1.设置开关状态

<switch class="switch" checked="false"> </switch>

B0A53B84-D3B0-4881-8B59-154E513BD5B0.png

 <switch class="switch" checked="true"> </switch>

2B5F659C-D0D3-4EBB-BEA0-C6655F1738E9.png

2.设置不可用

<switch class="switch" checked="true" disabled="true"> </switch>

25271CF7-9485-450F-A1FF-2F09ACC4C53F.png

3.设置背景颜色

 .switch{
    border-radius: 35px;
    background-color: red;
}

B358A296-2037-4665-AA63-19DB25E6E532.png

4.获取改变的状态 监测change事件

<switch class="switch" checked="true" disabled="false" @change="change"> </switch>

事件监测

<script>
    export default{
        methods:{
            change(e){
            console.log(e.value)
        }
      }
  }
</script>

当开关的状态改变的时候会触发change方法传入参数e,通过获取value的值,可知道当前switch的开关状态,值为true/false

由于H5 无法获取到系统的颜色,所以开发者将switch的颜色做成了iOS 系统默认的颜色,暂时无法更改,请大家尽量使用系统效果!

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.06.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度