ActionSheet 上拉菜单

基础用法

使用item-list、cancel、cancel-color、v-model、has-icon和header属性来定义 ActionSheet 的样式。

  1. <xm-actionsheet :item-list="itemList" cancel="取消" cancel-color="#19be6b" v-model="actionSheetVisible1" header="这里是个标题" has-icon></xm-actionsheet>
  2. <xm-actionsheet :item-list="itemList" v-model="actionSheetVisible2"></xm-actionsheet>
  1. export default {
  2.   data () {
  3.     return {
  4.       itemList: [
  5.         { text: '顺风车',
  6.           icon: '<span class="xm__icon--loading"></span>',
  7.           callBack: () => {
  8.             this.$modal.alert({
  9.               title: '提示',
  10.               content: '我是actionsheet弹出来的',
  11.               color: '#19be6b'
  12.             })
  13.           }
  14.         },
  15.         { text: '巴士', icon: '<img src="https://github.com/monw3c/xmui/blob/master/static/logo.jpg?raw=true"/>', callBack: () => {} },
  16.         { text: '快车',
  17.           icon: '<p>“别打算XSS攻击”</p>',
  18.           callBack: () => {
  19.             this.$modal.alert({
  20.               title: '提示',
  21.               content: '想了解vue XSS攻击点确定',
  22.               color: '#19be6b',
  23.               callBack: () => {
  24.                 location.href = 'https://segmentfault.com/q/1010000009844447'
  25.               }
  26.             })
  27.           }
  28.         },
  29.         { text: '专车', callBack: () => {} }
  30.       ],
  31.       actionSheetVisible1: false,
  32.       actionSheetVisible2: false
  33.     }
  34.   }
  35. }

属性

参数 说明 类型 可选值 默认值
item-list 传入数组数据 Array — —
v-model 绑定状态 string — —
cancel 取消按钮文字 string — —
cancel-color 取消文字颜色 string — —
header 标题文字 string — —
has-icon 是否带图标或图片 Boolean — false

原文: https://monw3c.github.io/xmui/#/components/actionsheet