uView Next

# Feedback 全局反馈 3.6.25

提供 Toast 消息提示、Modal 弹窗、Loading 加载、ActionSheet 无需引入组件，即可全局调用

注意

该功能仅支持 Vue3，Vue2 暂不支持

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ X √ √

# 第 1 步，安装

npm install -D @uni-ku/root

✅ Copy success!

# 第 2 步，配置 vite

# 1. 引入 @uni-ku/root

vite.config.js

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(),
  ],
});

✅ Copy success!

注意

CLI：直接编写 根目录下的 vite.config.(js|ts)

HBuilderX：在根目录下 创建 vite.config.(js|ts) 并写入

# 第 3 步， 创建 App.ku.vue 并写入下面的内容

App.ku.vue
<template>
  <ku-root-view />
  <u-toast />
  <u-modal />
  <u-action-sheet />
</template>

✅ Copy success!

注意

CLI：需要在 src目录 下创建下 App.ku.vue (或自定义名称)

HBuilderX：直接在 根目录 下创建 App.ku.vue (或自定义名称)

# 全局 Toast

# 基本使用

通过 uni.$u.showToast() 方法显示全局 Toast 提示：

example.js
// 默认样式
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",
});

✅ Copy success!

# 高级配置

uni.$u.showToast({
  title: "自定义提示",
  type: "success",
  duration: 3000, // 显示时长，单位ms
  position: "top", // 位置：top、center、bottom
  mask: true, // 是否显示遮罩
  success: () => {
    // 完成回调
    console.log("Toast显示完成");
  },
});

✅ Copy success!

# 隐藏 Toast

uni.$u.hideToast();

✅ Copy success!

# 全局 Loading

// 基本用法
uni.$u.showLoading({
  title: "加载中...",
});

// 隐藏Loading
uni.$u.hideLoading();

✅ Copy success!

# 全局 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("用户点击取消");
    }
  },
});

✅ Copy success!

# 全局 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("取消选择");
  },
});

✅ Copy success!

# 完整示例

<template>
  <view class="u-page">
    <card title="全局反馈">
      <view class="item">
        <u-button type="primary" @click="showToast">默认样式</u-button>
        <u-button type="primary" @click="showToastSuccess">成功样式</u-button>
        <u-button type="primary" @click="showToastError">错误样式</u-button>
      </view>
    </card>

    <card title="全局Loading">
      <view class="item">
        <u-button type="primary" @click="showLoading">显示loading</u-button>
        <u-button type="primary" @click="hideLoading">关闭loading</u-button>
      </view>
    </card>

    <card title="全局Modal">
      <view class="item">
        <u-button type="primary" @click="showModal">打开弹窗</u-button>
        <u-button type="primary" @click="showModal2">按钮样式</u-button>
      </view>
    </card>

    <card title="全局ActionSheet">
      <view class="item">
        <u-button type="primary" @click="showActionSheet"
          >打开ActionSheet</u-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>

✅ Copy success!

# 页面源码地址

页面源码地址


 github  gitee

# API

# showToast 参数

参数 说明 类型 默认值 可选值
title 显示的文字内容 String - -
type 主题类型 String default default | primary | success | error | warning | loading
duration 显示时长，单位 ms Number 2000 -
position 位置 String center top | center | bottom
mask 是否显示遮罩(不可用) Boolean false true | false
success 完成回调函数 Function - -
更多属性参考 toast 组件 - -

# showLoading 参数

参数 说明 类型 默认值 可选值
title 显示的文字内容 String 加载中... -
mask 是否显示遮罩 Boolean false true | false
duration 显示时长，0 表示不自动隐藏 Number 0 -
更多属性参考 toast 组件 - -

# showModal 参数

参数 说明 类型 默认值 可选值
title 弹窗标题 String - -
content 弹窗内容 String - -
showCancelButton 是否显示取消按钮 Boolean false true | false
confirmText 确认按钮文字 String 确定 -
cancelText 取消按钮文字 String 取消 -
confirmColor 确认按钮颜色 String #007aff -
cancelColor 取消按钮颜色 String #999999 -
buttonModel 按钮样式 String - button
success 用户选择回调函数 Function - -
更多属性参考 modal 组件 - -

# showActionSheet 参数

参数 说明 类型 默认值 可选值
title 操作菜单标题 String - -
description 选项上方的描述信息 String - -
actions 按钮的文字数组 Array<Object> [ ] -
cancelText 取消按钮的文字 String - -
closeOnClickAction 点击菜单项时是否关闭弹窗 Boolean true true | false
closeOnClickOverlay 点击遮罩是否允许关闭 Boolean true true | false
safeAreaInsetBottom 是否开启底部安全区适配 Boolean true true | false
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 回调参数

参数 说明 类型
- 无参数 -
上次更新时间: 2025/9/22 17:46:28

← InputTag 输入标签 →

🌟 真诚邀请 🌟
如果你觉得本项目对你有帮助
欢迎访问我们的Gitee/Github 仓库为我们点个 Star！
点我去 Gitee 点我去 Github
帮忙助力一下
关闭弹窗
×