Vue实现Alert插件

实现alert插件

在Vue中我们可以使用 Vue.component(tagName, options) 进行全局注册，也可以是在组件内部使用 components 选项进行局部组件的注册。

全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。

有一些全局组件，类似于Message 、Toast 、 Loading 、 Notification 、Alert 通过原型的方式挂载在 Vue 的全局上面。

下面来实现一个简易版 Alert 组件，主要是对思路的一个理解,先上效果图

@/components/alert/src/Alert.vue

<template><transition name="fade"><div class="alert-box-wrapper" v-show="show"><div class="alert-box"><div class="alert-box-header"><div class="alert-box-title">{{ title }}</div><div class="alert-box-headerbtn" @click="handleAction('close')">X</div></div><div class="alert-box-content"><div class="alert-box-container">{{ message }}</div></div><div class="alert-box-btns"><button class="cancel-btn"  @click="handleAction('cancel')">{{ cancelText }}</button><button class="confirm-btn"  @click="handleAction('confirm')">{{ confirmText }}</button></div></div></div></transition>
</template><script>
export default {name: 'Alert',data () {return {title: '标题',message: '这是一段提示内容',show: false,callback: null,cancelText: '取消',confirmText: '确定'}},methods: {handleAction (action) {this.callback(action)this.destroyVm()},destroyVm () { // 销毁this.show = falsesetTimeout(() => {this.$destroy(true)this.$el && this.$el.parentNode.removeChild(this.$el)}, 500)}}
}
</script><style lang="less" scoped>
.fade-enter-active, .fade-leave-active {transition: opacity .3s;
}
.fade-enter, .fade-leave-to  {opacity: 0;
}.alert-box-wrapper {position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;background: rgba(0, 0, 0, 0.5);.alert-box {display: inline-block;width: 420px;padding-bottom: 10px;background-color: #fff;border-radius: 4px;border: 1px solid #303133;font-size: 16px;text-align: left;overflow: hidden;.alert-box-header {position: relative;padding: 15px;padding-bottom: 10px;.alert-box-title {color: #303133;}.alert-box-headerbtn {position: absolute;top: 15px;right: 15px;cursor: pointer;color: #909399;}}.alert-box-content {padding: 10px 15px;color: #606266;font-size: 14px;}.alert-box-btns {padding: 5px 15px 0;text-align: right;.cancel-btn {padding: 5px 15px;background: #fff;border: 1px solid #dcdfe6;border-radius: 4px;outline: none;cursor: pointer;}.confirm-btn {margin-left: 6px;padding: 5px 15px;color: #fff;background-color: #409eff;border: 1px solid #409eff;border-radius: 4px;outline: none;cursor: pointer;}}}
}
</style>

@/components/alert/index.js

import Alert from './src/Alert'export default {install (Vue) {// 创建构造类const AlertConstructor = Vue.extend(Alert)const showNextAlert = function (args) {// 实例化组件const instance = new AlertConstructor({el: document.createElement('div')})// 设置回调函数instance.callback = function (action) {if (action === 'confirm') {args.resolve(action)} else if (action === 'cancel' || action === 'close') {args.reject(action)}}// 处理参数for (const prop in args.options) {instance[prop] = args.options[prop]}// 插入Bodydocument.body.appendChild(instance.$el)Vue.nextTick(() => {instance.show = true})}const alertFun = function (options) {if (typeof options === 'string' || options === 'number') {options = {message: options}if (typeof arguments[1] === 'string') {options.title = arguments[1]}}return new Promise((resolve, reject) => {showNextAlert({options,resolve: resolve,reject: reject})})}Vue.prototype.$alert = alertFun}
}

@/main.js

import Alert from '@/components/alert'
Vue.use(Alert)

使用

this.$alert({message: '描述描述描述',title: '提示',cancelText: '不',confirmText: '好的'
}).then(action => {console.log(`点击了${action}`)
}).catch(action => {console.log(`点击了${action}`)
})
// 或
this.$alert('描述描述描述', '提示').then(action => {console.log(`点击了${action}`)
}).catch(action => {console.log(`点击了${action}`)
})

Vue实现Alert插件相关推荐

前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
VUE 集成 LODOP插件打印
VUE 集成LODOP插件打印 VUE 集成LODOP插件打印 Lodop.C-Lodop使用说明及样例 VUE简单使用lodop 1.创建LodopFuncs.js文件 2.在打印功能vue页面引入 ...
[vue] 组件和插件有什么区别？
[vue] 组件和插件有什么区别? 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue.插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 V ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
vue连线插件_一起写一个即插即用的 Vue Loading 插件
写在之前实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...
JQuery的Alert插件介绍
有没有厌倦了原来那alert那个风格,总是一个感叹号.有时使得UE不好,今天我们介绍使用Jquery Alert插件 ,使用它可以用来替换JScript中的alert,confirm,prompt 下 ...
VUE颜色选择器插件vColorPicker
VUE颜色选择器插件vColorPicker 官网 vColorPicker官网跳转一.安装 npm install vcolorpicker -S 二.在 main.js 文件中引入插件并注册 / ...

Vue实现Alert插件

实现alert插件

Vue实现Alert插件相关推荐

最新文章

热门文章