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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
采用call方式实现js继承
May 20 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
vue实现弹幕功能
Oct 25 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
php 数组元素快速去重
2017/05/05 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python中删除文件的程序代码
2011/03/13 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python接口自动化测试的实现
2020/08/28 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
使用Python实现音频双通道分离
2020/12/25 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
心理学专业求职信
2014/06/16 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python