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 相关文章推荐
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 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
目录,文件操作详谈―PHP
2006/11/25 PHP
PHP生成静态页面详解
2006/12/05 PHP
DISCUZ 分页代码
2007/01/02 PHP
PHP数组操作类实例
2015/07/11 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
javascript中的面向对象
2017/03/30 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
微信小程序制作表格的方法
2019/02/14 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
物流管理专业职业生涯规划书
2014/01/06 职场文书
优秀村官事迹材料
2014/01/10 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
生日庆典策划方案
2014/06/02 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
小学教师工作总结2015
2015/04/07 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Redis基本数据类型String常用操作命令
2022/06/01 Redis
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers