Element Notification通知的实现示例


Posted in Javascript onJuly 27, 2020

组件— 通知

基本用法

Element Notification通知的实现示例

Element Notification通知的实现示例

<template>
 <el-button
  plain
  @click="open1">
  可自动关闭
 </el-button>
 <el-button
  plain
  @click="open2">
  不会自动关闭
  </el-button>
</template>

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

    this.$notify({
     title: '标题名称',
     message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
    });
   },

   open2() {
    this.$notify({
     title: '提示',
     message: '这是一条不会自动关闭的消息',
     duration: 0
    });
   }
  }
 }
</script>

带有倾向性

Element Notification通知的实现示例

<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: '这是一条成功的提示消息',
     type: 'success'
    });
   },

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

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

   open4() {
    this.$notify.error({
     title: '错误',
     message: '这是一条错误的提示消息'
    });
   }
  }
 }
</script>

自定义弹出位置

Element Notification通知的实现示例

<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>

带有偏移

Element Notification通知的实现示例

Element Notification通知的实现示例

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

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

使用 HTML 片段

Element Notification通知的实现示例

Element Notification通知的实现示例

<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>

隐藏关闭按钮

Element Notification通知的实现示例

Element Notification通知的实现示例

<template>
 <el-button
  plain
  @click="open">
  隐藏关闭按钮
 </el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$notify.success({
     title: 'Info',
     message: '这是一条没有关闭按钮的消息',
     showClose: false
    });
   }
  }
 }
</script>

全局方法

Element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 Notification。

单独引用

Element Notification通知的实现示例

Options

Element Notification通知的实现示例
Element Notification通知的实现示例

方法

Element Notification通知的实现示例

Vue项目中Element的Notification通知若干问题

要求是后台推送过来一条消息,前端接收后再将消息进行提炼后通过弹窗通知用户。前后端发送接收消息用的技术是webIm,这个先不提了,官方文档配置一下就OK了。

遇到的问题是产品给的设计图与Element的出入很大,所以就使用了Element的dangerouslyUseHTMLString属性,即把需要发送的消息写成HTML结构发送

Element Notification通知的实现示例

在模板字符串中,加载图片那里发现路径无法实现图片的加载,试了很多种方法,发现使用require+${}的方法最好用,上图中<img src=${this.imgUrlNormal}>中,${}保存的地址需要先在data里边return出来

Element Notification通知的实现示例

这个问题就解决了。

第二个问题是遇到了样式的调整问题,Element的权重太高,真的是不太好搞,在网上找了很多解决方案,发现把<style>标签中的scoped去掉这种方法可以解决问题。

并且用到了costomClass这个属性,这个属性是给元素添加一个class类名,自己来添加样式。

这样,这个弹窗的问题就解决了。

到此这篇关于Element Notification通知的实现示例的文章就介绍到这了,更多相关Element Notification通知内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
JavaScript中的闭包
Feb 24 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
You might like
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python 字符串操作方法大全
2014/03/11 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python修改字典键(key)的方法
2019/08/05 Python
python_mask_array的用法
2020/02/18 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
比赛口号大全
2014/06/10 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书