Mind UI Vue

# ActionSheet 动作面板

# 介绍

从屏幕下方移入的操作表。

# 引入

import { ActionSheet } from 'mind-ui-vue';
Vue.use(ActionSheet);

# 示例

# 基础用法

动作面板通过 actions 属性来定义选项，actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档 Api。

<m-button @click="visible = true">按钮</m-button>

<m-action-sheet
  :visible="visible"
  :actions="actions"
  @click="handleClickItem"
/>

export default {
  data() {
    return {
      visible: false,
      actions: [
        {
          name: "选项一",
        },
        {
          name: "选项二",
        },
        {
          name: "选项三",
        }
      ]
    }
  },
  methods: {
    handleClickItem(index) {
      console.log(`点击了选项 ${index + 1}`);
    }
  }
}

# 显示取消按钮

设置 show-cancel 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 cancel 事件。

<m-action-sheet
  show-cancel
  :visible="visible"
  :actions="actions"
  @cancel="handleCancel"
  @click="handleClickItem"
/>

# 选项状态

可以通过 loading 和 disabled 将选项设置为加载或禁用状态，通过 color 设置选项的颜色，icon 设置选项的图标。

<m-action-sheet
  :visible="visible"
  :actions="actions"
  @click="handleClickItem"
/>

export default {
  data() {
    return {
      visible: false,
      actions: [
        {
          name: "加载选项",
          loading: true
        },
        {
          name: "自定义颜色"
          color: "#EE5C42"
        },
        {
          name: "禁用选项"
          disabled: true,
        }
      ]
    }
  }
}

# 自定义面板头部

通过插槽可以自定义面板的头部信息。

<m-action-sheet
  :visible="visible"
  :actions="actions"
  @click="handleClickItem"
>
  <!-- 自定义头部信息 -->
  <div slot="header" class="custom-header">
    <div class="custom-title">确定吗？</div>
    <span>删除后无法恢复哦</span>
  </div>
</m-action-sheet>

.custom-header {
  padding: 24px;
}
.custom-header .custom-title {
  color: #444;
  font-size: 32px;
}

export default {
  data() {
    return {
      visible: false,
      actions: [
        {
          name: "删除",
          color: "#ed3f14",
        }
      ]
    }
  },
  methods: {
    handleClickItem(index) {
      this.actions[index].loading = true;

      setTimeout(() => {
        this.actions[index].loading = false;
        this.visible = false;
      }, 2000);
    }
  }
}

# Api

# Props

参数 说明 类型 可选值 默认值
visible 是否显示 Boolean — false
mask-closable 是否允许点击遮罩层关闭 Boolean — true
actions 菜单选项 Array — —
show-cancle 是否显示取消按钮 Boolean — true
cancle-text 取消按钮内容 String — 取消

# Actions

参数 说明 类型 可选值 默认值
name 选项内容 String — —
color 选项颜色 String — —
loading 加载状态 Boolean — false
disabled 是否禁用 Boolean — false

# Slots

名称 说明
header 自定义标题栏

# Events

方法名称 说明 返回值
click 选项点击回调 actions 索引值 index
cancle 取消点击回调 —

← HeaderBar 导航栏 →