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改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
杏林同学录(七)
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Django-migrate报错问题解决方案
2020/04/21 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python中操作文件的模块的方法总结
2021/02/04 Python
linux面试题参考答案(1)
2016/01/22 面试题
最新自我评价范文
2013/11/16 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
小学教育见习报告
2014/10/31 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏