vue 之把组件封装为一个vue插件的简单方法
- 第一步,编写你的组件noData/NoData.vue(暂无数据组件)
<template>
<div v-if="isShow" class="isShowTip">
<div>暂无数据</div>
</div>
</template>
<script>
export default {
name: "NoData",
components: {},
props: {
isShow: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.isShowTip {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
z-index: 1999 !important;
& > div {
position: absolute;
width: 75px;
height: 26px;
font-size: 18px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
</style>
- 第二步,在组件同级目录新建noData/index.js,引入上面的组件,并暴露一个install方法
import NoData from "./NoData.vue";
NoData.install = function(vue) {
vue.component(NoData.name, NoData);
};
export default NoData;
import NoData from '@/components/content/noData/index.js'
Vue.use(NoData)
<NoData :isShow="isShow" ></NoData >