外观
Feedback 全局反馈
约 1373 字大约 5 分钟
2025-10-31
提供 Toast 消息提示、Modal 弹窗、Loading 加载、ActionSheet 无需引入组件,即可全局调用
注意
该功能仅支持 Vue3,Vue2 暂不支持
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | X | √ | √ |
第 1 步,安装
npm install -D @uni-ku/root第 2 步,配置 vite
1. 引入 @uni-ku/root
import Uni from "@dcloudio/vite-plugin-uni";
import UniKuRoot from "@uni-ku/root";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
// 若存在改变 pages.json 的插件,请将 UniKuRoot 放置其后
UniKuRoot(),
Uni(),
],
});注意
CLI:直接编写 根目录下的 vite.config.(js|ts)
HBuilderX:在根目录下 创建 vite.config.(js|ts) 并写入
第 3 步, 创建 App.ku.vue 并写入下面的内容
<template>
<ku-root-view />
<u-toast />
<u-modal />
<u-action-sheet />
</template>注意
CLI:需要在 src目录 下创建下 App.ku.vue (或自定义名称)
HBuilderX:直接在 根目录 下创建 App.ku.vue (或自定义名称)
全局 Toast
基本使用
通过 uni.$u.showToast() 方法显示全局 Toast 提示:
// 默认样式
uni.$u.showToast({
title: "全局提示",
});
// 成功样式
uni.$u.showToast({
title: "操作成功",
type: "success",
});
// 错误样式
uni.$u.showToast({
title: "操作失败",
type: "error",
});
// 警告样式
uni.$u.showToast({
title: "警告信息",
type: "warning",
});
// 主要样式
uni.$u.showToast({
title: "主要信息",
type: "primary",
});高级配置
uni.$u.showToast({
title: "自定义提示",
type: "success",
duration: 3000, // 显示时长,单位ms
position: "top", // 位置:top、center、bottom
mask: true, // 是否显示遮罩
success: () => {
// 完成回调
console.log("Toast显示完成");
},
});隐藏 Toast
uni.$u.hideToast();全局 Loading
// 基本用法
uni.$u.showLoading({
title: "加载中...",
});
// 隐藏Loading
uni.$u.hideLoading();全局 Modal
基本使用
// 基本弹窗
uni.$u.showModal({
title: "全局弹窗",
content: "全局弹窗内容",
success: (res) => {
console.log(res);
},
});
// 带取消按钮的弹窗
uni.$u.showModal({
title: "确认操作",
content: "确定要执行此操作吗?",
showCancelButton: true,
buttonModel: "button",
success: (res) => {
if (res.confirm) {
console.log("用户点击确定");
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});全局 ActionSheet
基本使用
通过 uni.$u.showActionSheet() 方法显示全局 ActionSheet 操作菜单:
// 基本用法
uni.$u.showActionSheet({
title: "请选择颜色",
actions: [
{
name: "红色",
value: "#ff0000",
},
{
name: "绿色",
value: "#00ff00",
},
{
name: "蓝色",
value: "#0000ff",
},
],
success: (res) => {
console.log("选择了:", res);
},
cancel: () => {
console.log("取消选择");
},
});完整示例
<template>
<view class="u-page">
<card title="全局反馈">
<view class="item">
<un-button type="primary" @click="showToast">默认样式</un-button>
<un-button type="primary" @click="showToastSuccess">成功样式</un-button>
<un-button type="primary" @click="showToastError">错误样式</un-button>
</view>
</card>
<card title="全局Loading">
<view class="item">
<un-button type="primary" @click="showLoading">显示loading</un-button>
<un-button type="primary" @click="hideLoading">关闭loading</un-button>
</view>
</card>
<card title="全局Modal">
<view class="item">
<un-button type="primary" @click="showModal">打开弹窗</un-button>
<un-button type="primary" @click="showModal2">按钮样式</un-button>
</view>
</card>
<card title="全局ActionSheet">
<view class="item">
<un-button type="primary" @click="showActionSheet"
>打开ActionSheet</un-button
>
</view>
</card>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
showToast() {
uni.$u.showToast({
title: "全局提示",
});
},
showToastSuccess() {
uni.$u.showToast({
title: "全局提示",
type: "success",
});
},
showToastError() {
uni.$u.showToast({
title: "全局提示",
type: "error",
});
},
showModal() {
uni.$u.showModal({
title: "全局弹窗",
content: "全局弹窗内容",
success: (res) => {
console.log(res);
},
});
},
showModal2() {
uni.$u.showModal({
title: "全局弹窗",
content: "全局弹窗内容",
showCancelButton: true,
buttonModel: "button",
success: (res) => {
console.log(res);
},
});
},
showLoading() {
uni.$u.showLoading({
mask: false,
});
},
hideLoading() {
uni.$u.hideLoading();
},
showActionSheet() {
uni.$u.showActionSheet({
title: "请选择颜色",
cancelText: "取消",
actions: [
{
name: "红色",
value: "#ff0000",
},
{
name: "绿色",
value: "#00ff00",
},
{
name: "蓝色",
value: "#0000ff",
},
],
success: (res) => {
console.log(res);
},
cancel: () => {
console.log("取消");
},
});
},
},
};
</script>
<style lang="scss" scoped>
.item {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
}
</style>页面源码地址
API
showToast 参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 显示的文字内容 | String | - |
| type | 主题类型 | Enum | default |
| duration | 显示时长,单位 ms | Number | 2000 |
| position | 位置 | Enum | center |
| mask | 是否显示遮罩(不可用) | Boolean | false |
| success | 完成回调函数 | Function | - |
| 更多属性参考 toast 组件 | - |
showLoading 参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 显示的文字内容 | String | 加载中... |
| mask | 是否显示遮罩 | Boolean | false |
| duration | 显示时长,0 表示不自动隐藏 | Number | 0 |
| 更多属性参考 toast 组件 | - |
showModal 参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 弹窗标题 | String | - |
| content | 弹窗内容 | String | - |
| showCancelButton | 是否显示取消按钮 | Boolean | false |
| confirmText | 确认按钮文字 | String | 确定 |
| cancelText | 取消按钮文字 | String | 取消 |
| confirmColor | 确认按钮颜色 | String | #007aff |
| cancelColor | 取消按钮颜色 | String | #999999 |
| buttonModel | 按钮样式 | Enum | - |
| success | 用户选择回调函数 | Function | - |
| 更多属性参考 modal 组件 | - |
showActionSheet 参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 操作菜单标题 | String | - |
| description | 选项上方的描述信息 | String | - |
| actions | 按钮的文字数组 | Array<Object> | [] |
| cancelText | 取消按钮的文字 | String | - |
| closeOnClickAction | 点击菜单项时是否关闭弹窗 | Boolean | true |
| closeOnClickOverlay | 点击遮罩是否允许关闭 | Boolean | true |
| safeAreaInsetBottom | 是否开启底部安全区适配 | Boolean | true |
| round | 圆角值 | String | Number | 0 |
| height | 设置高度 | String | Number | - |
| success | 成功回调函数 | Function | - |
| cancel | 取消回调函数 | Function | - |
| 更多属性参考 actionSheet 组件 | - |
回调参数
showModal success 回调参数
| 参数 | 说明 | 类型 |
|---|---|---|
| confirm | 用户是否点击确定 | Boolean |
| cancel | 用户是否点击取消 | Boolean |
showActionSheet success 回调参数
| 参数 | 说明 | 类型 |
|---|---|---|
| name | 选中项的名称 | String |
| value | 选中项的值 | Any |
| index | 选中项的索引 | Number |
showActionSheet cancel 回调参数
| 参数 | 说明 | 类型 |
|---|---|---|
| - | 无参数 | - |
