点我扫二维码，查看demo

# ActionSheet 动作面板

# 介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

# 引入

通过一下方式来全局注册组件。更多注册方式敬请期待。

import Vue from 'vue';
import { ActionSheet } from '@dolphin-iot/ui'

Vue.use(ActionSheet);

1
2
3
4

# 代码演示

# 基础用法

动作面板通过 actions 属性来定义选项，actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="card">
        <mx-cell
          title="动作面板+无标题"
          type="link"
          @click="demo1 = !demo1"
          card
        />
      </div>
      <div>
        <mx-action-sheet
          v-model="demo1"
          cancel-text="取消"
          :actions="actions"
          @select="onSelect"
          background="#ffffff"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      demo1: false,
      actions: [{ name: '确定' }, { name: '更多' }],
    }
  },
  methods: {
    onSelect(item) {
      console.log(item)
    },
  },
}
</script>
<style lang="scss" scoped>
.demo-list {
  .demo-panel {
    position: relative;
    padding: 20px 0px;

    .mask-panel {
      background-color: white;
      padding-bottom: 30px;

      font-size: 13px;
      color: #666;
      line-height: 24px;

      .text {
        padding: 20px;

        &.center {
          text-align: center;
        }
      }
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# 动作面板标题

通过 title 参数控制动作面板的标题。

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="card">
        <mx-cell
          title="动作面板+有标题"
          type="link"
          @click="demo2 = !demo2"
          card
        />
      </div>
      <div>
        <mx-action-sheet
          v-model="demo2"
          title="场景详细设计"
          cancel-text="取消"
          :actions="actions"
          @select="onSelect"
          background="#ffffff"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      demo2: false,
      actions: [{ name: '确定' }, { name: '更多' }],
    }
  },
  methods: {
    onSelect(item) {
      console.log(item)
    },
  },
}
</script>
<style lang="scss" scoped>
.demo-list {
  .demo-panel {
    position: relative;
    padding: 20px 0px;

    .mask-panel {
      background-color: white;
      padding-bottom: 30px;

      font-size: 13px;
      color: #666;
      line-height: 24px;

      .text {
        padding: 20px;

        &.center {
          text-align: center;
        }

        h4 {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# Api

# Props

参数	说明	类型	默认值	是否必须
show	是否显示弹出层	boolean	`false`	`-`
overlay	是否显示遮罩层	boolean	`true`	`-`
z-index	弹出层在z轴的序号	number	`1030`	`-`
lock-scroll	是否锁定背景滚动	boolean	`true`	`-`
duration	弹出层以及遮罩层动画时长（秒为单位）	number	`0.36`	`-`
overlay-style	遮罩层自定义样式	object	`-`	`-`
round	弹出层是否为圆角	boolean	`true`	`-`
close-on-click-overlay	是否在点击遮罩层后关闭	boolean	`true`	`-`
safe-area-inset-bottom	是否开启底部安全区适配	boolean	`true`	`-`
actions	面板选项列表	action[]	`[]`	`-`
title	标题	string	`-`	`-`
<!--	description	描述	string	`-`
cancel-text	取消按钮显示的文本	string	`-`	`-`
close-on-click-action	是否在点击选项后关闭	boolean	`true`	`-`

# Action 数据结构

actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：

键名	说明	类型
name	标题	string

# Events

事件名称	说明	回调参数
close	关闭时触发	e: boolean
select	点击选项时触发	e: Action

← sticky 粘性布局 Dialog 对话框 →