V01 Vue.js 实战教程 - 基础篇5.3. 添加修改提示
简介
本小节中，我们将利用之前写的 Message 组件来写一个新的插件，以简化使用消息组件的方式。
添加消息插件
先看看我们之前使用 <Message> 组件所需的代码：
data() {
return {
msg: '', // 消息
msgType: '', // 消息类型
msgShow: false // 是否显示消息，默认不显示
}
},
methods: {
showMsg(msg, type = 'warning') {
this.msg = msg
this.msgType = type
this.msgShow = false
this.$nextTick(() => {
this.msgShow = true
})
}
}我们要先定义数据，然后添加方法，这里用到的代码不算少，且使用越多代码越臃肿。我们下面就写一个新插件，来改善这种情况。
打开 src/plugins 文件夹，新建 message.js 文件，复制贴入以下代码：
src/plugins/message.js
import MessageComponent from '../components/Message'
export default {
install: (Vue) => {
const Message = Vue.extend(MessageComponent)
cons...
关于 LearnKu
粤公网安备 44030502004330号