更新记录
1.2.2(2024-12-19)
panel类型增加设置图标的宽度、高度、圆角以及文本的字号大小参数
1.2.1(2024-12-18)
兼容在uniapp项目内使用
1.2(2024-09-23)
panel类型弹窗增加内容对齐方式属性gravity设置
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.36,Android:5.0,iOS:不支持,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
xwq-toast 安卓全局消息弹窗插件
文档说明
注意啦,下载插件需要打包自定义基座才可正常使用
功能说明
-
插件有两种类型可选toast|panel,可根据需要选择, panel类型可以覆盖原生导航,toast类型不行,调用参数可根据需要设置,非必要可不传:
-
panel类型调用方式:
-
参数字段说明
属性 类型 默认值 必填 描述 type string toast N 弹窗类型 content strig - N 提示框的内容 position string top N 提示框的位置,支持top、bottom bgColor string - N 提示框的背景色,例如:"#ffff0000" textColor string - N 提示框的字体颜色,例如:"#ffff0000" textSize number 14 N 提示框的字体大小 showApplicationIcon boolean false N 是否显示应用图标 imgUrl string - N 自定义图片 gravity string center N 提示内容的对齐方式,默认center,可选left、right imgRadius number 5 N 设置图标的圆角 imgWidth number - N 设置图标的宽度,注意:如果设置过小会出现文本和图片不对齐的情况,可以通过设置gravity为center使其居中对齐 imgHeight number - N 设置图标的高度,注意:如果设置过小会出现文本和图片不对齐的情况,可以通过设置gravity为center使其居中对齐
-
-
toast类型调用方式:
-
参数字段说明
属性 类型 默认值 必填 描述 type string toast N 弹窗类型 content strig - N 提示框的内容 position string top N 提示框的位置,支持top、center、bottom bgColor string - N 提示框的背景色,例如:"#ffff0000" textColor string - N 提示框的字体颜色,例如:"#ffff0000"
-
-
代码示例
-
uniapp调用方式
<template>
<button type="primary" @click="openToast">打开Toast提示</button>
</template>
<script setup lang="ts">
import { showToast } from '@/uni_modules/xwq-toast';
import type {OptionType} from '@/uni_modules/xwq-toast';
const openToast=()=>{
let params={
type:'panel',
// position:'top',
// showApplicationIcon:false,
// textColor:"#00ff00",
gravity:"left",
imgUrl:"https://www.wanguoqiche.com/files/web/pic/jns/report_system_cold_img01.png?_vk=dPNGhM",
content: "您的笔记已经审核222111" ,
} as OptionType;
showToast(params);
};
</script>
- uniappX调用方式
<template>
<view>
<button type="primary" @click="openToast">打开Toast提示</button>
</view>
</template>
<script setup>
import { showToast } from '@/uni_modules/xwq-toast';
import type {OptionType} from '@/uni_modules/xwq-toast';
const openToast=()=>{
let params={
type:'panel',
// position:'top',
// showApplicationIcon:false,
// bgColor:"#ffff0000",
// textColor:"#00ff00",
content: "您的笔记已经审核通过您的笔记已经审核通过您的笔记已经审核通过" ,
} as OptionType;
showToast(params);
};
</script>