ActionSheet 动作面板

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

基本用法(选择类)

默认

  1. <div @click="switchActionSheet">
  2. <span class="title"><label>性别</label></span>
  3. <span class="selected-option"></span>
  4. </div>
  5. <nut-actionsheet :is-visible="isVisible"
  6. @close="switchActionSheet"
  7. :menu-items="menuItems"
  8. @choose="chooseItem"
  9. ></nut-actionsheet>
  1. export default {
  2. data() {
  3. return {
  4. sex: '请选择',
  5. isVisible: false,
  6. menuItems: [
  7. {
  8. 'name': '男',
  9. 'value': 0
  10. },
  11. {
  12. 'name': '女',
  13. 'value': 1
  14. }
  15. ]
  16. };
  17. },
  18. methods: {
  19. switchActionSheet() {
  20. this.isVisible = !this.isVisible;
  21. },
  22. chooseItem(itemParams) {
  23. this.sex = itemParams.name;
  24. }
  25. }
  26. };

带取消按钮

  1. <div @click="switchActionSheet">
  2. <span class="title"><label>性别</label></span>
  3. <span class="selected-option"></span>
  4. </div>
  5. <nut-actionsheet :is-visible="isVisible"
  6. @close="switchActionSheet"
  7. :menu-items="menuItems"
  8. @choose="chooseItem"
  9. cancelTxt="取消"
  10. ></nut-actionsheet>
  1. export default {
  2. data() {
  3. return {
  4. sex: '请选择',
  5. isVisible: false,
  6. menuItems: [
  7. {
  8. 'name': '男',
  9. 'value': 0
  10. },
  11. {
  12. 'name': '女',
  13. 'value': 1
  14. }
  15. ]
  16. };
  17. },
  18. methods: {
  19. switchActionSheet() {
  20. this.isVisible = !this.isVisible;
  21. },
  22. chooseItem(itemParams) {
  23. this.sex = itemParams.name;
  24. }
  25. }
  26. };

高亮已选项

  1. <div @click="switchActionSheet">
  2. <span class="title"><label>性别</label></span>
  3. <span class="selected-option"></span>
  4. </div>
  5. <nut-actionsheet :is-visible="isVisible"
  6. @close="switchActionSheet"
  7. :menu-items="menuItems"
  8. @choose="chooseItem"
  9. :chooseTagValue="sex"
  10. ></nut-actionsheet>
  1. export default {
  2. data() {
  3. return {
  4. sex: '请选择',
  5. isVisible: false,
  6. menuItems: [
  7. {
  8. 'name': '男',
  9. 'value': 0
  10. },
  11. {
  12. 'name': '女',
  13. 'value': 1
  14. }
  15. ]
  16. };
  17. },
  18. methods: {
  19. switchActionSheet() {
  20. this.isVisible = !this.isVisible;
  21. },
  22. chooseItem(itemParams) {
  23. this.sex = itemParams.name;
  24. }
  25. }
  26. };

设置禁用状态

  1. <div @click="switchActionSheet">
  2. <span class="title"><label>性别</label></span>
  3. <span class="selected-option"></span>
  4. </div>
  5. <nut-actionsheet :is-visible="isVisible"
  6. @close="switchActionSheet"
  7. :menu-items="menuItems"
  8. @choose="chooseItem"
  9. :chooseTagValue="sex"
  10. ></nut-actionsheet>
  1. export default {
  2. data() {
  3. return {
  4. sex: '请选择',
  5. isVisible: false,
  6. menuItems: [
  7. {
  8. 'name': '男',
  9. 'value': 0,
  10. 'disable': false
  11. },
  12. {
  13. 'name': '女',
  14. 'value': 1,
  15. 'disable': true
  16. }
  17. ]
  18. };
  19. },
  20. methods: {
  21. switchActionSheet() {
  22. this.isVisible = !this.isVisible;
  23. },
  24. chooseItem(itemParams) {
  25. this.sex = itemParams.name;
  26. }
  27. }
  28. };

提示

  1. <div @click="switchActionSheet">
  2. <span class="title"><label>我就列表测试数据</label></span>
  3. <span class="sub-title">我是描述~~~~</span>
  4. <div class="selected-option">删除本条</div>
  5. </div>
  6. <nut-actionsheet :is-visible="isVisible"
  7. :menu-items="menuItems4"
  8. chooseTagValue="确定"
  9. cancelTxt="取消"
  10. @close="switchActionSheet"
  11. @choose="choose"
  12. >
  13. <span slot="title"><label>确定删除吗?</label></span>
  14. <span slot="sub-title">删除之后不能,描述信息,删除之后不能,描述信息</span>
  15. </nut-actionsheet>
  1. export default {
  2. data() {
  3. return {
  4. sex: '请选择',
  5. isVisible: false,
  6. menuItems: [
  7. {
  8. 'name': '确定'
  9. }
  10. ]
  11. };
  12. },
  13. methods: {
  14. switchActionSheet() {
  15. this.isVisible = !this.isVisible;
  16. },
  17. choose(itemParams) {
  18. }
  19. }
  20. };

自定义内容

  1. <div @click="switchActionSheet">
  2. <span class="title"><label>内容自定义</label></span>
  3. <div class="selected-option">打开</div>
  4. </div>
  5. <nut-actionsheet :is-visible="isVisible"
  6. @close="switchActionSheet"
  7. >
  8. <div slot="custom" class="custom-wrap"><span>自定义</span></div>
  9. </nut-actionsheet>
  1. export default {
  2. data() {
  3. return {
  4. isVisible: false
  5. }
  6. },
  7. methods: {
  8. switchActionSheet() {
  9. this.isVisible = !this.isVisible;
  10. }
  11. }
  12. };

Prop

字段说明类型默认值
is-animation是否开启动画Booleantrue
is-lock-bg-scroll是否锁定背景滚动Booleanfalse
is-visible是否可见Booleanfalse
is-show-mask是否显示背景遮罩Booleantrue
is-click-choose-close是否点击列表项后立即关闭Booleantrue
is-click-close-mask是否点击mask蒙层关闭Booleantrue
cancel-txt取消文案String‘取消’
choose-tag-value已选值,如果填写,高亮显示String-
menu-items列表项Array[ ]
option-tag设置列表项展示使用参数String‘name’

Slot

名称说明
custom自定义内容
title自定义标题
subTitle自定义副标题

Event

字段说明回调参数
choose选择之后触发选中列表项
close关闭时触发
cancel点击取消文案时触发

ActionSheet 动作面板 - 图1