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 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
js中如何完美的解析数据
Mar 18 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
基于jquery的拖动布局插件
2011/11/25 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Django 多环境配置详解
2019/05/14 Python
三个python爬虫项目实例代码
2019/12/28 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
继电保护工岗位职责
2014/01/05 职场文书
小学教师师德反思
2014/02/03 职场文书
标准毕业生自荐信
2014/06/24 职场文书
施工安全汇报材料
2014/08/17 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
一文搞懂Python Sklearn库使用
2021/08/23 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫