ant-vue通知提醒框（ Notification ）实现自定义样式

需求：运用ant中通知提醒实现自定义的样式效果；

效果如下：点我之后点击上传按钮去看效果

组件自定义内容支持vueNode |function(h)，我自己是用function(h)来实现的，想用vueNode的可以去vue 官网去查看相应的编码规范，function（h）的其中核心有点像广度遍历似的，大家可以先将要实现的代码先写出来之后再用function(h) 来实现更高效：

我不知道怎么绑定指令，问我的狗子他也不知道，真希望有高人指点一番！！！

 h('页面标签',{props: {'此处写相应的标签属性'},attrs: {'此处可以写相应的样式，绑定class'}，on: {'此处绑定事件，click'}},['此处是子内容，实现也是跟上面一样'])

主要实现代码如下：

遇到一个小问题就是点击icon转换的过程中，颜色没有渲染上，而且位置也发生变化，狗子说，我也没看到什么好的方案，最后用 e.currentTarget.style.color = ‘#3579ff’ 这样实现的

 //上传进度通知栏openNotification() {const key = `open${Date.now()}`this.$notification.open({message: this.formMirrorData.fileName,description: h => {return h('div', null, [h('a-row',{props: {type: 'flex'},attrs: {style: 'margin: 25px 0 10px;'}},[h('a-col',{props: {flex: 'auto'}},[h('a-progress', {props: {percent: this.percent,showInfo: false},attrs: {style: 'width:82%'}}),h('span',{attrs: {style:'color: rgba(0,0,0,.45);font-size: 1em;margin-left: 12px;'}},`${this.percent}%`)]),h('a-col',{props: {flex: '38px'},attrs: {style: 'margin-top:2px;'}},[h('a-space', null, [h('a-icon', {props: {type: this.startOrStopFlag ? 'pause' : 'caret-right'},attrs: {class: ['infoText']},on: {click: e => {this.startOrStopFlag = !this.startOrStopFlag//e.currentTarget 返回其事件监听器触发该事件的元素e.target（事件的目标节点）e.currentTarget.style.color = '#3579ff'}}}),h('a-icon', {props: {type: 'close'},attrs: {class: ['infoText'],style: 'font-size: 12px;'},on: {click: e => {this.$notification.destroy()}}})])])]),h('div',{attrs: {style: 'margin-bottom:20px;font-size:16px'}},bytesToSize(this.fileList[0].size)),h('div',{attrs: {class: ['errorText']}},'Upload is not completed, please do not switch pages!')])},key,duration: null,placement: 'bottomRight',onClose: () => {console.log('Notification was closed. Either the close button was clicked or duration time elapsed.')}})},

ant-vue通知提醒框（ Notification ）实现自定义样式相关推荐

ant design vue中通知提醒框Notification的使用
效果:点击接口,出现提示弹框,数据获取到后在消失 <template><a-button type="primary" @click="openNoti ...
vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）
1.Export2Excel.js 文件内容 /* eslint-disable */ /** 导出Excel需要依赖 * npm install xlsx file-saver -S * npm i ...
notification 通知提醒框使用
notification.error({key:'tip',description: h => {return (<div>点击这里<a href={that.download ...
vue 下拉框默认选中自定义的那一项
在自定义下拉框数据的时候想默认选中特定的一项该怎么办? 1.用使用双向绑定 <select @change="selectColr($event)" v-model=&quo ...
android仿支付宝弹窗,AlipayPassDialog Android 仿支付宝密码键盘弹框，可以自定义样式 Dialog，调节字体颜色大小内容 @codeKK Android开源站...
博客讲解地址,欢迎前往查看欢迎大家 Star,老铁给鼓励呗效果图如下: 主要功能支持自定义文本.颜色.大小支持自定义关闭图标支持弹框样式支持回调函数处理支持数字位置随机 API 方法介绍 ...
vue+antv L7实现高德地图自定义样式和自定义marker
实现思路 1.在index.html中引入antv L7和高德地图 <script src="https://gw.alipayobjects.com/os/antv/pkg/_ant ...
antd notice提醒框 ---Message
import React from 'react' import { Card, Button, notification } from 'antd' import './ui.less' expor ...
企业微信每日给女友推送早安，5分钟快速部署，腾讯云部署版本，每日定时发送，天气，鸡汤，纪念日等信息，可自定义通知提醒名称，聊天界面可置顶，内容可查图片。
企业微信每日给女朋友推送早安,5分钟快速部署,每日定时发送,天气,鸡汤,纪念日等信息,可自定义通知提醒名称,聊天界面可置顶,内容可查图片. 先看效果直接开搞准备工作 1.企业id 2.企业应用se ...
Android 阿里推送实现自定义铃声以及8.0以上横幅通知提醒
自定义提示音: 1.在res下建raw 然后放入自定义提示音,如图: 2.在设置NotificationChannel时 mChannel.setSound(Uri.parse("andro ...

ant-vue通知提醒框（ Notification ）实现自定义样式

ant-vue通知提醒框（ Notification ）实现自定义样式相关推荐

最新文章

热门文章