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 相关文章推荐
DOM精简教程
Oct 03 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
银行授权委托书样本
2014/10/13 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年共青团工作总结
2015/05/15 职场文书
关于MySQL中explain工具的使用
2023/05/08 MySQL