In recent projects,bootstrap-vueTo develop, but in the actual development process, I found that the components provided by this UI cannot achieve the expected effects. Components such as alert and modal must be introduced repeatedly for each page, which is not likeelementIn this way, it can be called through this.$xxx. So the question is, how to call the components we define or components of the UI framework we use through this.$xxx.
bybootstrap-vueIn-houseAlertAs an example, we will proceed in a few steps:
1. Define a vue file to implement re-encapsulation of the original component
<template>
<b-alert
class="alert-wrap pt-4 pb-4"
:show="isAutoClose"
:variant="type" dismissible
:fade="true"
@dismiss-count-down="countDownChanged"
@dismissed="dismiss"
>
{{msg}}
</b-alert>
</template>
<script>
export default {
/**
* Reference: /docs/components/alert
* @param {string|number} msg pop-up content
* @param {tstring} type pop-up box type Corresponding to variant in bootstrap-vue The optional values are: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'. The default value is 'info'.
* @param {boolean} autoClose Whether to automatically close the pop-up box
* @param {number} duration The pop-up box exists in seconds
* @param {function} closed The pop-up box is closed, and manual and automatic closing will trigger
*/
props: {
msg: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'info'
},
autoClose: {
type: Boolean,
default: true
},
duration: {
type: Number,
default: 3
},
closed: {
type: Function,
default: null
}
},
methods: {
dismiss () {
= 0
},
countDownChanged (duration) {
= duration
}
},
computed: {
isAutoClose () {
if () {
return
} else {
return true
}
}
},
watch: {
duration () {
if ( === 0) {
if () ()
}
}
}
}
</script>
<style scoped>
.alert-wrap {
position: fixed;
width: 600px;
top: 80px;
left: 50%;
margin-left: -200px;
z-index: 2000;
font-size: 1.5rem;
}
</style>
Here it mainly deals with component parameters and callback events, which is no different from other processing components.
2. Define a js file to mount it on Vue and interact with the components we define
import Alert from './'
import Vue from 'vue'
let AlertConstructor = (Alert)
let instance
let seed = 1
let index = 2000
const install = () => {
(, '$alert', {
get () {
let id = 'message_' + seed++
const alertMsg = options => {
instance = new AlertConstructor({
propsData: options
})
index++
= id
= instance.$mount()
(.$el)
.$ = index
return
}
return alertMsg
}
})
}
export default install
The main idea is to pass values to the component by calling this method, and then append to the body
3. Finally, you need to use it in the middle
import Alert from '@/components/alert/index' (Alert)
4. Use
this.$alert({msg: 'welcome━(*｀∀´*)ノ只!'})
5. Confrim packaging is the same
<template>
<b-modal
v-if="!destroy"
v-model="isShow"
title="Kind tips"
@change="modalChange"
@show="modalShow"
@shown="modalShown"
@hide="modalHide"
@hidden="modalHidden"
@ok="modalOk"
@cancel="modalCancel"
:centered="true"
:hide-header-close="hideHeaderClose"
:no-close-on-backdrop="noCloseOnBackdrop"
:no-close-on-esc="noCloseOnEsc"
:cancel-title="cancelTitle"
:ok-title="okTitle">
<p class="my-4">{{msg}}</p>
</b-modal>
</template>
<script>
export default {
/**
* Reference: /docs/components/modal
* @param {boolean} isShow Whether to display the modal box
* @param {string|number} msg Display content
* @param {boolean} hideHeaderClose Whether to display the close button in the upper right corner? Default display
* @param {string} cancelTitle Cancel button text
* @param {string} okTitle OK button text
* @param {boolean} noCloseOnBackdrop Can you close the pop-up box by clicking on the external area
* @param {boolean} noCloseOnEsc Can you close the pop-up box through the Esc key on the keyboard
* @param {function} change event triggering order: show -> change -> show -> cancel | ok -> hide -> change -> hidden
* @param {function} show before modal is shown
* @param {function} show modal is shown
* @param {function} hide before modal has hidden
* @param {function} hidden after modal is hidden
* @param {function} ok Click the 'OK' button
* @param {function} cancel Click the 'Cancel' button
* @param {Boolean} destroy Whether the component is destroyed. The official has not found a way to manually destroy the component, it can only be achieved through v-if
*/
props: {
isShow: {
type: Boolean,
default: true
},
msg: {
type: [String, Number],
default: ''
},
hideHeaderClose: {
type: Boolean,
default: false
},
cancelTitle: {
type: String,
default: 'Cancel'
},
okTitle: {
type: String,
default: 'Sure'
},
noCloseOnBackdrop: {
type: Boolean,
default: true
},
noCloseOnEsc: {
type: Boolean,
default: true
},
change: {
type: Function,
default: null
},
show: {
type: Function,
default: null
},
shown: {
type: Function,
default: null
},
hide: {
type: Function,
default: null
},
hidden: {
type: Function,
default: null
},
ok: {
type: Function,
default: null
},
cancel: {
type: Function,
default: null
},
destroy: {
type: Boolean,
default: false
}
},
methods: {
modalChange () {
if () ()
},
modalShow () {
if () ()
},
modalShown () {
if () ()
},
modalHide () {
if () ()
},
modalHidden () {
if () ()
= true
},
modalOk () {
if () ()
},
modalCancel () {
if () ()
}
}
}
</script>
import Confirm from './'
import Vue from 'vue'
let ConfirmConstructor = (Confirm)
let instance
let seed = 1
let index = 1000
const install = () => {
(, '$confirm', {
get () {
let id = 'message_' + seed++
const confirmMsg = options => {
instance = new ConfirmConstructor({
propsData: options
})
index++
= id
= instance.$mount()
(.$el)
.$ = index
return
}
return confirmMsg
}
})
}
export default install
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.