更新记录
1.0.4(2024-08-08)
下载此版本
破坏性更新,组件内部不依赖r-popup组件,想要单独在外层使用,并且不提供r-popup相关属性和事件
1.0.3(2024-08-06)
下载此版本
更新文档
1.0.2(2024-07-30)
下载此版本
适配r-config-provider
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
r-action-sheet
r-action-sheet
动作面板,底部弹起的模态面板,包含与当前情境相关的多个选项。请在r-popup组件内部使用。完整文档请前往
示例
<template>
<r-config-provider :themeName="themeName">
<page-header title="动作面板"></page-header>
<view style="padding: 10px 0">
<r-divider content-position="left">基本使用</r-divider>
<r-cell-group inset>
<r-cell
is-link
title="基础用法"
@click="
open({
actions: [
{ name: '选项一' },
{ name: '选项二' },
{ name: '选项三' },
],
})
"
/>
<r-cell
is-link
title="展示图标"
@click="
open({
actions: [
{ name: '选项一', icon: 'cart-o', prefix: 'van-icon' },
{ name: '选项二', icon: 'shop-o' },
{ name: '选项三', icon: 'star-o' },
],
})
"
/>
<r-cell
is-link
title="展示取消按钮"
@click="
open({
actions: [
{ name: '选项一', icon: 'cart-o', prefix: 'van-icon' },
{ name: '选项二', icon: 'shop-o' },
{ name: '选项三', icon: 'star-o' },
],
cancelText: '取消',
closeOnClickAction: true,
})
"
/>
<r-cell
is-link
title="展示描述信息"
@click="
open({
actions: [
{ name: '选项一' },
{ name: '选项二' },
{ name: '选项三', subname: '描述信息' },
],
cancelText: '取消',
closeOnClickAction: true,
description: '这是一段描述信息',
})
"
/>
</r-cell-group>
<r-divider content-position="left">选项状态</r-divider>
<r-cell-group inset>
<r-cell
is-link
title="选项状态"
@click="
open({
actions: [
{ name: '着色选项', color: '#ee0a24' },
{ name: '禁用选项', disabled: true },
{ name: '加载选项', loading: true },
],
cancelText: '取消',
closeOnClickAction: true,
})
"
/>
</r-cell-group>
<r-divider content-position="left">自定义面板</r-divider>
<r-cell-group inset>
<r-cell
is-link
title="自定义面板"
@click="
open({
custom: 'true',
})
"
/>
</r-cell-group>
</view>
<r-popup v-model:show="show" position="bottom" safeAreaInsetBottom>
<r-action-sheet v-if="custom" title="标题" @cancel="onCancel">
<div style="padding: 16px 16px 160px">内容</div>
</r-action-sheet>
<r-action-sheet
v-else
:actions="actions"
@select=""
:cancelText="cancelText"
:closeOnClickAction="closeOnClickAction"
@cancel="onCancel"
:description="description"
/>
</r-popup>
</r-config-provider>
</template>
<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const show = ref(false);
const actions = ref([
{ name: "选项一" },
{ name: "选项二" },
{ name: "选项三" },
]);
const = (item) => {
console.log("item,", item);
show.value = false;
};
const custom = ref(false);
const cancelText = ref("");
const closeOnClickAction = ref(false);
const description = ref("");
const onCancel = () => {
console.log("onCancel");
show.value = false;
};
const open = (e) => {
show.value = true;
actions.value = e.actions;
cancelText.value = e.cancelText || "";
closeOnClickAction.value = e.closeOnClickAction || false;
description.value = e.description || "";
custom.value = e.custom || false;
};
</script>
API
Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
actions |
面板选项列表(参数见下表) |
Array |
[] |
- |
title |
顶部标题 |
String |
- |
- |
cancelText |
取消按钮文字 |
String |
- |
- |
description |
选项上方的描述信息 |
String |
- |
- |
closeable |
是否显示关闭图标 |
Boolean |
true |
false |
iconPrefix |
前缀类名,相当于r-icon的 prefix 属性 |
String |
van-icon |
iconfont |
closeIcon |
关闭图标名称 |
String |
cross |
- |
themeName |
r-theme主题名称 |
String |
default |
|
Action 数据结构
键名 |
说明 |
类型 |
name |
标题 |
String |
subname |
二级标题 |
String |
color |
选项文字颜色 |
String |
icon |
选项图标名称 |
String |
prefix |
前缀类名,相当于r-icon的 prefix 属性 不传使用 props.iconPrefix |
String |
className |
为对应列添加额外的 class |
String |
loading |
是否为加载状态 |
Boolean |
disabled |
是否为禁用状态 |
Boolean |
Events
名称 |
说明 |
回调参数 |
select |
点击选项时触发,禁用或加载状态下不会触发 |
action,index |
cancel |
点击取消按钮时触发 |
- |
update:show |
显示状态改变时触发 |
show |
Slots
名称 |
说明 |
参数 |
default |
自定义面板的展示内容 |
- |
description |
自定义描述文案 |
- |
cancel |
自定义取消按钮内容 |
- |
action |
自定义选项内容 |
{action,index} |