vue.use的项目使用和详解
Vue.use()的项目使用和详解
vue之封装loading加载框
1、以loading组件讲解 Loading.vue 中定义一个组件
<template>
<div v-if="show" class="loading-container">
<div class="loading-mask"></div>
<div class="loading-content">
<div class="loading-animate"></div>
<!-- <div class="loading-text">{{ text }}</div> -->
</div>
</div>
</template>
<script>
export default {
name: 'Loading',
props: {
show: Boolean,
},
data() {
return {
text: 'loading...',
}
},
}
</script>
<style lang="scss" scoped>
.loading-container {
position: relative;
z-index: 9999;
.loading-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.1);
}
.loading-content {
position: fixed;
left: 50%;
top: 45%;
z-index: 300;
transform: translate(-50%, -45%);
text-align: center;
.loading-animate {
display: inline-block;
width: 35px;
height: 35px;
margin: 25px 0 10px;
vertical-align: middle;
animation: cricleLoading 1s steps(12, end) infinite;
background: transparent
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=')
no-repeat;
background-size: 100%;
}
.loading-text {
font-size: 14px;
font-weight: 600;
color: #808085;
}
}
}
@-webkit-keyframes cricleLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes cricleLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
</style>
2、在 loading.js 中 引入 loading.vue，并导出
import LoadingComponent from '@/components/Loading/loading.vue'
const loading = {
// install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
install: function (Vue) {
// 创建一个Vue的“子类”组件
const LoadingConstructor = Vue.extend(LoadingComponent)
// 创建一个该子类的实例,并挂载到一个元素上
const instance = new LoadingConstructor()
// 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
// 在Vue的原型链上注册方法，控制组件
Vue.prototype.$loading = {
show: () => {
instance.show = true
},
hide: () => {
instance.show = false
},
}
window.$loading = Vue.prototype.$loading
},
show: function () {
console.log('show')
}
}
export default loading
3、main.js中使用
import Loading from '@/utils/loading'
Vue.use(Loading)
4、其他组件中使用
注意，我已经把loading注册到Vue的原型链上注册方法，可以直接使用
vue之封装element的弹框
1、Confirm.vue
<script>
export default {
methods: {
async confirm(e, message) {
const windowHeight =
window.innerHeight ||
window.document.clientHeight ||
window.body.clientHeight
let cTopOffset = 12
let cLeftOffset = 30
if (e.clientY > windowHeight - 145) {
cTopOffset = -130
}
document.documentElement.style.setProperty(
'--c-left',
e.clientX + cLeftOffset + 'px'
)
document.documentElement.style.setProperty(
'--c-top',
e.clientY + cTopOffset + 'px'
)
try {
await this.$confirm(message, '', {
center: true,
modal: false,
customClass: 'c-confirm',
cancelButtonClass: 'btn-cancel',
confirmButtonClass: 'btn-confirm'
})
return true
} catch (error) {
return false
}
}
}
}
</script>
<style lang="scss">
:root {
--c-left: 0;
--c-top: 0;
}
.c-confirm {
position: absolute;
left: var(--c-left);
top: var(--c-top);
width: 246px;
height: 119px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(167, 167, 167, 0.5);
padding-top: 24px;
.el-message-box__header {
display: none;
}
.el-message-box__btns {
margin-top: 20px;
height: 28px;
button {
height: 28px;
line-height: 28px;
padding: 0 23px;
border-radius: 6px;
&.btn-confirm {
background: #4646e6;
margin-left: -150px;
}
&.btn-cancel {
color: #4646e6;
border: 1px solid #4646e6;
}
}
}
.el-message-box__content {
padding: 0;
}
}
</style>
2、confirm.js
import ConfirmComponent from '@/components/Confirm'
const Confirm = {
install: function (Vue) {
// 创建一个Vue的“子类”组件
const ConfirmConstructor = Vue.extend(ConfirmComponent)
// 创建一个该子类的实例,并挂载到一个元素上
const instance = new ConfirmConstructor()
// 在Vue的原型链上注册方法，控制组件
Vue.prototype.$cConfirm = {
confirm: (e, message) => {
instance.confirm(e, message)
}
}
}
}
export default Confirm
3、main.js中引入
import Confirm from '@/utils/confirm'
Vue.use(Confirm)
4、页面中使用
<img
src="@/assets/img/icon-detele@2x.png"
@click.stop="handleRemoveComment($event, item.id)"
v-if="item.commentatorId === userAccountId"
/>
async handleRemoveComment(e, id) {
if (!(await this.$cConfirm.confirm(e, '是否删除该条评论'))) return
try {
this.$loading.show()
// 删除评论
const res = await removeComment({ id })
this.$loading.hide()
if (res.code === 0) {
this.$message.success('删除成功')
this.resetOption()
this.initComments()
} else {
this.resetOption()
this.$message.error(res.message)
}
} catch (error) {
this.$loading.hide()
console.error(error)
this.$message.error('操作失败')
this.resetOption()
}
},
总结使用
问：vue实际项目开发中，公共js(全局引入)文件如何写，如何引入到入口文件main.js？
公共js文件，比如 commen.js 通过 export default 暴露出来
export default {
install(Vue, options){
Vue.prototype.方法名 = function(){}
}
在入口文件main.js引入：
import comm form './assets/js/commen'
Vue.use(comm);
然后就可以全局使用commen.js里面的方法了，this.方法名
vue.use原理
官方给的文档说明
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install方法。install 方法调用时，会将 Vue 作为参数传入。
Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法， 之后会将 Vue 作为参数传入。
理解：
1、参数为函数时，函数的参数是Vue对象；
2、参数为对象时，它提供的install方法中参数是Vue对象；
1、参数为函数时
// vue.use理解
// 可以新建一个 test.js, 尝试参数为函数时 Vue.use() 的情况 test.js文件内容如下 这里直接在main.js中测试
function test (Vue){
console.log('vue=', Vue)
}
// 之后在main.js, 这里直接在main.js中使用 Vue.use() 调用
Vue.use(test)
2、参数为对象时
// vue.use理解
// 可以新建一个 test.js, 尝试参数为函数时 Vue.use() 的情况 test.js文件内容如下 这里直接在main.js中测试
const test = {
// 参数为对象时，需要提供install方法
install: (Vue) => {
console.log('obj=', Vue)
}
}
// 之后在main.js引入test.js，并且使用 Vue.use() 调用 , 这里直接在main.js使用test对象
Vue.use(test)
3、除了默认的参数 Vue 以外，还可以按需要传入自定义参数，如下（两种方式都可以，这里以参数为对象形式举例）
// vue.use理解
// 可以新建一个 test.js, 尝试参数为函数时 Vue.use() 的情况 test.js文件内容如下 这里直接在main.js中测试
const test = {
install: (Vue, a, b, c) => {
console.log('obj=', Vue, a, b, c)
}
}
// 在main.js引入demo.js，并且使用 Vue.use() 调用
Vue.use(test, 'fqniu', {name:'小牛'}, ['fqniu','niuniu','niuer'])
Vue.use() 源码
import { toArray } from '../util/index'
// Vue.use 源码
export function initUse (Vue: GlobalAPI) {
// 首先先判断插件plugin是否是对象或者函数：
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 取vue.use参数,toArray() 方法代码在下一个代码块
const args = toArray(arguments, 1)
args.unshift(this)
// 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
// toArray 方法源码
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
扫一扫
1912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
