lc-switch

开关组件，用作三端统一的开关显示

效果

使用方法

<template>
  <div class="demo">
    <scroller>
      <title title="lc-switch"></title>
      <category title="switch组件"></category>
      <lc-cell :has-top-border="true"
                :auto-accessible="false"
                label="默认样式">
            <lc-switch slot="value" :autoSwitch="autoSwitch" :opened="opened1"
            :title="title" @toggle="toggleHandle"></lc-switch>
      </lc-cell>
      <category title="自定义样式"></category>
      <lc-cell :has-top-border="false" :has-bottom-border="false" label="打开颜色">
        <input class="input"
               slot="value"
               placeholder="打开颜色"
               v-model="checkedtBgc"
               @input="checkedtBgc=$event.value"/>
      </lc-cell>
      <lc-cell :has-top-border="false" :has-bottom-border="false" label="关闭颜色">
        <input class="input"
               slot="value"
               placeholder="关闭颜色"
               v-model="defaultBgc"
               @input="defaultBgc=$event.value"/>
      </lc-cell>
      <lc-cell :has-top-border="false" :has-bottom-border="false" label="">
            <lc-switch slot="value" :opened="opened2" @toggle="toggleHandle"
                 :checkedtBgc="checkedtBgc" :height="height" :defaultBgc="defaultBgc">
            </lc-switch>  
      </lc-cell>    
    </scroller>
  </div>
</template>
<script>
    import Title from 'lighting-ui/packages/_mods/title.vue';
    import Category from 'lighting-ui/packages/_mods/category.vue';
    import LcCell from 'lighting-ui/packages/lc-cell';
    import LcSwitch from 'lighting-ui/packages/lc-switch';

    export default {
        components: { LcSwitch,LcCell, Title, Category },
        data(){
            return {
                checkedtBgc:'#05B93A',
                defaultBgc:'#999999',
                height: 40,
                opened1:true,
                opened2:false,
                autoSwitch:false,

                title:'确定执行吗?',
            }
        },
        methods:{
            toggleHandle(isOpen){
                console.log(isOpen)
            },
        }
    }
</script>
<style scoped>
  .input {
    width: 300px;
    text-align: right;
    font-size: 28px;
  }
</style>

可配置参数

Prop	Type	Required	Default	Description
autoSwitch	Boolean	N	true	是否自动切换 (注1)
opened	Boolean	N	true	是否打开
checkedtBgc	String	N	#3580ed	打开状态颜色
defaultBgc	String	N	#cccccc	关闭状态颜色
title	String	N	确定吗？	确认框文本

注1: autoSwitch控制是否组件内自动切换开关状态。设为false时，会弹出确认框，点击ok状态触发toggle事件发射给父组件调用。

事件回调

@toggle="toggleHandle"