ActionSheet 动作面板

从底部弹出的动作菜单面板。

基本用法(选择类)

默认

<div @click="switchActionSheet">
    <span class="title"><label>性别</label></span>
    <span class="selected-option"></span>
</div>
<nut-actionsheet :is-visible="isVisible" 
    @close="switchActionSheet"
    :menu-items="menuItems"
    @choose="chooseItem"
></nut-actionsheet>

export default {
    data() {
        return {
            sex: '请选择',
            isVisible: false,
            menuItems: [
                {
                    'name': '男',
                    'value': 0
                },
                {
                    'name': '女',
                    'value': 1
                }
            ]
        };
    },
    methods: {
        switchActionSheet() {
            this.isVisible = !this.isVisible;
        },
        chooseItem(itemParams) {
            this.sex = itemParams.name;
        }
    }
};

带取消按钮

<div @click="switchActionSheet">
    <span class="title"><label>性别</label></span>
    <span class="selected-option"></span>
</div>
 <nut-actionsheet :is-visible="isVisible" 
    @close="switchActionSheet"
    :menu-items="menuItems"
    @choose="chooseItem"
    cancelTxt="取消"
></nut-actionsheet>

export default {
    data() {
        return {
            sex: '请选择',
            isVisible: false,
            menuItems: [
                {
                    'name': '男',
                    'value': 0
                },
                {
                    'name': '女',
                    'value': 1
                }
            ]
        };
    },
    methods: {
        switchActionSheet() {
            this.isVisible = !this.isVisible;
        },
        chooseItem(itemParams) {
            this.sex = itemParams.name;
        }
    }
};

高亮已选项

<div @click="switchActionSheet">
    <span class="title"><label>性别</label></span>
    <span class="selected-option"></span>
</div>
<nut-actionsheet :is-visible="isVisible" 
    @close="switchActionSheet"
    :menu-items="menuItems"
    @choose="chooseItem"
    :chooseTagValue="sex"
></nut-actionsheet>

export default {
    data() {
        return {
            sex: '请选择',
            isVisible: false,
            menuItems: [
                {
                    'name': '男',
                    'value': 0
                },
                {
                    'name': '女',
                    'value': 1
                }
            ]
        };
    },
    methods: {
        switchActionSheet() {
            this.isVisible = !this.isVisible;
        },
        chooseItem(itemParams) {
            this.sex = itemParams.name;
        }
    }
};

设置禁用状态

<div @click="switchActionSheet">
    <span class="title"><label>性别</label></span>
    <span class="selected-option"></span>
</div>
<nut-actionsheet :is-visible="isVisible" 
    @close="switchActionSheet"
    :menu-items="menuItems"
    @choose="chooseItem"
    :chooseTagValue="sex"
></nut-actionsheet>

export default {
    data() {
        return {
            sex: '请选择',
            isVisible: false,
            menuItems: [
                {
                    'name': '男',
                    'value': 0,
                    'disable': false
                },
                {
                    'name': '女',
                    'value': 1,
                    'disable': true
                }
            ]
        };
    },
    methods: {
        switchActionSheet() {
            this.isVisible = !this.isVisible;
        },
        chooseItem(itemParams) {
            this.sex = itemParams.name;
        }
    }
};

提示

<div @click="switchActionSheet">
    <span class="title"><label>我就列表测试数据</label></span>
    <span class="sub-title">我是描述~~~~</span>
    <div class="selected-option">删除本条</div>
</div>
<nut-actionsheet :is-visible="isVisible" 
    :menu-items="menuItems4" 
    chooseTagValue="确定"
    cancelTxt="取消"
    @close="switchActionSheet"
    @choose="choose"
>
    <span slot="title"><label>确定删除吗？</label></span>
    <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
</nut-actionsheet>

export default {
    data() {
        return {
            sex: '请选择',
            isVisible: false,
            menuItems: [
                {
                     'name': '确定'
                }
            ]
        };
    },
    methods: {
        switchActionSheet() {
            this.isVisible = !this.isVisible;
        },
        choose(itemParams) {
        }
    }
};

自定义内容

<div @click="switchActionSheet">
    <span class="title"><label>内容自定义</label></span>
    <div class="selected-option">打开</div>
</div>
<nut-actionsheet :is-visible="isVisible" 
    @close="switchActionSheet"
>
    <div slot="custom" class="custom-wrap"><span>自定义</span></div>
</nut-actionsheet>

export default {
    data() {
        return {
            isVisible: false
        }   
    },
    methods: {
        switchActionSheet() {
            this.isVisible = !this.isVisible;
        }
    }
};

Prop

Slot

Event