QinUi

# ActionSheet 操作菜单

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于 QinJs 的 qin.showActionSheet API ，配置更加灵活，所有平台都表现一致。

# 基础用法

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      :options="list"
    />
    <button @click="onOpen">打开 ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            label: '选项1',
          },
          {
            label: '选项2',
          },
          {
            label: '选项3',
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# 设置状态

每条数据中设置 disabled 控制。

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      :options="list"
    />
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            label: '选项1',
          },
          {
            loading: true,
          },
          {
            label: '选项被禁用',
            disabled: true,
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# 显示取消按钮

设置 cancelText 即可

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      :options="list"
      cancelText="取消"
    />
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            label: '选项1',
          },
          {
            label: '选项2',
          },
          {
            label: '选项3',
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# 描述内容

设置 desc 即可

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      :options="list"
      desc="这是一段描述文本,字号偏小,颜色偏淡"
    >
    </qinui-action-sheet>
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            label: '选项1',
          },
          {
            label: '选项2',
          },
          {
            label: '选项3',
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# 显示标题及自定义内容

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      title="标题位置"
    >
      <text
        style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px"
        >这是一段通过slot传入的内容,您可以在此自定义操作面板</text
      >
    </qinui-action-sheet>
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# 小程序开放能力

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      title="微信开放能力"
      :options="list"
      @getuserinfo="onGetUserInfo"
    />
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            label: '获取用户信息',
            openType: 'getUserInfo',
            color: '#5ac725',
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
      onGetUserInfo(res) {
        qin.showToast({
          title: `用户名：${res.userInfo.nickName}`,
          icon: 'none',
        });
      },
    }
  }
</script>

# 每条数据的描述文本

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      :options="list"
    >
    </qinui-action-sheet>
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            label: '选项1',
          },
          {
            label: '选项2',
          },
          {
            label: '选项3',
            desc: '描述文本',
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# 定制字段

<template>
  <view>
    <qinui-action-sheet
      ref="actionSheet"
      :options="actionsb"
      :fieldNames="{
        label: 'name',
      }"
    >
    </qinui-action-sheet>
    <button @click="onOpen">打开ActionSheet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            name: '大秦1',
          },
          {
            name: '大秦2',
          },
          {
            name: '大秦3',
          },
        ]
      }
    },
    methods: {
      onOpen() {
        this.$refs.actionSheet.open();
      },
    }
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
title 设置标题 String - -
desc 选项上方的描述信息 String - -
options 按钮的文字数组，见上方文档示例 Array<Object> [ ] -
fieldNames 字段定制，参考 Object {
label: 'label',
desc: 'desc',
diabled: 'diabled',
loading: 'loading'
}		 -
cancelText 取消按钮的文字，不为空时显示按钮 String - -
safeAreaInsetBottom 是否开启底部安全区适配 Boolean true true | false
closeOnClickOverlay 点击遮罩是否允许关闭组件 Boolean - -
closeOnClickAction 点击某个菜单项时是否关闭组件 String true true | false
lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 String en en | zh_CN | zh_TW |
sessionFrom 会话来源，open-type="contact"时有效。只微信小程序有效 String - -
sendMessageTitle 会话内消息卡片标题，openType="contact"时有效 String - -
sendMessagePath 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 String - -
sendMessageImg 会话内消息卡片图片，openType="contact"时有效 String - -
showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 Boolean false true | false
appParameter 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 String - -

# FieldNames Props

参数 说明 类型 默认值 可选值
value 提交给接口的 String value -
label 中文 String label -
desc 描述 String desc -
diabled 禁用 String diabled -
loading 加载 String loading -

# Option Props

参数 说明 类型 默认值 可选值
openType 小程序的打开方式 String '' -
disabled 该菜单是否禁用 Boolean false true | false
loading 该菜单是否处于加载状态 Boolean false true | false
name 该菜单的标题 String '' -
desc 该菜单的描述 String '' -
fontSize 该菜单name文字的大小，单位px(rpx) String 16px -
color 该菜单name文字的颜色 String #303133 -

# Methods

方法名 说明
open 弹出操作菜单组件
close 关闭操作菜单组件

# Events

事件名 说明 回调参数
@select 点击ActionSheet列表项时触发 (当前数据(theItem)，当前数据中提交给接口的值(theItem[fieldName.value]
@close 点击取消按钮时触发。点击遮罩触发该事件需要设置:closeOnClickOverlay="true" -
@getuserinfo 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效 detail
@contact 客服消息回调，openType="contact"时有效 -
@getphonenumber 获取用户手机号回调，openType="getPhoneNumber"时有效 -
@error 当使用开放能力时，发生错误的回调，openType="error"时有效 -
@launchapp 打开 APP 成功的回调，openType="launchApp"时有效 -
@opensetting 在打开授权设置页后回调，openType="openSetting"时有效 -

← Affix 图钉 →