解决vue自定义全局消息框组件问题


Posted in Javascript onNovember 22, 2019

1.发现问题

在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局。采用rem布局的时候html的字体font-size是有一个标准的。我这边用的是750px的设计稿,就采用1rem = 100px。 

在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的。

使用时发现:本来应该细长的提示语句变得很大!

解决vue自定义全局消息框组件问题

最后发现可能是因为这个icon是继承了html设定的font-size,尝试加一些样式上去还是无效。(如果rem布局上有直接更改第三方组件样式成功的小伙伴欢迎告诉我哟!)

2.解决问题

有一种方法是可以可以用 px2rem-loader 插件可以将第三方ui库的px转换成rem单位,我们在写样式的时候用px,这个插件会帮我们转换为rem单位。(因为暂时只是一个提示框遇到这样的问题,不想大费周章,所以决定暂时不用,以后再用吧嘿嘿!)

自己写小组件,在网上冲浪了一会,选了几个小demo实现可以了下,确实比较好!(采用这个方法!)

3.自定义全局消息组件

大概效果有点模仿 element-ui 中的提示样式,反正最后效果图如下:

解决vue自定义全局消息框组件问题

解决vue自定义全局消息框组件问题

解决vue自定义全局消息框组件问题

解决vue自定义全局消息框组件问题

vue-cli3中component下新建message文件夹,里面再建如下:

解决vue自定义全局消息框组件问题

Message.vue源代码如下:

<template>
 <transition name="fade"> <!--这个是动画的过渡效果-->
 <div class="message" :class="type" v-if="visible">
  <div class="content">
  <i class="icon-type iconfont" :class="'icon-'+type"></i>
  {{content}}
  <i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
  </div>
 </div>
 </transition>
</template>
 
<script>
export default {
 name: 'Message.vue',
 data () {
 return {
  content: '',
  time: 3000,
  visible: false,
  type: 'info', // 'info','warning','error','success'
  hasClose: false 
 }
 },
 mounted () {
 this.close()
 },
 methods: {
 close () {
  window.setTimeout(() => {
  this.visible = false
  }, this.time)
 }
 }
}
</script>
 
<style scoped lang="scss">
 /* 动画效果 淡入淡出 */
 .fade-enter-active, .fade-leave-active{
 transition: all 0.5s ease;
 }
 .fade-enter, .fade-leave-active{
 opacity: 0;
 }
 /* 不同的提示语的样式 */
 .info, .icon-info{
 background-color: #DDDDDD;/*#f0f9eb*/
 color: #909399;
 }
 .success, .icon-success{
 background-color:#f0f9eb;
 color: #67C23A;
 }
 .warning, .icon-warning{
 background-color: #fdf6ec;
 color: #e6a23c;
 }
 .error, .icon-error{
 background-color: #fef0f0;
 color: #f56c6c;
 }
 .message {
 position: fixed;
 left: 50%;
 top: 10%;
 transform: translate(-50%, -50%);
 width:300px;
 height:30px;
 line-height: 30px;
 font-size: 16px;
 padding: 10px;
 border-radius: 5px;
 .content{
  width:100%;
  height:100%;
  text-align:left;
  .icon-type{
  margin:0 10px 0 30px;
  }
  .btn-close{
  font-size:20px;
  margin:0 0 0 70px;
  color:#ccc;
  }
 }
 }
 
</style>

index.js源代码如下:

给Vue添加$my_message方法,判断参数,使用 $mount() 给组件手动挂载参数,然后将组件插入页面中

import Vue from 'vue'
import Message from './Message.vue'
 
const MessageBox = Vue.extend(Message)
 
Message.install = function (options, type) {
 if (options === undefined || options === null) {
 options = {
  content: ''
 }
 } else if (typeof options === 'string' || typeof options === 'number') {
 options = {
  content: options
 }
 if (type !== undefined && options !== null) {
  options.type = type
 }
 }
 
 let instance = new MessageBox({
 data: options
 }).$mount()
 
 document.body.appendChild(instance.$el)
 
 Vue.nextTick(() => {
 instance.visible = true
 })
}
 
export default Message

main.js中:

// 在main.js里面全局引入 自定义的全局消息框组件
import Message from './components/message'
Vue.prototype.$my_message = Message.install

解决vue自定义全局消息框组件问题

页面中调用:

this.$my_message('你这个大笨猪吼吼吼!');
this.$my_message('你这个大笨猪吼吼吼!','success');
this.$my_message({
 content:'服务器连接失败!', // 弹出的文字内容
 time:5000,     // 弹出后多久消失
 type:'success',   // 弹出的消息类型
 hasClose:true,   // 让按钮可以被使用,默认按钮是false不可以使用的
 
});

4.注意事项

本Demo中弹出的提示语句中的小图标是iconfont里面的。

总结

以上所述是小编给大家介绍的解决vue自定义全局消息框组件问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
JavaScript实现省市联动效果
Nov 22 #Javascript
Vue混入mixins滚动触底的方法
Nov 22 #Javascript
超简单的微信小程序轮播图
Nov 22 #Javascript
微信小程序实现Swiper轮播图效果
Nov 22 #Javascript
Js代码中的span拼接问题解决
Nov 22 #Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
小程序实现图片预览裁剪插件
Nov 22 #Javascript
You might like
Mysql的常用命令
2006/10/09 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python中下标和切片的使用方法解析
2019/08/27 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
校园报刊亭创业计划书
2014/01/02 职场文书
施工班组长岗位职责
2014/01/05 职场文书
学校万圣节活动方案
2014/02/13 职场文书
刊首寄语大全
2014/04/11 职场文书
地震捐款倡议书
2014/08/29 职场文书
领导参观欢迎词
2015/01/26 职场文书
以权谋私检举信范文
2015/03/02 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python