action-sheet/index.js

  1. /**
  2.  * @component ActionSheet
  3.  * @description
  4.  *
  5.  * ## 弹出层 / ActionSheet确认单组件
  6.  *
  7.  * ### 简介
  8.  *
  9.  * ActionSheet是一个从底部弹出的按钮表单，一般都是由很多Button组成。当用户点击确认完毕后关闭. 可以把它当做**确认单组件**, 或者**单选组件**, 但是按钮建议不超过6个, 如果超过了组件也能正确处理,
  10.  *   比如滚动选择.
  11.  *
  12.  * ### 关于buttons属性
  13.  * - role属性: 可以是cancel(关闭)/destructive(警告/删除)/null, destructive在IOS下有用, 样式为红色字体
  14.  * - icon属性: 具体参考Icon组件的写法
  15.  *
  16.  * ### 注意点
  17.  *
  18.  * - 组件挂载点在App组件中定义, 是在业务页面之上, 且开启loading/toast都不会遮盖他.
  19.  * - 弹出层默认都是根据路由相应的, 当路由切换则弹层自动关闭, 这部分可用`dismissOnPageChange`修改.
  20.  * - 可以点击背景关闭组件, 这个在`enableBackdropDismiss`中定义.
  21.  * - 建议在关闭动画Promise之后处理请他业务, 这样动画会顺滑一些, 这里监听动画的关闭不是使用setTimeout, 而是监听transitionEnd事件, 因此更可靠.
  22.  *
  23.  * @demo #/action-sheet
  24.  * @example
  25.  *
  26.  * import { ActionSheet } from 'vimon'
  27.  *
  28.  * ActionSheet.present({
  29.  *  title: '请选择操作',
  30.  *  subTitle: '注意，选择后不能撤销！',
  31.  *  cssClass: 'ActionSheetCssClass1 ActionSheetCssClass2',
  32.  *  enableBackdropDismiss: true,
  33.  *  buttons: [
  34.  *    {
  35.  *      text: '删除',
  36.  *      role: 'destructive',
  37.  *      icon: 'trash',
  38.  *      cssClass: '  DestructiveBtnCssClass1 DestructiveBtnCssClass2 ',
  39.  *      handler: () => {
  40.  *        console.log('Destructive clicked');
  41.  *      }
  42.  *    },
  43.  *    {
  44.  *      text: '分享',
  45.  *      icon: 'share',
  46.  *      handler: () => {
  47.  *        console.log('Archive1 clicked');
  48.  *      }
  49.  *    },
  50.  *    {
  51.  *      text: '播放',
  52.  *      icon: 'play',
  53.  *      handler: () => {
  54.  *        console.log('Archive4 clicked');
  55.  *      }
  56.  *    },
  57.  *    {
  58.  *      text: '取消',
  59.  *      role: 'cancel',
  60.  *      icon: 'close',
  61.  *      handler: () => {
  62.  *        ActionSheet.dismiss().then((data) => {
  63.  *          console.debug('promise的退出方式')
  64.  *        });
  65.  *      }
  66.  *    }
  67.  *  ]
  68.  * })
  69.  *
  70.  */
  72. /**
  73.  * @function present
  74.  * @description 开启ActionSheet组件, 当开启动画过度完毕时触发 `Promise` 的 `resolve` 。
  75.  * @param {object} options - 传入参数
  76.  * @param {String} [options.title]                        - ActionSheet的标题
  77.  * @param {string} [options.subTitle]                     - ActionSheet的副标题
  78.  * @param {string} [options.cssClass]                     - 自定义样式
  79.  * @param {Boolean} [options.enableBackdropDismiss=true]  - 允许点击backdrop关闭actionsheet
  80.  * @param {Boolean} [options.dismissOnPageChange=true]    - 路由切换关闭组件
  81.  * @param {string} [options.mode=ios]                     - 样式模式
  82.  * @param {string} [options.isH5=false]                   - 强制使用H5组件
  83.  * @param {Array} [options.buttons]                       - button数组，包含全部role
  84.  * @param {Array} options.buttons.text                    - button显示文本
  85.  * @param {Array} options.buttons.icon                    - button显示的icon的name, 具体参考Icon组件
  86.  * @param {Array} options.buttons.role                    - 可以是cancel(关闭)/destructive(警告/删除)/null
  87.  * @param {Array} options.buttons.handler                 - 默认是关闭组件
  88.  * @param {Array} options.buttons.cssClass                - 自定义样式
  89.  * @return {Promise}
  90.  */
  92. /**
  93.  * @function dismiss
  94.  * @description 关闭ActionSheet组件, 当关闭动画过度完毕时触发 `Promise` 的 `resolve` 。
  95.  * @return {Promise}
  96.  */
  98. import ActionSheetComponent from './action-sheet.vue'
  99. import GeneratePopUpInstance from '../../util/generatePopUpInstance.js'
  101. class ActionSheetInstance extends GeneratePopUpInstance {
  102.   isPresentHandled (options) {
  103.     return !options.isH5 &&
  104.       window.VM &&
  105.       window.VM.platform &&
  106.       window.VM.platform.actionSheet &&
  107.       window.VM.platform.actionSheet(options)
  108.   }
  109. }
  111. export default new ActionSheetInstance(ActionSheetComponent, 'sheet-portal')