解决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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
用js实现博客打赏功能
Oct 24 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 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
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
PHP多个版本的分析解释
2011/07/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
js 文件引入实现代码
2010/04/23 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python实现电子产品商店
2019/02/26 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
介绍一下Java中标识符的命名规则
2014/02/03 面试题
团购业务员岗位职责
2014/03/15 职场文书
《春晓》教学反思
2014/04/20 职场文书
社区活动总结范文
2015/05/07 职场文书
警示教育观后感
2015/06/17 职场文书
初中历史教学反思
2016/02/19 职场文书
卖车协议书范文
2016/03/23 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
我收到了德劲DE1107
2022/04/05 无线电
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python