拆线小球,西安工程大学就业网,上海黄金价格
在最近的项目中，使用了来开发，然而在实际的开发过程中却发现这个ui提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的ui框架的组件呢。
以中的alert组件为例，分一下几步进行：
1、定义一个vue文件实现对原组件的再次封装
main.vue
我要评论
<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 {
/**
* 参考: https://bootstrap-vue.js.org/docs/components/alert
* @param {string|number} msg 弹框内容
* @param {tstring} type 弹出框类型 对应bootstrap-vue中variant 可选值有：'primary'、'secondary'、'success'、'danger'、'warning'、'info'、'light'、'dark'默认值为 'info'
* @param {boolean} autoclose 是否自动关闭弹出框
* @param {number} duration 弹出框存在时间(单位：秒)
* @param {function} closed 弹出框关闭，手动及自动关闭都会触发
*/
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 () {
this.duration = 0
},
countdownchanged (duration) {
this.duration = duration
}
},
computed: {
isautoclose () {
if (this.autoclose) {
return this.duration
} else {
return true
}
}
},
watch: {
duration () {
if (this.duration === 0) {
if (this.closed) this.closed()
}
}
}
}
</script>
<style scoped>
.alert-wrap {
position: fixed;
width: 600px;
top: 80px;
left: 50%;
margin-left: -200px;
z-index: 2000;
font-size: 1.5rem;
}
</style>
这里主要就是对组件参数、回调事件的一些处理，与其他处理组件的情况没有什么区别
2、定义一个js文件挂载到vue上，并和我们定义的组件进行交互
index.js
import alert from './main.vue'
import vue from 'vue'
let alertconstructor = vue.extend(alert)
let instance
let seed = 1
let index = 2000
const install = () => {
object.defineproperty(vue.prototype, '$alert', {
get () {
let id = 'message_' + seed++
const alertmsg = options => {
instance = new alertconstructor({
propsdata: options
})
index++
instance.id = id
instance.vm = instance.$mount()
document.body.appendchild(instance.vm.$el)
instance.vm.$el.style.zindex = index
return instance.vm
}
return alertmsg
}
})
}
export default install
其主要思想是通过调用这个方法给组件传值，然后append到body下
3、最后需要在main.js中use一下
import alert from '@/components/alert/index' vue.use(alert)
4、使用
this.$alert({msg: '欢迎━(*｀∀´*)ノ亻!'})
5、confrim的封装也是一样的
main.vue
<template>
<b-modal
v-if="!destroy"
v-model="isshow"
title="温馨提示"
@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 {
/**
* 参考: https://bootstrap-vue.js.org/docs/components/modal
* @param {boolean} isshow 是否显示modal框
* @param {string|number} msg 展示内容
* @param {boolean} hideheaderclose 是否展示右上角关闭按钮 默认展示
* @param {string} canceltitle 取消按钮文字
* @param {string} oktitle 确定按钮文字
* @param {boolean} nocloseonbackdrop 能否通过点击外部区域关闭弹框
* @param {boolean} nocloseonesc 能否通过键盘esc按键关闭弹框
* @param {function} change 事件触发顺序： show -> change -> shown -> cancel | ok -> hide -> change -> hidden
* @param {function} show before modal is shown
* @param {function} shown modal is shown
* @param {function} hide before modal has hidden
* @param {function} hidden after modal is hidden
* @param {function} ok 点击'确定'按钮
* @param {function} cancel 点击'取消'按钮
* @param {boolean} destroy 组件是否销毁 在官方并没有找到手动销毁组件的方法，只能通过v-if来实现
*/
props: {
isshow: {
type: boolean,
default: true
},
msg: {
type: [string, number],
default: ''
},
hideheaderclose: {
type: boolean,
default: false
},
canceltitle: {
type: string,
default: '取消'
},
oktitle: {
type: string,
default: '确定'
},
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 (this.change) this.change()
},
modalshow () {
if (this.show) this.show()
},
modalshown () {
if (this.shown) this.shown()
},
modalhide () {
if (this.hide) this.hide()
},
modalhidden () {
if (this.hidden) this.hidden()
this.destroy = true
},
modalok () {
if (this.ok) this.ok()
},
modalcancel () {
if (this.cancel) this.cancel()
}
}
}
</script>
index.js
import confirm from './main.vue'
import vue from 'vue'
let confirmconstructor = vue.extend(confirm)
let instance
let seed = 1
let index = 1000
const install = () => {
object.defineproperty(vue.prototype, '$confirm', {
get () {
let id = 'message_' + seed++
const confirmmsg = options => {
instance = new confirmconstructor({
propsdata: options
})
index++
instance.id = id
instance.vm = instance.$mount()
document.body.appendchild(instance.vm.$el)
instance.vm.$el.style.zindex = index
return instance.vm
}
return confirmmsg
}
})
}
export default install
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论