ShowModal Save

一个适用于uni-app的跨端显示弹层，接口参数与uni-app 中的showModal参数一致，简单使用方式如下 ：

this.$showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

如果对您有帮助麻烦点个星星 我会持续更新的~ gitHub

注意项

1. 依赖于 vuex 如没有安装请先安装vuex

 如果你没有引入vuex 一个简单的初始化vuex的main.js 内容, 可以参照修改

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex';
Vue.use(Vuex)
Vue.config.productionTip = false

import initModal from "@/components/zhangxu-showModal/initModal.js";
import showModal from '@/components/zhangxu-showModal/show-modal';
initModal(Vue);
Vue.component('show-modal',showModal);

App.mpType = 'app'

const store = new Vuex.Store();
const app = new Vue({
    store,
    ...App
})
app.$mount()

2. 样式使用scss 请安装或修改 样式为你的预处理语言

使用方式

在main.js中

// 注册全局modal组件
import initModal from "@/components/zhangxu-showModal/initModal.js";
import showModal from '@/components/zhangxu-showModal/show-modal';
initModal(Vue);
Vue.component('show-modal',showModal);

在需要的页面中 （注 需要的页面每个都要引入）

<template>
    <div>
        <show-modal></show-modal>
    </div>
</template>

在函数中（注 此组件在main.js 中全局引入不需要在子组件中再注册组件）

this.$showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

OBJECT参数说明

success返回参数说明

完整参数如下：

this.$showModal({
	title:"我是标题",
	content:'我内容',
	showCancel:true,
	cancelText:"取消",
	cancelColor:"#000000",
	confirmText:"确定",
	confirmColor:"red",
	hideTabBar:true,
	success:function(res){
		if(res.confirm){
			wx.showToast({
				title: '点击了确定',
				icon: 'none',
				duration: 2000
			})
		}else{
			wx.showToast({
				title: '点击了取消',
				icon: 'none',
				duration: 2000
			})
		}
	},
})

版本更新

20190519：

修改了再不设置title的情况下布局不正常问题

20190527：

1.修改了蒙版阻止滚动，增加页面回退时自动关闭弹窗
2.增加回退页面时关闭弹出层功能

20190918：

1.增加自定义slot示例
2.删除部分不必要代码