vue 之把组件封装为一个vue插件的简单方法

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;

• 第三步 main.js

//引入 自定义组件
import NoData from '@/components/content/noData/index.js'
Vue.use(NoData)

• 第四步，在模板内直接使用

<NoData :isShow="isShow" ></NoData >