c-actionsheet


操作列表

属性

属性名类型必填默认值说明
titleString标题操作列表标题
listArray[]操作列表数据,如['action1', 'action2']
activeNumber当前选中元素索引,从0开始
showBooleanfalse操作列表是否显示
cancel-txtString取消取消按钮文本
header-styleString标题自定义样式
cancel-styleString取消按钮自定义样式
content-styleString普通操作样式
active-styleString当前选中操作样式
c-bind:selectEventHandle点击操作时触发,event.detail = { index, value }
c-bind:cancelEventHandle点击取消或蒙层时触发

示例

  1. <template>
  2. <c-actionsheet
  3. show="{{true}}"
  4. title="{{title}}"
  5. list="{{list}}"
  6. active="{{0}}"
  7. cancel-txt="取消"></c-actionsheet>
  8. </template>
  9. <script>
  10. class C_actionsheet {
  11. data = {
  12. list: ["高铁", "火车", "飞机", "打车", "地铁"],
  13. title: "出行方式"
  14. }
  15. }
  16. export default new C_actionsheet();
  17. </script>
  18. <script cml-type="json">
  19. {
  20. "base": {
  21. "usingComponents": {
  22. "c-actionsheet": "cml-ui/components/c-actionsheet/c-actionsheet"
  23. }
  24. }
  25. }
  26. </script>

c-actionsheet  - 图1wx

c-actionsheet  - 图2web

c-actionsheet  - 图3native

查看完整示例