uView Next
4.0.105

外观

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>

页面源码地址

页面源码地址


 github  gitee

API

showToast 参数

参数说明类型默认值
title显示的文字内容String-
type主题类型
Enum
default
duration显示时长，单位 msNumber2000
position位置
Enum
center
mask是否显示遮罩(不可用)Booleanfalse
success完成回调函数Function-
更多属性参考 toast 组件-

showLoading 参数

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

showModal 参数

参数说明类型默认值
title弹窗标题String-
content弹窗内容String-
showCancelButton是否显示取消按钮Booleanfalse
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点击菜单项时是否关闭弹窗Booleantrue
closeOnClickOverlay点击遮罩是否允许关闭Booleantrue
safeAreaInsetBottom是否开启底部安全区适配Booleantrue
round圆角值String | Number0
height设置高度String | Number-
success成功回调函数Function-
cancel取消回调函数Function-
更多属性参考 actionSheet 组件-

回调参数

showModal success 回调参数

参数说明类型
confirm用户是否点击确定Boolean
cancel用户是否点击取消Boolean

showActionSheet success 回调参数

参数说明类型
name选中项的名称String
value选中项的值Any
index选中项的索引Number

showActionSheet cancel 回调参数

参数说明类型
-无参数-

Copyright © 2026 uView Next