动作面板 Actionsheet

动作面板 ActionSheet

基本用法

<template lang="html">
    <main>
      <div class="demo-hidden">
        <za-panel>
          <za-panel-header title="基本">
          </za-panel-header>
          <za-panel-body>
            <za-cell>
              <za-button size="xs" slot='description' @click='visible1 = true'>开启</za-button>
              普通
            </za-cell>
            <za-cell>
              <za-button size="xs" slot='description' @click='visible2 = true'>开启</za-button>
              带取消操作
            </za-cell>
          </za-panel-body>
        </za-panel>
      </div>
      <za-actionsheet :visible.sync='visible1' :actions='actions2' :show-cancel='false'></za-actionsheet>
      <za-actionsheet :visible.sync='visible2' :actions='actions1' @cancel='cancelCb'></za-actionsheet>
    </main>
</template>
<script>
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      actions1: [{
        text: '操作一',
        onClick: () => console.log('action 1'),
      },{
        text: '操作二',
        onClick: () => console.log('action 2'),
      },{
        theme: 'error',
        text: '操作三',
        onClick: () => console.log('action 3'),
      }],
      actions2: [{
        text: '操作一',
        onClick: () => console.log('action 1'),
      },{
        text: '操作二',
        onClick: () => console.log('action 2'),
      }],
    }
  },
  methods: {
    cancelCb(reason, event){
      console.log(reason, event)
    }
  },
};
</script>

API

ActionSheet Attributes

ActionSheet Events