使用Vue3从零开始基于elementUI-Plus扩展开发-封装Input&Button

增加文件 src/compnents/ui/input/index.vue

<template>
  <el-input
    :placeholder="currentOption.placeholder"
    v-model:value="value"
  ></el-input>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, computed } from "vue";

export default defineComponent({
  name: "box-input",
  props: {
    option: Object,
    value: Object,
  },
  setup: (props: any, context: any) => {
    const { option, value } = reactive(props);
    const { emit } = reactive(context);

    let currentOption = computed(() => {
      const defaultOption = {
        text: "按钮",
        placeholder: "请输入内容",
      };
      let oo = Object.assign(defaultOption, option || {});
      return oo;
    });

    let currentMethod = {

    };

    return {
      currentOption,
      currentMethod,
      value,
    };
  },
});
</script>

增加文件 src/compnents/ui/button/index.vue

<template>
  <el-button @click="currentMethod.onClick">{{ currentOption.text }}</el-button>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, computed } from "vue";

export default defineComponent({
  name: "box-button",
  props: {
    option: Object,
    value: Object,
  },
  setup: (props: any, context: any) => {
    const { option,value } = reactive(props);
    const { emit } = context;
    let currentOption = computed(() => {
      const defaultOption = {
        text: "按钮",
      };
      let oo = Object.assign(defaultOption, option || {});
      return oo;
    });

    let currentMethod = {
      onClick: () => {
        if (currentOption.value.onClick != null) {
          currentOption.value.onClick();
        }
        emit("onClick");
      },
    };
    return {
      currentOption,
      currentMethod,
    };
  },
});
</script>

增加 src/compnents/main.ts

import Button from "./ui/button/index.vue";
import Input from "./ui/input/index.vue";
export default {
  install: (app: any, options: any) => {
      app.component("box-input",Input);
      app.component("box-button",Button);
  },
};

在src/main.ts注册

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import router from "./router/router";
import store from "./store/store";
//element-plus
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
//extend 注册组件
import BoxUI from './components/main'

const app = createApp(App);
app.use(router);
app.use(store);
app.use(ElementPlus);
app.use(BoxUI);//使用组件
app.mount("#app");

修改 src/views/home/index.vue

<template>
  <box-button :option="buttonOption"></box-button>
  <box-input :option="inputOption"></box-input>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, computed, toRef } from "vue";

export default defineComponent({
  name: "Home",
  data() {
    return {};
  },
  setup: () => {
    let buttonOption = {
      text: "确定",
    };

    let inputOption = {
      placeholder: "请输入内容！",
    };
    return {
      buttonOption,
      inputOption,
    };
  },
});
</script>

效果如下