├── .babelrc ├── example ├── pages │ └── index │ │ ├── main.json │ │ ├── main.js │ │ └── index.vue ├── App.vue ├── app.json └── main.js ├── .postcssrc.js ├── .gitignore ├── index.html ├── project.config.json ├── package.json ├── src ├── registry.js ├── icons.js └── index.vue └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": "env" 3 | } 4 | -------------------------------------------------------------------------------- /example/pages/index/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "demo 页" 3 | } 4 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /example/pages/index/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './index' 3 | 4 | const app = new Vue(App) 5 | app.$mount() 6 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/main" 4 | ], 5 | "window": { 6 | "navigationBarTitleText": "mp-toast test" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-mpvue-wxss": {} 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mptoast 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | import mpvueToastRegistry from '../src/registry' 5 | mpvueToastRegistry(Vue) 6 | 7 | Vue.config.productionTip = false 8 | App.mpType = 'app' 9 | 10 | const app = new Vue(App) 11 | app.$mount() 12 | 13 | export default { 14 | // 这个字段走 app.json 15 | config: { 16 | // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去 17 | pages: ['^pages/example/main'], 18 | window: { 19 | backgroundTextStyle: 'light', 20 | navigationBarBackgroundColor: '#fff', 21 | navigationBarTitleText: 'WeChat', 22 | navigationBarTextStyle: 'black' 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false 13 | }, 14 | "compileType": "miniprogram", 15 | "libVersion": "2.0.4", 16 | "appid": "wxca65ed4ae828b9f3", 17 | "projectname": "mptoast", 18 | "debugOptions": { 19 | "hidedInDevtools": [] 20 | }, 21 | "isGameTourist": false, 22 | "condition": { 23 | "search": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "conversation": { 28 | "current": -1, 29 | "list": [] 30 | }, 31 | "game": { 32 | "currentL": -1, 33 | "list": [] 34 | }, 35 | "miniprogram": { 36 | "current": -1, 37 | "list": [] 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /example/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 31 | 32 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mptoast", 3 | "version": "1.3.0", 4 | "description": "a toast component for mpvue", 5 | "main": "src/index.vue", 6 | "files": [ 7 | "src" 8 | ], 9 | "repository": { 10 | "url": "https://github.com/noahlam/mpvue-toast.git", 11 | "type": "git" 12 | }, 13 | "author": "noahlam <284516433@qq.com>", 14 | "license": "MIT", 15 | "scripts": { 16 | "dev": "node build/dev-server.js", 17 | "start": "node build/dev-server.js", 18 | "build": "node build/build.js" 19 | }, 20 | "dependencies": { 21 | "mpvue": "^1.0.11", 22 | "vuex": "^3.0.1" 23 | }, 24 | "devDependencies": { 25 | "babel-core": "^6.22.1", 26 | "babel-loader": "^7.1.1", 27 | "babel-preset-env": "^1.3.2", 28 | "copy-webpack-plugin": "^4.5.1", 29 | "css-loader": "^0.28.11", 30 | "express": "^4.16.3", 31 | "extract-text-webpack-plugin": "^3.0.2", 32 | "glob": "^7.1.2", 33 | "html-webpack-plugin": "^3.2.0", 34 | "http-proxy-middleware": "^0.18.0", 35 | "mpvue-loader": "^1.1.2", 36 | "mpvue-template-compiler": "^1.0.11", 37 | "mpvue-webpack-target": "^1.0.0", 38 | "ora": "^2.0.0", 39 | "postcss-mpvue-wxss": "^1.0.0", 40 | "px2rpx-loader": "^0.1.10", 41 | "relative": "^3.0.2", 42 | "url-loader": "^1.0.1", 43 | "vue-style-loader": "^4.1.0", 44 | "webpack": "^3.11.0", 45 | "webpack-dev-middleware-hard-disk": "^1.12.1", 46 | "webpack-merge": "^4.1.0", 47 | "webpack-mpvue-asset-plugin": "^0.1.1" 48 | }, 49 | "engines": { 50 | "node": ">= 4.0.0", 51 | "npm": ">= 3.0.0" 52 | }, 53 | "browserslist": [ 54 | "> 1%", 55 | "last 2 versions", 56 | "not ie <= 8" 57 | ] 58 | } 59 | -------------------------------------------------------------------------------- /src/registry.js: -------------------------------------------------------------------------------- 1 | // 注册 2 | import Vuex from 'vuex' 3 | 4 | export default function registry(v) { 5 | v.use(Vuex) 6 | // 挂在store到全局（this） 7 | v.prototype.$toastStore = new Vuex.Store({ 8 | state: { 9 | show:false, 10 | text:'提示', 11 | duration: 1500, 12 | textClass:null, 13 | icon:null, 14 | iconClass:null, 15 | callback: null 16 | }, 17 | getters:{ 18 | 'GET_TOAST_SHOW': function (state) { 19 | return state.show 20 | }, 21 | 'GET_TOAST_TEXT': function (state) { 22 | return state.text 23 | }, 24 | 'GET_TOAST_DURATION': function (state) { 25 | return state.duration 26 | }, 27 | 'GET_TOAST_TEXT_CLASS_NAME': function (state) { 28 | return state.textClass 29 | }, 30 | 'GET_TOAST_ICON': function (state) { 31 | return state.icon 32 | }, 33 | 'GET_TOAST_ICON_CLASS_NAME': function (state) { 34 | return state.iconClass 35 | }, 36 | 37 | 38 | }, 39 | mutations: { 40 | hideToast(state) { 41 | state.show = false 42 | }, 43 | showToast(state, data) { 44 | if (state.show) return 45 | data.duration = data.duration || 1500 46 | let dt = { 47 | show: true, 48 | text: data.text || '提示', 49 | duration: data.duration + 700, 50 | textClass: data.textClass || '', 51 | icon:data.icon || '', 52 | iconClass:data.iconClass || '', 53 | callback: data.callback || null 54 | } 55 | state = Object.assign(state, dt) 56 | }, 57 | callback(state) { 58 | let cb = state.callback 59 | cb && cb() 60 | } 61 | } 62 | }) 63 | // 注册显示方法 $mptoast 到全局 64 | v.prototype.$mptoast = function (data, icon = '', duration = 1500, textClass = '',iconClass = '', callback = null) { 65 | if (typeof data === 'string' || typeof data === 'number') { 66 | let _data = { 67 | text: data, 68 | icon, 69 | duration, 70 | textClass, 71 | iconClass, 72 | callback 73 | } 74 | v.prototype.$toastStore.commit('showToast', _data) 75 | } 76 | if (typeof data === 'object') { 77 | v.prototype.$toastStore.commit('showToast', data) 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/icons.js: -------------------------------------------------------------------------------- 1 | let success = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaxJREFUeNrsme1twyAQhpMq/5sRukEygkfoCO4GGaEjpBOUbuAN6m5AN/AIbEAPiUot4uMgGB/RnfRKcWRiP4GXO5/3WuvdvcTD7o6CYRiGYRiGYcjFocN7PoLO9rMCyV5hnkAT6GSPv0BDj8tssLNw6t0zI+gT9Oh8f/13ZApN4hLaH6N7LmWII2jGglCGOYNkAOQSGkcRZACpAIiIjaUGMupwiNT4HoyOAqECEzM6GoQCTMzoWSBbw8SMng2yJcxFx0OU/C41oxeDGB08xZypTBe3vK5Uus+xQhHiw9ZhZeHQLc6/JK1Jaxh9WWtGQsvMFypWQiD0nDB6FRAfzBS54GRzQk2jVwPxwQyJCyt7Tg2jVwUJ7WYj4iZeExldtgaJbc0YoNmz7DBGXwUklWcwQOrPbocx+mogmKSJBcL443c2V0vIe8TLJpPE3iskzW+blNWWHU0BeqEOktNqugWoCUhu36wEqBlISRMwB6gpSGlH0wC9UQO5taMZ2o5lQQ3XJM/kAm0GUutJU1AA8T1plnboF9uRb+sRJzAVAL/TZBiGYRiGYZjS+BFgAKT0Ks2zaV55AAAAAElFTkSuQmCC` 2 | let error = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABlCAYAAABUfC3PAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNrs3f1t1EAQBXDfiP9JCekAd5CjAkIHoQKgA9IBJVwJ0MHRQaiA0IFTgdmVNiIfOoLt8fq92fekUaT4Ep/v57XX8q5vN45jp2DF9BEIRRGKUBShCEURilAUoShCEYoiFKEoQhGKIhTln3m10v/dl59DqpuAn9t5qZzbUn7Jdx4d60uqYXycY6reeT1b1Vmqw/g8h7LMZT07x9vBX1N9PLHsrrQe5lZzluqY6s2J5T9T9R4r8kLJTfnXC69hhnkJ5D6fy84JcaK/+o/XvC4b1gcFyblk7H2xwUwB6by2a4suMQvMVJDO69DshXIMBjMHZM7nsOqJPudbqncT/wbx5D8X5K50eAakw9dV6RYyt5glIHsPEG+UobwxVpilIG6t3ftEzwoDA7JW74sNBgpkzS4xCwwcyNrXKegwkCA1Lh5RYWBBal3Ro8FAg9RCQYKBB6mJggBDAVIbZUsYGpAtULaAoQLZCqUmDB3Ilig1YChBtkZZE4YWBAFlDRhqEBQUTxh6ECQUD5h9BJCcHeCzWebu7XMCORYNcYD33BYTAgQVpQYM9GhN5KkQa8HAD59Fn5/iDUMxnplh0pAXDM0Ac5aZXEthqEb8a3qdUDa7dqEa7W8NgNDBWCMgVDDWEAgNjDUGQgFjDYLAw1gQkHwd8rbjnx8Dh7L0BtWx454fA4fidcdwiABjgUC6KDAWDCQEjAUEoYexoCDUMBYYhBbGgoNQwlgDIHQw1ggIFYw1BEIDY42BUMBYgyDwMNYoCDSMNQwCC2ONg0DCmEDwYDznp+Q3dkEK4rVzZZhblJZyGQRkaYv5hHT46oOALIWhfS4xy2DrOTCUKGzPu58KA/Ww6ENAkDkwBySU3OP4EBBkCswPNJT7veR9qt9Pfv+9HGvZv3FoKNtxXXayhzvcdff325WgrlMe5rzUTef0VGvA9J7nkRooClmXWBGKUBShCEURilAUoShCEYoiFKEoQhGKIhTlZP4IMADZKJrvag4ipwAAAABJRU5ErkJggg==` 3 | let info = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABlCAYAAABUfC3PAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATRJREFUeNrs3cENgjAYgNFiGIRRHIVNXK1ugBvgBjgBcvCkCaFESNu8L+lNE8KL/CAGm3meg/LqYhdAERQoggJFUKAIiqBAERQoggJFULRaW9j2dp+V2rSsAcox9cu67XjffVlXhy9BgSIoXwMbSmbtPYMaoeQXFEGBIihFzwYox5y1QXF9Y6ZAERQoJ/eAUsfQjlAEBYqgQCmj1KH9gpJfAxRBgSIof7yih5LZ4B6h5BcUQYEiKNXMCCi/RSiCAkVQoJRVys+MJijnlLKj3eQSFCiCAqWw4sbXPaHk11jiRjf+1MYnRVCgCAoUQYGizGoL3e4ubH8+cYRyTn3Y/nzixuFLUKAIChRBERQoglJdpd4O7kLFX7O4R+/wJShQBAWKoEARFEGBIihQBAWKoGi9twADAO8AK4ejPNAtAAAAAElFTkSuQmCC` 4 | export default { 5 | success, 6 | error, 7 | info 8 | } 9 | -------------------------------------------------------------------------------- /src/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 56 | 57 | 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 介绍 2 | mptoast 是一个基于mpvue的简单弹窗组件 github地址：[https://github.com/noahlam/mpvue-toast](https://github.com/noahlam/mpvue-toast) 3 | 4 | ### 特性 5 | 0. **轻量** 目前整个项目`未打包前`大概只有`120行`代码(包括注释)，5kb左右(包括图标) 6 | 1. **配置少** 尝试过无数种优化方法，只为减少配置 7 | 2. **冗余少** 每个页面（page）只需要引入一次，该页面里面如果有多个子组件，可以跟页面共用一个，无需重复引入。 8 | 3. **使用简单** 除了必须的在page页面对组件import，注册，和html引入（这些麻烦的东西由于mpvue不支持的原因，暂时无法做到优化），其他的使用只需一行简单的代码 `this.$mptoast('提示消息‘)`即可实现弹窗 9 | 4. **可定制性强** 提供用户重写样式的属性，只需传入一个定义好的`样式类名`既可实现对原有样式的覆盖（具体请看参数说明） 10 | 11 | 12 | ### 安装 13 | 14 | 1.安装`vuex`，如果你项目还没使用的话。请放心，虽然`mptoast`依赖`vuex`,你不会接触到任何有关`vuex`的代码。添加`vuex`只为让你写更少的代码。 15 | 16 | npm i vuex 17 | 18 | 2.安装`mptoast` 19 | 20 | npm i mptoast -D 21 | 22 | 或者 23 | 24 | yarn add mptoast --dev 25 | 26 | 3.在项目的主配置文件`（一般位于src/main.js）`加入以下代码 27 | 28 | import mpvueToastRegistry from 'mptoast/src/registry' 29 | mpvueToastRegistry(Vue) 30 | 31 | 4.在你需要弹窗的页面，引入组件，并注册，然后在页面内加入一个你注册的组件，就可以在js里面调用`this.$mptoast()`了， 以下是一个简单的实例 32 | 33 | 39 | 40 | 57 | 58 | 至于为什么没办法做到像vue组件那样，引入一次，就可以在所有页面使用，我想我必须得解释以下，因为mpvue目前还不支持全局的组件，我尝试过很多种变通办法，都行不通，甚至为了让大家使用的时候，少输入几个字，少一些冗余，我都做了很多尝试和优化，目前mpvue团队已经在考虑新增全局组件功能，我会时刻关注，一旦支持，我这边也立马做支持。 59 | 60 | ### 参数说明 61 | > 参数分2种类型，一种是多个参数，另一个种则少只接收一个对象 62 | 63 | 一， 多个参数 64 | 65 | | 参数位置 | 参数类型 | 参数名称 |是否必填 | 默认值 | 其他说明 | 66 | |:-------:|:------:|:------:|:-------:|:-------:|:-----------| 67 | | 1 | string | 显示文本 | 是 | - | 如果第一个参数不是string或number类型
则会被当作对象来处理，也就是上面提到的另一种情况 | 68 | | 2 | stirng | 显示图标类型 | 否 | - | 3种可选 'success' , 'error' , 'info' | 69 | | 3 | number | 关闭时间 | 否 | 1500 | 单位是毫秒ms,传其他格式（非number类型）会报错 | 70 | | 4 | string | 文本样式类名 | 否 | - | 如果需要自定义显示的样式，请先定一个样式类
然后把类名传给该参数，定义类的时候
如果所有页面都使用这个类,必须定义为全局的
如果定义在scope作用域内的话
子组件不能复用父组件的样式。 | 71 | | 5 | string | icon样式类名 | 否 | - | 同上，需要注意的是icon是包含在文本里面的 | 72 | | 6 |function| 回掉函数 | 否 | - | toast 隐藏时的回调hanshu | 73 | 74 | 以下代码是一个多个参数调用的简单实例 75 | 76 | this.$mptoast('温馨提示', 'success', 2000) 77 | 78 | 二， 单个object对象 79 | object对象参数的功能，其实跟上面`多个参数`的对应的功能是一样的，只是写法不同而已，我们直接看代码 80 | 81 | this.$mptoast({ 82 | text: '温馨提示', // 显示文本 83 | icon:'success' // 图标类型 84 | duration: 2000, // 关闭时间 85 | textClass: 'my-class' // 样式类名 86 | iconClass: 'icon-class' // 图标类名 87 | callback: () => { console.log('隐藏')} 88 | }) 89 | 90 | 需要注意的是，以上参数，如果传入错误的类型，先会进行类型转换，如果转换失败的，可能会报错。 91 | --------------------------------------------------------------------------------