ActionSheet

Introduce

ActionSheet组件内部使用了 widget 组件. 拥有widget的所有属性和方法.

props

widget 所有属性.

名称	类型	描述
visible	boolean	表示是否显示; 允许使用 `visible.sync` 进行双向绑定
mask	boolean	是否显示遮罩层. (默认为 true)
maskClose	boolean	是否点击遮罩层后关闭. (默认为 false)
preventEvent	boolean	是否阻止时间传递到遮罩层及以下. (默认为 true)
pageClass	String或Array	除遮罩层外的内容层的样式类.
pageStyle	String或Array或Object	除遮罩层外的内容层的样式

actionsheet 相关属性.

名称	类型	是否必须	描述
forcePhoneStyle	boolean或’true’或’false’		是否强制显示phone样式

methods

widget的所有方法.

名称	描述
show():Promise	显示
hide():Promise	隐藏

example

See the Pen bp-actionsheet by brainpoint (@brainpoint) on CodePen.

示例代码.

bp-actionsheet__group, bp-actionsheet__cell, bp-actionsheet__cellWarn 是内部提供的默认样式;

slot=default可以使用任意的内容.

<bp-actionsheet :visible.sync="visible">
  <div class="bp-actionsheet__group">
    <div class="bp-actionsheet__cell">ddd</div>
    <div class="bp-actionsheet__cell">ddd</div>
    <div class="bp-actionsheet__cell">ddd</div>
  </div>
  <div class="bp-actionsheet__group">
    <div class="bp-actionsheet__cellWarn">ddd</div>
  </div>
</bp-actionsheet>

mixins或extends

可以使用mixins或extends继承bpActionsheet组件, 示例代码如下:

<template>
  <div class="bp-widget bp-actionsheet" @click="maskClose?hide().then(res=>{}):()=>{}">
    <div class="bp-widget__content" :class="pageClass" :style="pageStyle" @click.stop>
      <div class="bp-actionsheet__main">
        <slot name="default" />
      </div>
    </div>
  </div>
</template>

<script>
  import bpActionsheet from '@bpui/actionsheet';

  export default {
    mixins: [bpActionsheet.bpActionsheet],
    props: {
      maskClose: {
        default: true,
        type: Boolean,
      },
    },
  };
</script>

自定义主题

actionsheet样式结构如下:

.bp-actionsheet {
  /* 显示状态 */
  &.bp-widget__visible {}
  /* 隐藏状态 */
  &.bp-widget__invisible {}

  /* 除遮罩层外的对话框内容 */
  .bp-widget__content {
    /* wrap层 */
    .bp-widget__contentWrap {
      /* 主区域 */
      .bp-actionsheet__main {
      }
    }
  }
}

scss样式文件存放在@bpui/actionsheet/style 目录下, 可以复制修改以定制主题

APIbeta