Vue Element UI 之使用 Notification 组件--报错 this.$notify is not a function
意欲寻找一个良好的警告提示,发现 Notification 还不错
1、在 template 中
<el-button plain @click="warnMoodIndex"> 警告 </el-button>
2、在 script 的 method 中
warnMoodIndex() {
this.$notify({
title: '警告',
message: '请选择心情指数,该数据项将用于分析您的心情趋势',
type: 'warning'
});
}
bug 1(得到解决)
报错:this.$notify is not a function
嗯?百度一下看看啥原因。找到一篇老外的文章(https://stackoverflow.com/questions/59116186/mocha-chai-vue-testing-a-vue-component-this-notify-is-not-a-function),试一试感觉还可以,报错没有了。操作如下:
1、安装 vue-notification
cnpm install --save vue-notification
2、引入和组测组件
// 在 main.js 页面
import Notifications from "vue-notification"
Vue.use(Notifications)
bug 2(尚未解决)
报错解决了,但是点击按钮之后丝毫没有反应,通知消息的弹框并没有出来。那继续修改代码:
// 在 element.js 页面
import { Notification } from 'element-ui'
Vue.use(Notification)
bug 3(尚未解决)
嗯……弹框出来了,but,为什么是刷新页面自己弹出来的,点击按钮反而没有反应……
额……放弃
Message 消息提示、MessageBox 弹框、Notification 通知等方法的调用方式和在.vue文件中时不一样的,这一点要注意,他们是ElementUI中这项方法的封装的原始方法
ElementUI.Message
对应的是this.$message
方法
ElementUI.Notification
对应的是this.$notify
方法
ElementUI.MessageBox
对应的是this.$alert
方法
console.log(ElementUI)就可以知道原因
参考:https://www.cnblogs.com/aidixie/p/10904693.html
============================ 更新 ============================
下面是来自评论的解决方案,我没有进行尝试和确认,但是感觉是正确的
小小一声雷:我最近也遇到这个问题,不过已经解决了:
第一个问题是引用的方法不对,官网上写了$notify引入方法,和Notification引用方法,第一种引入方法我还不太清楚,但是第二种方法也可行,就是像引入正常组件的方法引入Notification,然后不能通过Vue.use(Notification)绑定而是Vue.prototype.Notification = Notification
,否则会出现刷新页面时就会调用一次,而且在页面中调用也会报错。
用法:
this.Notification({
title: '提示',
message: “”,
duration: 0,
position: 'bottom-right'
})
这样bug1、bug2、bug3都解决啦
十分感谢小小一声雷
更多推荐
所有评论(0)