調(diào)用式組件
調(diào)用式組件這個名詞應(yīng)該不是官方的，因為在網(wǎng)上找了一大圈都沒有發(fā)現(xiàn)這種組件的官方稱呼，但是在很多開源的VueUI中都有這種組件存在，而且是一種很關(guān)鍵的組件。
例如Element UI 中的 Alert MessageBox Message Toast 等等等。
舉個例子就很容易明白什么是調(diào)用式
new Vue({
methods: {
handleClick () {
this.$alert('這是一個alert')
}
}
})
看完之后就發(fā)現(xiàn)超簡單吧。
為什么要專門說它
emmm 因為在平常開發(fā)中寫一個alert感覺怪怪的，但好像又沒有什么問題?。?！
那還是舉個例子
<html>
<body>
<div id="app">
<div class="alert" v-if="isAlertOne"></div>
<div class="alert" v-if="isAlertTwo"></div>
<div class="alert" v-if="isAlertThree"></div>
</div>
<script>
new Vue({
data () {
return {
isAlertOne: false,
isAlertTwo: false,
isAlertThree: false,
}
}
})
</script>
</body>
</html>
平時開發(fā)的情形基本就如上述一樣，通過data里面的數(shù)據(jù)控制，如果有多個alert那就要寫特別特別多的列在一起，而data中要維護各種判斷條件。如果alert中有一些其他的變量，那維護的東西就更亂了
稍微優(yōu)化一點的是吧alert抽成組件，但還是避免不了的要把用到的alert組件都羅列到html中。
雖然可以實現(xiàn)alert的功能，但是有點反人類的感覺。
正常的邏輯是alert是什么樣的，我調(diào)用的時候生成，關(guān)閉的時候就移除了。
如何開發(fā)調(diào)用式的組件
既然上面說到了種類組件要手動調(diào)用，而不是維護一大堆狀態(tài)
看了下 element 源碼，也自己實現(xiàn)了一個alert，放在了GIthub上。
// https://github.com/HaoYS/SongUI/blob/master/packages/alert/index.js
import Alert from './src/main.js'
Alert.install = function (Vue) {
if(Vue.prototype.$alert) return
Vue.prototype.$alert = Alert
}
export default Alert
// https://github.com/HaoYS/SongUI/blob/master/packages/alert/src/main.js
import Vue from 'vue'
import Main from './main.vue'
const Alert = function (message, title, opt) {
let Constructor = Vue.extend(Main)
let alert = new Constructor({
propsData: Object.assign({
message, title
}, opt)
})
alert.$mount()
document.body.appendChild(alert.$el)
}
export default Alert
<template>
<div class="alert" ref="wrapper">
<div class="content">
<div class="title">
<span>{{title}}</span>
</div>
<div class="msg">
<p>{{message}}</p>
</div>
<div class="button-group">
<song-button @click="handleCancel">{{cancelButtonText}}</song-button>
<song-button @click="handleConfirm">{{confirmButtonText}}</song-button>
</div>
</div>
</div>
</template>
<script>
import SongButton from '../../button/src/main.vue'
//構(gòu)造組件的選項
export default {
name: 'SongUIAlert',
components: {SongButton},
props: {
title: {
type: String,
required: true
},
message: {
type: String,
required: true
},
callback: {
type: Function
},
cancelButtonText: {
type: String,
default: '取消'
},
confirmButtonText: {
type: String,
default: '確定'
}
},
methods: {
handleCancel () {
this.callback && this.callback('cancel')
this.$el.remove()
},
handleConfirm () {
this.callback && this.callback('confirm')
this.$el.remove()
}
}
}
</script>
通過上面的方法可以看到，比較規(guī)范的組件開發(fā)是通過在install方法中實現(xiàn)創(chuàng)建一個新的Vue組件實例。
而使用方法就是簡單的
import Vue from 'vue'
import SongUI, { Button, Toast, Alert } from '../src/index'
// Vue.use(Button)
// Vue.use(Toast)
// Vue.use(Alert)
Vue.use(SongUI)
window.vm = new Vue({
el: '#app',
data() {
return {
msg: 'msg'
}
},
methods: {
handleAlert () {
this.$alert('這是一個msg', '這是一個title', {
callback: action => {
console.log(action)
}
})
}
}
})
