Action Sheet 弹出式菜单

提供 wx-action-sheet 和 wx-action-sheet-item 两个组件。

基本用法

<wx-button @click="visi = true" type="light">弹出菜单</wx-button>
<wx-action-sheet :visible.sync="visi" title="这是一个标题，可以为一行或者两行。">
  <wx-action-sheet-item>示例菜单</wx-action-sheet-item>
  <wx-action-sheet-item>示例菜单</wx-action-sheet-item>
  <wx-action-sheet-item negative>负向菜单</wx-action-sheet-item>
</wx-action-sheet>

<script>
export default {
  data() {
    return {
      visi: false,
    };
  }
};
</script>

提示

visible 属性绑定需要使用 .sync修饰符

链接

<wx-button @click="visi = true" type="light">事件示例</wx-button>
<wx-action-sheet :visible.sync="visi" title="事件示例">
  <wx-action-sheet-item :to="{path: '/'}">路由跳转</wx-action-sheet-item>
  <wx-action-sheet-item @click="handleClick">点击事件</wx-action-sheet-item>
</wx-action-sheet>

<script>
export default {
  data() {
    return {
      visi: false
    };
  },
  methods: {
    handleClick() {
      this.$toast("got!");
    }
  }
};
</script>

Action-sheet Attributes

参数	说明	类型	可选值	默认值
visible	是否可见，需结合 .sync 修饰符	Boolean	-	false
title	菜单标题， 空值即不显示	String	-	-

Action-sheet-item Attributes

参数	说明	类型	可选值	默认值
negative	负向菜单项	Boolean	-	false
to	路由信息，配合 vue-router 使用	String/Object	-	-

Action-sheet-item Events

事件名称	说明	回调参数
click	点击时触发，如设置了属性 to ，则优先路由跳转	event: Event

弹出式菜单