Switch | CabinX

示例

基础

Switch开关有五种状态：开启、关闭、禁用（开启、关闭）、聚焦、只读；移动端没有聚焦状态；

如果您需要开关初始状态为打开，请使用默认开启。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Base">
        <actions>
            <button bindclick="setDefaultOpen" text="默认开启"></button>
        </actions>
        <form>
            <item node="switch" label="App推送" value="{{defaultValue}}"></item>
        </form>
    </module>
</page>

export default XPage({
    data:{
        defaultValue: false
    },
    setDefaultOpen() {
        this.setData({
            defaultValue: true
        })
    }
});

类型

Switch开关有基础、文字、图标三种类型；

使用文字开关类型时，文字应尽量简单清晰，中文少于4个字，英文少于2个单词，文字过长会破坏开关形态，影响识别。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Type">
        <actions>
            <button bindclick="setBaseType" text="基础"></button>
            <button bindclick="setTextType" text="文字"></button>
            <button bindclick="setIconType" text="图标" disabled></button>
        </actions>
        <form>
            <item node="switch" label="App推送" v-bind="typeProps"></item>
        </form>
    </module>
</page>

export default XPage({
    data:{
        typeProps: {}
    },
    setBaseType(){
        this.setData({
            typeProps: {}
        })
    },
    setTextType() {
        this.setData({
            typeProps: {
                activeText: '开',
                inactiveText: '关',
            }
        })
    },
    setIconType(){},
});

禁用

switch在开启或关闭状态下均有禁用状态，通过disabled参数控制禁用状态。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Type">
        <actions>
            <button bindclick="toggleStatus" text="{{disabled ? '启用' : '禁用' }}"></button>
        </actions>
        <form layout="horizontal">
            <item node="switch" label="App推送" disabled="{{disabled}}"></item>
            <item node="switch" label="App推送" disabled="{{disabled}}" activeText="on" inactiveText="off"></item>
        </form>
    </module>
</page>

export default XPage({
    data:{
        disabled: true
    },
    toggleStatus() {
        this.setData({
            disabled: !this.data.disabled
        })
    },
});

只读

通过添加lock参数,改变switch开关只读状态

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Read-only">
        <actions>
            <button bindclick="toggleStatus" text="{{locked ? 'Unlock' : 'Lock' }}"></button>
        </actions>
        <form layout="horizontal" locked="{{locked}}" key="form-{{locked}}">
            <item node="switch" label="App推送"></item>
            <item node="switch" label="App推送" activeText="on" inactiveText="off"></item>
        </form>
    </module>
</page>

export default XPage({
    data:{
        locked: true
    },
    toggleStatus() {
        this.setData({
            locked: !this.data.locked
        })
    },
});

有条件

当使用切换开关需要判断前置条件时，可以通过beforeChange参数来管理输入的检查状态，程序将控制您传递给Switch开关的状态值。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module>
        <form confirm-button="{{false}}" clear-button="{{false}}">
            <item node="switch" label="App推送" beforeChange="{{beforeChange}}"></item>
        </form>
    </module>
</page>

export default XPage({
    data:{},
    beforeChange(oldValue) {
        console.info('oldValue', oldValue);
        //返回： true 为不拦截，false 为拦截
        return false
    }
});

最佳实践

在表单内

开关默认带有标签，以表明此开关作用，开关可设置默认状态为“开”或“关”。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="费用设置">
        <form confirm-button="{{false}}" clear-button="{{false}}">
            <item node="switch" label="拣货服务费" name="pickingServiceFee"></item>
            <item node="switch" label="配送费" name="deliveryFee"></item>
            <item node="switch" label="打包费" name="packingFee"></item>
        </form>
    </module>
</page>

export default XPage({
    data:{
        defaultValue: false
    },
    setDefaultOpen() {
        this.setData({
            defaultValue: true
        })
    }
});

在表格

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module>
        <table type="super" data="{{tableData}}" selectable="{{multiple: true}}" stripe>
            <cell label="任务ID" name="taskId">
                {{ cellData.rowData.taskId }}
            </cell>
            <cell label="消息类型" name="messageType">
                {{ cellData.rowData.messageType }}
            </cell>
            <cell label="推送方式" name="pushChannels">
                {{ cellData.rowData.pushChannels.join('|') }}
            </cell>
            <cell label="消息推送" name="pushChannels">
                <switch value="{{ !!cellData.rowData.pushMessageStatus }}" />
            </cell>
        </table>
    </module>
</page>

export default XPage({
    data:{
        tableData: [
            {
                taskId: '470',
                messageType: '营销',
                pushChannels: ['短信', '微信公众号'],
                pushMessageStatus: 1,
            },
            {
                taskId: '262',
                messageType: '营销',
                pushChannels: ['短信', '微信公众号'],
                pushMessageStatus: 0,
            },
            {
                taskId: '583',
                messageType: '营销',
                pushChannels: ['短信', '微信公众号'],
                pushMessageStatus: 1,
            },
            {
                taskId: '33',
                messageType: '生产',
                pushChannels: ['短信', '微信公众号'],
                pushMessageStatus: 1,
            },
        ]
    }
});

特殊用法

在标题栏动作区，表示开启或关闭该模块下的内容

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="履约方式">
        <module title="自提">
            <actions>
                <switch value="{{isSelfPickup}}" bindchanged="(value) => handleChanged('selfPickup', value)" />
            </actions>
            <form dm-if="{{isSelfPickup}}" layout="horizontal">
                <item node="date-picker" label="开始时间" name="startTime" placeholder="请输入" required colspan="{{span:3}}"></item>
                <item node="date-picker" label="结束时间" name="endTime" placeholder="请输入" required colspan="{{span:3}}"></item>
                <item node="select" label="预约天数设置" name="appointmentDays" data="{{dayList}}" placeholder="placeholder" colspan="{{span:6}}"></item>
                <item node="select" label="门店预留备货时间（MIN）" name="preserveStockingTime" tips="我是提示" data="{{dayList}}" placeholder="placeholder" required colspan="{{span:6}}"></item>
            </form>
        </module>
        <module title="配送">
            <actions>
                <switch value="{{isDelivery}}" bindchanged="(value) => handleChanged('delivery', value)" />
            </actions>
            <form dm-if="{{isDelivery}}" layout="horizontal">
                <item node="date-picker" label="开始时间" name="startTime" placeholder="请输入" required colspan="{{span:3}}"></item>
                <item node="date-picker" label="结束时间" name="endTime" placeholder="请输入" required colspan="{{span:3}}"></item>
                <item node="select" label="预约天数设置" name="appointmentDays" data="{{dayList}}" placeholder="placeholder" colspan="{{span:6}}"></item>
                <item node="select" label="门店预留备货时间（MIN）" name="preserveStockingTime" tips="我是提示" data="{{dayList}}" placeholder="placeholder" required colspan="{{span:6}}"></item>
            </form>
        </module>
    </module>
</page>

export default XPage({
    data:{
        isSelfPickup: true,
        isDelivery: false,
        dayList: [{
            label: '5天',
            value: 5
        }, {
            label: '10天',
            value: 10
        }, {
            label: '15天',
            value: 15
        }, {
            label: '30天',
            value: 30
        }],
    },
    handleChanged(type, value) {
        if (type === 'selfPickup') {
            this.setData({
                isSelfPickup: value
            }, () => {
                //do something
                console.info('selfPickup', this.data.isSelfPickup)
            });
        } else if (type === 'delivery') {
            this.setData({
                isDelivery: value
            }, () => {
                //do something
                console.info('delivery', this.data.isDelivery)
            });
        }
        
    }
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
name	名称	String	--	--	PC/Mobile	--
value	绑定值	Boolean	--	--	PC/Mobile	--
disabled	禁用	Boolean	--	false	PC/Mobile	--
activeText	开启时显示的文案	String	--	--	PC/Mobile	--
inactiveText	关闭时显示的文案	String	--	--	PC/Mobile	--
beforeChange	改变前钩子函数	Function(oldValue: Boolean): Boolean	--	--	PC/Mobile	--

Events

名称	说明	回调参数	端	版本
changed	值改变后触发	(value)	PC/Mobile	--

示例​

基础​

类型​

禁用​

只读​

有条件​

最佳实践​

在表单内​

在表格​

特殊用法​

Attributes​

Events​

示例

基础

类型

禁用

只读

有条件

最佳实践

在表单内

在表格

特殊用法

Attributes

Events