Appearance
封装命令式弹框组件
uni.showToast和uni.showModal的封装
uni.showToast
js
function showToast(title, icon){
uni.showToast({
icon: icon || "none",
title: title || '标题',
});
}
export default showToast
function showToast(title, icon){
uni.showToast({
icon: icon || "none",
title: title || '标题',
});
}
export default showToast
页面调用
js
import showToast from "./dialog.js";
export deafult{
methods:{
btn(){
showToast("显示弹框")
}
}
}
import showToast from "./dialog.js";
export deafult{
methods:{
btn(){
showToast("显示弹框")
}
}
}
uni.showModal
js
function showModal(content, options = []){
uni.showModal({
title: "提示",
content,
confirmColor: '#1890ff',
cancelColor: '#ff4d4f',
confirmText: options[0].text || "确定",
cancelText: options[1].text || "取消",
success: (res) => {
if (res.confirm) {
options[0].callback && options[0].callback()
} else {
options[1].callback && options[1].callback()
}
}
})
}
export default showModal
function showModal(content, options = []){
uni.showModal({
title: "提示",
content,
confirmColor: '#1890ff',
cancelColor: '#ff4d4f',
confirmText: options[0].text || "确定",
cancelText: options[1].text || "取消",
success: (res) => {
if (res.confirm) {
options[0].callback && options[0].callback()
} else {
options[1].callback && options[1].callback()
}
}
})
}
export default showModal
页面调用
js
import showModal from "./dialog.js";
export deafult{
methods:{
btn(){
showModal('确定删除此项吗?', [
{
// text: '确定',
callback: () => {
console.log("queding");
}
},
{
// text: '取消',
callback: () => {
console.log("quxiao");
}
},
])
}
}
}
import showModal from "./dialog.js";
export deafult{
methods:{
btn(){
showModal('确定删除此项吗?', [
{
// text: '确定',
callback: () => {
console.log("queding");
}
},
{
// text: '取消',
callback: () => {
console.log("quxiao");
}
},
])
}
}
}