Element Notification通知的實(shí)現(xiàn)示例

更新時(shí)間：2020年07月27日 10:53:36 作者：ForeverJPB.

這篇文章主要介紹了Element Notification通知的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件— 通知

基本用法

<template>
 <el-button
  plain
  @click="open1">
  可自動(dòng)關(guān)閉
 </el-button>
 <el-button
  plain
  @click="open2">
  不會(huì)自動(dòng)關(guān)閉
  </el-button>
</template>

<script>
 export default {
  methods: {
   open1() {
    const h = this.$createElement;

    this.$notify({
     title: '標(biāo)題名稱',
     message: h('i', { style: 'color: teal'}, '這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案')
    });
   },

   open2() {
    this.$notify({
     title: '提示',
     message: '這是一條不會(huì)自動(dòng)關(guān)閉的消息',
     duration: 0
    });
   }
  }
 }
</script>

帶有傾向性

<template>
 <el-button
  plain
  @click="open1">
  成功
 </el-button>
 <el-button
  plain
  @click="open2">
  警告
 </el-button>
 <el-button
  plain
  @click="open3">
  消息
 </el-button>
 <el-button
  plain
  @click="open4">
  錯(cuò)誤
 </el-button>
</template>

<script>
 export default {
  methods: {
   open1() {
    this.$notify({
     title: '成功',
     message: '這是一條成功的提示消息',
     type: 'success'
    });
   },

   open2() {
    this.$notify({
     title: '警告',
     message: '這是一條警告的提示消息',
     type: 'warning'
    });
   },

   open3() {
    this.$notify.info({
     title: '消息',
     message: '這是一條消息的提示消息'
    });
   },

   open4() {
    this.$notify.error({
     title: '錯(cuò)誤',
     message: '這是一條錯(cuò)誤的提示消息'
    });
   }
  }
 }
</script>

自定義彈出位置

<template>
 <el-button
  plain
  @click="open1">
  右上角
 </el-button>
 <el-button
  plain
  @click="open2">
  右下角
 </el-button>
 <el-button
  plain
  @click="open3">
  左下角
 </el-button>
 <el-button
  plain
  @click="open4">
  左上角
 </el-button>
</template>

<script>
 export default {
  methods: {
   open1() {
    this.$notify({
     title: '自定義位置',
     message: '右上角彈出的消息'
    });
   },

   open2() {
    this.$notify({
     title: '自定義位置',
     message: '右下角彈出的消息',
     position: 'bottom-right'
    });
   },

   open3() {
    this.$notify({
     title: '自定義位置',
     message: '左下角彈出的消息',
     position: 'bottom-left'
    });
   },

   open4() {
    this.$notify({
     title: '自定義位置',
     message: '左上角彈出的消息',
     position: 'top-left'
    });
   }
  }
 }
</script>

帶有偏移

<template>
 <el-button
  plain
  @click="open">
  偏移的消息
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify({
     title: '偏移',
     message: '這是一條帶有偏移的提示消息',
     offset: 100
    });
   }
  }
 }
</script>

使用 HTML 片段

<template>
 <el-button
  plain
  @click="open">
  使用 HTML 片段
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify({
     title: 'HTML 片段',
     dangerouslyUseHTMLString: true,
     message: '<strong>這是 <i>HTML</i> 片段</strong>'
    });
   }
  }
 }
</script>

隱藏關(guān)閉按鈕

<template>
 <el-button
  plain
  @click="open">
  隱藏關(guān)閉按鈕
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify.success({
     title: 'Info',
     message: '這是一條沒有關(guān)閉按鈕的消息',
     showClose: false
    });
   }
  }
 }
</script>

全局方法

Element 為 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本頁(yè)面中的方式調(diào)用 Notification。

單獨(dú)引用

Options

方法

Vue項(xiàng)目中Element的Notification通知若干問題

要求是后臺(tái)推送過來一條消息，前端接收后再將消息進(jìn)行提煉后通過彈窗通知用戶。前后端發(fā)送接收消息用的技術(shù)是webIm,這個(gè)先不提了，官方文檔配置一下就OK了。

遇到的問題是產(chǎn)品給的設(shè)計(jì)圖與Element的出入很大，所以就使用了Element的dangerouslyUseHTMLString屬性，即把需要發(fā)送的消息寫成HTML結(jié)構(gòu)發(fā)送

在模板字符串中，加載圖片那里發(fā)現(xiàn)路徑無法實(shí)現(xiàn)圖片的加載，試了很多種方法，發(fā)現(xiàn)使用require+${}的方法最好用，上圖中<img src=${this.imgUrlNormal}>中，${}保存的地址需要先在data里邊return出來

這個(gè)問題就解決了。

第二個(gè)問題是遇到了樣式的調(diào)整問題，Element的權(quán)重太高，真的是不太好搞，在網(wǎng)上找了很多解決方案，發(fā)現(xiàn)把<style>標(biāo)簽中的scoped去掉這種方法可以解決問題。

并且用到了costomClass這個(gè)屬性，這個(gè)屬性是給元素添加一個(gè)class類名，自己來添加樣式。

這樣，這個(gè)彈窗的問題就解決了。

到此這篇關(guān)于Element Notification通知的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Element Notification通知內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: