三分钟学会Vue自定义插件-----实现一个alert/confirm插件
使用Vue开发的过程中,我们会在很多地方用到一些同样的功能,比如说提示弹窗,这种时候我们可以自定义一个插件,方便在多个地方使用。项目目录结构:modules:放置模块的文件夹,里面有一个 alert 文件夹,用于存放 alert 插件 ;Alert.vue:就是我们要在多处用到提示弹窗组件;index.js:对于该自定义插件的一些配置;代码编写:Alert.vue<template>&
·
使用Vue开发的过程中,我们会在很多地方用到一些同样的功能,比如说提示弹窗,这种时候我们可以自定义一个插件,方便在多个地方使用。
项目目录结构:
- modules:放置模块的文件夹,里面有一个 alert 文件夹,用于存放 alert 插件 ;
- Alert.vue:就是我们要在多处用到提示弹窗组件;
- index.js:对于该自定义插件的一些配置;
代码编写:
- Alert.vue
<template>
<!-- 初始状态下隐藏提示框 -->
<div v-show="isShow">
<div class="alert">
<div class="flex">{{msg}}</div>
<!-- alert插件只显示确定按钮 -->
<div v-if="type === 'alert'">
<div class="btnCommon success" @click="close">确定</div>
</div>
<!-- confirm插件显示取消和确定按钮 -->
<div class="space-around" v-else>
<div class="btnCommon cancel" @click="cancelEvent">取消</div>
<div class="btnCommon success" @click="successEvent">确定</div>
</div>
</div>
<!-- 背景遮罩 -->
<div class="mask" @click="closeMask"></div>
</div>
</template>
<script>
export default {
name: 'Alert',
props: {
// 提示信息
msg: {
type: String,
default: ''
},
// 是否显示提示框
isShow: {
type: Boolean,
default: false
},
// 插件类型:alert/confirm
type: {
type: String,
default: 'alert'
},
// confirm插件接收的确认事件
success: {
type: Function,
default: () => {
console.log('点击了success');
}
},
// confirm插件接收的取消事件
cancel: {
type: Function,
default: () => {
console.log('点击了cancel');
}
}
},
methods: {
// 关闭弹窗
close() {
this.isShow = false
},
// alert 插件点击阴影区域关闭弹窗
closeMask() {
if(this.type === 'alert') {
this.close();
}
},
// confirm 插件点击取消触发的事件
cancelEvent() {
this.cancel();
this.close();
},
// confirm 插件点击确定触发的事件
successEvent() {
this.success();
this.close();
}
}
}
</script>
<style lang='scss' scoped>
$btnMain: #009688;
$btnDark: darken($btnMain, 5%);
.alert {
width: 300px;
height: 150px;
position: fixed;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -75px;
padding: 20px 10px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 5px 8px rgba(0, 0, 0, .05);
z-index: 3000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.space-around {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
.btnCommon {
width: 105px;
line-height: 32px;
text-align: center;
border-radius: 6px;
&.success {
background-color: $btnMain;
color: #fff;
cursor: pointer;
&:hover {
background-color: $btnDark;
}
}
&.cancel {
background-color: #ededed;
color: #333;
cursor: pointer;
}
}
.mask {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
left: 0;
top: 0;
overflow: hidden;
z-index: 2000;
}
</style>
- index.js
import AlertComponent from './Alert.vue';
const Alert = {}
// Vue暴露了一个install方法,用于自定义插件
Alert.install = function (Vue) {
// 创建一个子类
const AlertConstructor = Vue.extend(AlertComponent);
// 实例化这个子类
const instance = new AlertConstructor();
// 创建一个div元素,并把实例挂载到div元素上
instance.$mount(document.createElement('div'));
// 将el插入到body元素中
document.body.appendChild(instance.$el);
// 添加实例方法
// alert插件的实例方法:只接收提示信息msg
Vue.prototype.$alert = msg => {
instance.type = 'alert';
instance.msg = msg;
instance.isShow = true;
};
// confirm插件的实例方法,可以接收三个参数
// msg:提示信息
// success:点击确定执行的函数
// cancel:点击取消执行的函数
Vue.prototype.$confirm = (msg, success, cancel) => {
instance.type = 'confirm';
instance.msg = msg;
instance.isShow = true;
if(typeof success !== 'undefined') {
instance.success = success;
}
if(typeof cancel !== 'undefined') {
instance.cancel = cancel;
}
}
}
export default Alert;
至此,我们的自定义插件就差最后点睛一笔了,只需要使用 Vue.use 方法将插件安装进去即可。
- main.js
import Vue from 'vue'
import App from './App.vue'
import alert from './modules/alert'
Vue.config.productionTip = false
Vue.use(alert) // 注意,Vue.use方法必须在new Vue之前被调用
new Vue({
render: h => h(App),
}).$mount('#app')
使用方法:
使用起来很简单,以两个按钮来触发弹窗为例子。
- App.vue
<template>
<div id="app">
<button @click="handleAlert">alert</button>
<button @click="handleConfirm">confirm</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleAlert() {
this.$alert('测试')
},
handleConfirm() {
this.$confirm('测试Confirm', () => {
console.log('这是确定事件');
}, () => {
console.log('这是取消事件');
})
}
}
}
</script>
- 页面效果
- 点击 alert 按钮
- 点击 confirm 按钮
- 点击确定按钮
- 点击取消按钮
这样就实现了一个简单的Vue自定义插件,我们在各个组件中可以很方便地去调用它们。
更多推荐
已为社区贡献6条内容
所有评论(0)