新建文件夹 hlAlert
在hlAlert文件夹下新建组件模板的HlAlert.vue文件
在hlAlert文件夹下新建对应组件模板的index.js文件
目录结构
HlAlert.vue文件写好组件的正常逻辑(样式没有贴进来)
<template>
<div class="hl-pop-wrap">
<div class="hl-pop-wrap-bg" @click="close(1)"></div>
<div class="hl-pop-content">
<div class="hl-alert-close" @click="close(1)" v-if="isCloseIcon">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="hl-pop-title" v-html="title" v-if="title"></div>
<div class="hl-pop-detail">
<div v-html="message" v-if="message" class="hl-pop-message"></div>
<div v-html="subMessage" v-if="subMessage" class="hl-pop-submessage"></div>
</div>
<div class="hl-alert-btn-group">
<button class="u-hl-base-btn u-alert-ensure" @click="ensure">{{ensureBtnText}}</button>
<button class="u-hl-base-btn u-alert-close" @click="close(2)">取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
message: '111'
}
},
methods: {
ensure () {
this.ensureHanlder()
this.$el.parentNode.removeChild(this.$el)
},
close (mode) {
mode === 2 && this.cancelHandler()
this.$el.parentNode.removeChild(this.$el)
}
}
}
</script>
index.js文件代码如下：
// index.js文件
import Vue from 'vue'
import HlAlert from './HlAlert'
HlAlert.install = function (options, ensureHanlder, cancelHandler) {
if (!ensureHanlder) {
ensureHanlder = function () {}
}
if (!cancelHandler) {
cancelHandler = function () {}
}
// 定义data
if (!options) {
options = {}
}
options['message'] = options.message ? options.message : '' // 一级标题
options['title'] = options.title ? options.title : '' // 弹窗顶部信息
options['subMessage'] = options.subMessage ? options.subMessage : '' // 提示内容
options['isCloseIcon'] = options.isCloseIcon || false // 弹窗顶部关闭按钮是否展示
options['ensureBtnText'] = options.ensureBtnText ? options.ensureBtnText : '确认' // 自定义确认按钮文字
const MyHlAlert = Vue.extend(HlAlert)
// 创建一个vue的实例
const currentComponent = new MyHlAlert({
data: options,
methods: {
ensureHanlder, // 确认按钮回调
cancelHandler // 取消按钮回调
}
}).$mount()
document.querySelector('body').appendChild(currentComponent.$el)
}
export default HlAlert
install 方法步骤如下
① 使用vue.extend扩展HlAlert.vue
② 创建一个vue的实例
创建vue实例时可以传递参数，用来和父组件进行交互
③ 挂载到DOM节点上
去main.js里注册好
import HlAlert from './components/hlAlert'
Vue.$HlAlert = Vue.prototype.$HlAlert = HlAlert.install
组件的API如下：
| options组件属性 | 说明 |
|---|---|
| title | 弹窗顶部的内容 |
| message | 提示信息的一级标题，样式有加粗 |
| subMessage | 提示信息的内容 |
| isCloseIcon | 弹窗的关闭按钮是否展示。默认false |
| ensureBtnText | 自定义弹窗确认按钮。默认“确认” |
| events | 说明 |
|---|---|
| 第二个参数 ensureHanlder | 确认按钮回调 |
| 第三个参数 cancelHandler | 取消按钮回调 |
使用的时候就可以用如下代码：
this.$HlAlert({
title: '信息提示',
subMessage: '这是一个信息提示弹窗',
ensureBtnText: '知道了',
message: '你好',
isCloseIcon: true
},
() => { console.log('确认按钮回调') ,
() => { console.log('取消按钮回调')
})
点击页面上的弹窗按钮后就可以看到提示该组件了
image.png
