快捷導(dǎo)航

解決vue自定義全局消息框組件問題

更新時(shí)間：2019年11月22日 15:17:19 作者：一只沒有感情的小殺手

這篇文章主要介紹了vue自定義全局消息框組件問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.發(fā)現(xiàn)問題

在進(jìn)行移動(dòng)端適配的時(shí)候，為了在各個(gè)型號(hào)的設(shè)備上能夠更好的提現(xiàn)結(jié)構(gòu)排版，決定采用rem布局。采用rem布局的時(shí)候html的字體font-size是有一個(gè)標(biāo)準(zhǔn)的。我這邊用的是750px的設(shè)計(jì)稿，就采用1rem = 100px。

在使用的過程中會(huì)用到一些第三方UI組件，而第三方UI組件是以px單位為標(biāo)準(zhǔn)的。

使用時(shí)發(fā)現(xiàn)：本來(lái)應(yīng)該細(xì)長(zhǎng)的提示語(yǔ)句變得很大！

最后發(fā)現(xiàn)可能是因?yàn)檫@個(gè)icon是繼承了html設(shè)定的font-size，嘗試加一些樣式上去還是無(wú)效。（如果rem布局上有直接更改第三方組件樣式成功的小伙伴歡迎告訴我喲?。?/p>

2.解決問題

有一種方法是可以可以用 px2rem-loader 插件可以將第三方ui庫(kù)的px轉(zhuǎn)換成rem單位，我們?cè)趯憳邮降臅r(shí)候用px，這個(gè)插件會(huì)幫我們轉(zhuǎn)換為rem單位。（因?yàn)闀簳r(shí)只是一個(gè)提示框遇到這樣的問題，不想大費(fèi)周章，所以決定暫時(shí)不用，以后再用吧嘿嘿?。?br />

自己寫小組件，在網(wǎng)上沖浪了一會(huì)，選了幾個(gè)小demo實(shí)現(xiàn)可以了下，確實(shí)比較好?。ú捎眠@個(gè)方法?。?br />

3.自定義全局消息組件

大概效果有點(diǎn)模仿 element-ui 中的提示樣式，反正最后效果圖如下：

vue-cli3中component下新建message文件夾，里面再建如下：

Message.vue源代碼如下：

<template>
 <transition name="fade"> <!--這個(gè)是動(dòng)畫的過渡效果-->
 <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">
 /* 動(dòng)畫效果 淡入淡出 */
 .fade-enter-active, .fade-leave-active{
 transition: all 0.5s ease;
 }
 .fade-enter, .fade-leave-active{
 opacity: 0;
 }
 /* 不同的提示語(yǔ)的樣式 */
 .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方法，判斷參數(shù)，使用 $mount() 給組件手動(dòng)掛載參數(shù)，然后將組件插入頁(yè)面中

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

頁(yè)面中調(diào)用：

this.$my_message('你這個(gè)大笨豬吼吼吼！');
this.$my_message('你這個(gè)大笨豬吼吼吼！','success');
this.$my_message({
 content:'服務(wù)器連接失??！', // 彈出的文字內(nèi)容
 time:5000,     // 彈出后多久消失
 type:'success',   // 彈出的消息類型
 hasClose:true,   // 讓按鈕可以被使用，默認(rèn)按鈕是false不可以使用的
 
});

4.注意事項(xiàng)

本Demo中彈出的提示語(yǔ)句中的小圖標(biāo)是iconfont里面的。

總結(jié)

以上所述是小編給大家介紹的解決vue自定義全局消息框組件問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: