在開發vue項目時,經常會用到element UI組件,在全局使用像message,toast,alert等組件得時候會很方便,但是在開發需要UI制定的項目時,就不能使用element UI了,這時就需要自己去開發屬於自己的組件庫了。
具體的開發方法官網提供了。下面我們就根據官網提供的方法來開發屬於我們自己的alert警告組件
- 首先我們要在src/components文件夾下創建一個alert文件夾,在裏面創建兩個文件
├── src
│ ├── components
│ │ ├── alert
│ │ │ ├── alert.vue #alert組件
│ │ │ ├── index.js #插件邏輯
- 編寫alert組件
<template>
<transition name="alert-fade">
<div
class="ht-message"
v-if="show"
>
<div
class="ht-model"
@click="close"
></div>
<div
class="ht-message-box"
:style="'width:'+width"
>
<div class="ht-message-header">
<i
class="iconfont icon-error ht-message-close"
@click="close"
></i>
</div>
<div class="ht-message-body">
{{message}}
</div>
<div class="ht-message-footer">
<slot name="footer">
<div
class="ht-message-btn"
@click="close"
>
確定
</div>
</slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Alert',
props: {
width: {
//彈框的寬度
type: String,
required: false,
default: '30%'
}
},
data() {
return {
show: false
}
},
methods: {
close() {
this.show = false
this.$el.remove() //再點擊關閉得時候要將其移出,(僅在第一種方法中使用)
this.confirmSure()
}
}
}
</script>
<style scoped lang="less">
.alert-fade-enter-active,
.alert-fade-leave-active {
transition: opacity 0.3s;
}
.alert-fade-enter,
.alert-fade-leave-to {
opacity: 0;
}
.ht-message {
.ht-model {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
background: rgba(0, 0, 0, 0.5);
}
.ht-message-box {
position: fixed;
top: 50%;
left: 50%;
z-index: 501;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 5px 10px;
.ht-message-body {
text-align: center;
font-size: 18px;
color: #333;
}
.ht-message-header {
height: 30px;
.ht-message-close {
float: right;
padding: 5px 10px;
margin: -5px -10px;
cursor: pointer;
color: #666;
}
}
.ht-message-footer {
width: 100%;
.ht-message-btn {
margin: 40px auto 30px;
padding: 0 30px;
width: 200px;
height: 40px;
font-size: 18px;
color: #fff;
background-color: #ff3f47;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
}
}
}
</style>
- 現在就要index.js中註冊組件並完成業務邏輯了,(在這裏我們要注意,如果我們要在除了vue組件以外的地方使用得話,例如我們封裝的api.js裏如果需要alert某些請求狀態的時候,需要下面第一種寫法)
import AlertComponent from './alert.vue'
import Vue from 'vue'
const Alert = (msg, confirmSure = () => {}) => {
const Constructor = Vue.extend(AlertComponent) //創建一個alert子實例
let instance = new Constructor({
el: document.createElement('div'), //將alert實例掛載到創建的div上
data() {
return {
message: msg, //需要顯示的信息
show: true //在調用alert時顯示組件
}
},
methods: {
confirmSure: confirmSure //點擊關閉的時候觸發的回調函數
}
})
document.body.appendChild(instance.$el) //添加到body中
}
export default Alert
但是如果我們只是在vue組件中使用的話,使用下面第二種註冊方法
import AlertComponent from './alert.vue'
const Alert = {
install(Vue) {
const Constructor = Vue.extend(AlertComponent) //創建一個alert子實例
let instance = new Constructor({
el: document.createElement('div') //將alert實例掛載到創建的div上
})
document.body.appendChild(instance.$el) //添加到body中
//綁定到vue原型上,以供全局使用
Vue.prototype.$alert = (msg, confirmSure = () => {}) => {
instance.message = msg //需要顯示的信息
instance.show = true //在調用alert時顯示組件
instance.confirmSure = confirmSure //點擊關閉的時候觸發的回調函數
}
}
}
export default Alert
- 最後我們在main.js引入的時候也需要注意,如果我們要在組件和組件以外的情況下使用alert的話,我們需要這樣引入
import Alert from '@/components/alert'
Vue.prototype.$alert = Alert
再如果我們只是在vue組件裏使用的話,我們要這樣引入
import Alert from '@/components/alert'
Vue.use(Alert)
- 最後我們就可以愉快的調用組件了
//調用方法(組件以外的調用方式)
import Alert from '@/components/alert'
Alert('用戶會話過期,請重新登錄', () => {
console.log('我被調用了')
})
組件內使用
this.$alert('用戶會話過期,請重新登錄', () => {
console.log('我被調用了')
})