├── README.md ├── index.js └── src ├── main.js └── main.vue /README.md: -------------------------------------------------------------------------------- 1 | ## message-component-Vue 2 | A popup window components based on Vue! 3 | 4 | ## 组件安装方法： 5 | * #1 引入Vue && message组件 6 | * import Vue from 'Vue' 7 | * import Message from 'xxx/message' 8 | * #2 安装组件 9 | * Vue.use(Message); 10 | * 全局用法： 11 | ```js 12 | Vue.prototype.$message(option); 13 | ``` 14 | * 组件内部用法： 15 | ```js 16 | this.$message(option); 17 | ``` 18 | * options说明： 19 | ```js 20 | { 21 | type: 1, // 消息弹窗类型， 22 | 0:不带按钮的消息弹窗，并且定时N秒后自动关闭，支持配置定时关闭时间 23 | 1:带有“确认”按钮的消息弹窗， 24 | 2:带有“确认”，“取消”按钮的消息弹窗， 25 | 默认为1，[type:Number] 26 | title: '', // 消息弹窗标题内容，默认为空字符串，[type: String] 27 | content: '', // 弹窗正文内容，默认为空字符串，[type: String] 28 | transitionTime: 0.3, // 打开/关闭弹窗过渡时间，默认是0.3s，[type: Number, 单位:s] 29 | autoOffTime: 0.3, //自动关闭消息时间，默认是0.3s，[type: Number, 单位:s] 30 | callback: '' // 回调函数，在弹窗确认按钮点击之后执行，[type: Function] 31 | } 32 | ``` 33 | ## 说明： 34 | - 组件布局基于rem，根（html）font-size为100px，UI设计稿宽度为750px，下面给出一段页面rem自适应js代码方案： 35 | #### pageAuto.js: 36 | ```js 37 | /** 38 | * js控制rem根大小， 实现页面自适应---------------------------------李增 39 | * 634401745@qq.com 40 | * 2015/10/8 41 | */ 42 | export default function() { 43 | var de = document.documentElement,cw = de.clientWidth; 44 | if (!cw) return; 45 | const ratio = window.sxxApi.ratio = cw / 750; 46 | // if (!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)) cw = 450; 47 | de.style.fontSize = 100 * ratio + 'px'; 48 | cw = de = null; 49 | } 50 | /******************************************************************************************/ 51 | ``` 52 | #### 用法： 53 | ```js 54 | import pageAuto from './xxx/xxx/pageAuto' 55 | pageAuto(); //修改页面根元素font-size大小，以适应不同屏幕大小移动设备 56 | ``` 57 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Vue组件：消息弹窗 3 | * 4 | * 作者：李增 5 | * 邮箱：634401745@qq.com 6 | * 7 | * 组件安装方法： 8 | * #1 引入Vue && message组件 9 | * import Vue from 'Vue' 10 | * import Message from 'xxx/message' 11 | * #2 安装组件 12 | * Vue.use(Message); 13 | * 14 | * 全局用法： 15 | * Vue.prototype.$message(option); 16 | * 17 | * 组件内部用法： 18 | * this.$message(option); 19 | * 20 | * options说明： 21 | * { 22 | * type: 1, // 消息弹窗类型， 23 | * 0:不带按钮的消息弹窗，并且定时N秒后自动关闭，支持配置定时关闭时间 24 | * 1:带有“确认”按钮的消息弹窗， 25 | * 2:带有“确认”，“取消”按钮的消息弹窗， 26 | * 默认为1，[type:Number] 27 | * title: '', // 消息弹窗标题内容，默认为空字符串，[type: String] 28 | * content: '', // 弹窗正文内容，默认为空字符串，[type: String] 29 | * transitionTime: 0.3, // 打开/关闭弹窗过渡时间，默认是0.3s，[type: Number, 单位:s] 30 | * autoOffTime: 0.3, //自动关闭消息时间，默认是0.3s，[type: Number, 单位:s] 31 | * callback: '' // 回调函数，在弹窗确认按钮点击之后执行，[type: Function] 32 | * } 33 | */ 34 | 35 | import Message from './src/main.js'; 36 | Message.install = function (Vue, opts = {}) { 37 | Vue.prototype.$message = Message; 38 | } 39 | export default Message; -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | let MessageConstructor = Vue.extend(require('./main.vue')); 3 | 4 | let instance; 5 | let ZIndex = 100; 6 | 7 | var Message = function(options) { 8 | if (Vue.prototype.$isServer) return; 9 | options = options || {}; 10 | if (typeof options === 'string') { 11 | options = { 12 | content: options 13 | }; 14 | } 15 | 16 | instance = new MessageConstructor({ 17 | data: options 18 | }); 19 | instance.vm = instance.$mount(); 20 | document.body.appendChild(instance.vm.$el); 21 | instance.dom = instance.vm.$el; 22 | instance.dom.style.zIndex = ZIndex; 23 | ZIndex = ZIndex+1; 24 | return instance.vm; 25 | }; 26 | 27 | export default Message; -------------------------------------------------------------------------------- /src/main.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 65 | 66 | 167 | --------------------------------------------------------------------------------