简单的vue组件封装

简单的vue组件封装

整个项目中都会用到这个样式的标题
components目录下新建xxx.vue文件
代码

<template>
  <div class="divBg">
    {{title}}
    <p style="float:right;color:#1C69D4;margin-right:30px; cursor: pointer;" @click="editor">
      <Icon size="16" :type="icon" />
      {{operation}}
    </p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    //标题
    operation: {
      type: String,
      default: "",
    },
    //操作
    icon: {
      type: String,
      default: "",
    },
    //图标
  },
  data() {
    return {};
  },
  methods:{
     editor() {
          this.$emit('edit')
        }
        //触发回调
  }
};
</script>

<style scoped>
.divBg {
  width: 100%;
  height: 46px;
  background: #f5f6f8;
  line-height: 46px;
  font-weight: 600;
  text-indent: 12px;
  margin-bottom: 25px ;
}
</style>

main.js全局注册 也可以单独引入

Vue.component("editHead", () => import("@/components/drawerDiv.vue"));

用的时候

 <editHead
        :title="'拓展信息维护'"
        @edit="onCompileClick"
        :operation="'编辑'"
        :icon="'ios-create-outline'"
      />