ActionSheet 上拉菜单


基础用法

使用item-listcancelcancel-colorv-modelhas-iconheader属性来定义 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