不羁的空间
Appearance

pop

bujichongjsjs

pop 为全局的提示框，包括 alert、confirm、msg、loading 和 toast，在 vue 文件中我们直接通过 this.$pop. 来调用。

所有方法

pop.alert(msg,confirm,opt)

  • msg : 提示信息，可以为html富文本
  • confirm : 点击确定事件
  • opt : 自定义参数，这里的自定义参数是 pop 组件的配置，见下方

pop.confirm(msg ="你确定此操作吗？",confirm,cancel,opt)

  • msg : 提示信息，可以为html富文本
  • confirm : 点击确定事件
  • cancel ：点击取消事件
  • opt : 自定义参数，这里的自定义参数是 pop 组件的配置，见下方

pop.loading(msg="加载中...",opt)

pop.loading.show(msg="加载中...",opt)

pop.loading.hide()

pop.msg(msg,type="warning",duration=1600)

pop.msg(opt)

pop.toast(msg,opt)

pop.toast.loading(msg="内容加载中...",opt)

  • toast 调用的是 uni.showToast 方法，默认无图标模式。
  • pop.toast.loading 调用的是 uni.showToast 图标为 loading 的状态。

js中引入使用

import pop from '@/extends/pop.js'

...

pop.confirm(msg,()=>{
});

pop.msg('提交成功！','success')

vue文件中使用

vue 文件中直接通过 this.$pop 使用：

this.$pop.confirm('你确定要执行 <span style="color:red;font-weight:bold;">这次操作</span> 吗？', () => {
    console.log('好的');
}, function() {
    console.log('取消')
}, {//第四个参数为个性参数选项
    title: '提示'
});
this.$pop.alert('提示内容');

ajax 带 tip 属性，集成了 pop.confirm

this.$ajax.post('/api/test', {a: 1}, '你确定提交此请求吗？').then(res => {
	console.log(res)
});

this.$ajax({
    url : this.url,
    tip:'你确定提交此请求吗？'
}).then(res=>{
    	console.log(res)
});

alert 和 conrfirm 所有自定义参数

{
    mode : 'alert',//弹窗模式，在详细模式种设置无效
	zIndex : 1075,//弹窗 z轴
	title : '',//标题，不填写仍然占位
	width: '600rpx',//默认宽度
	contentClass : '',//内容className
	contentStyle : {},//内容样式
	showTitle : false,//是否显示标题
        
	confirmShow : true,//是否显示确定按钮
	confirmText : '确认',
	confirmColor : '#2979ff',
	confirmStyle : {},

	cancelShow : false,//是否显示取消按钮
	cancelText : '取消',
	cancelColor : '#606266',
	cancelStyle : {},
        
	zoom : true,//是否开启缩放动画
	asyncClose : false,//是否异步关闭，只对确定按钮有效
	maskClose : false,//是否允许点击遮罩关闭Modal
	offset : 0,//往上偏移的值
	confirm: ()=>{},//确定事件
	cancel : ()=>{}//取消事件
}
文档目录