vue3 封装到公共util里面怎么写

封装 Vue3 到公共工具库中，需要使用 Vue3 提供的 createApp 函数来创建一个应用实例，并且将组件挂载到指定的 DOM 元素上。下面是一个简单的封装示例：

import { createApp } from 'vue';

// 封装一个创建 Vue3 实例并挂载到指定元素的函数
export function mountComponent(Component, el) {
  const app = createApp(Component);
  app.mount(el);
}

在使用时，只需要将需要挂载的组件和指定的 DOM 元素传入即可：

import { mountComponent } from 'your-utility-library';
import App from './App.vue';

// 挂载 App 组件到 #app 元素上
mountComponent(App, '#app');

注意，如果你的应用使用了 Vue Router、Vuex 等插件，需要在创建应用实例时进行相应的配置和安装。具体可参考 Vue3 官方文档。

相关问题

vue3.0 封装公共util以及页面引用

在 Vue3.0 中，可以通过以下步骤来封装公共的工具类：

1. 在项目中创建一个新的文件夹，例如 utils，用于存放公共工具类。

2. 在 utils 文件夹中创建一个新的文件，例如 common.js，用于编写公共工具类的代码。

3. 在 common.js 中定义需要封装的工具函数，例如：

export function formatDate(date) {
  // ...
}

4. 在需要使用该工具函数的页面中，通过以下方式引入：

import { formatDate } from '@/utils/common.js';

5. 在页面中使用该工具函数，例如：

export default {
  data() {
    return {
      date: new Date(),
    };
  },
  computed: {
    formattedDate() {
      return formatDate(this.date);
    },
  },
};

这样就完成了公共工具类的封装和页面的引用。需要注意的是，在引入公共工具类时，需要使用相对路径或者别名，例如 `@/utils/common.js`。

oninput 封装公共util

在 Vue 中，我们可以通过自定义指令的方式来封装一个公共的 `oninput` 工具函数。

1. 在项目中创建一个新的文件夹，例如 directives，用于存放自定义指令的代码。

2. 在 directives 文件夹中创建一个新的文件，例如 `oninput.js`，用于编写 `oninput` 指令的代码。

3. 在 `oninput.js` 中定义 `oninput` 指令的行为：

export const oninput = {
  mounted(el, binding) {
    el.oninput = (event) => {
      binding.value(event.target.value);
    };
  },
  updated(el, binding) {
    el.value = binding.value;
  },
};

在上面的代码中，我们定义了 `oninput` 指令的两个钩子函数，分别是 `mounted` 和 `updated`。`mounted` 钩子函数在指令绑定到元素上时调用，用于绑定 `oninput` 事件处理器，并在输入内容发生变化时触发 `binding.value` 函数。`updated` 钩子函数在指令所在的组件更新后调用，用于更新输入框的值。

4. 在需要使用 `oninput` 指令的组件中，通过以下方式引入：

import { oninput } from '@/directives/oninput.js';

5. 在组件的 `directives` 选项中注册 `oninput` 指令：

export default {
  directives: {
    oninput,
  },
  methods: {
    handleInput(value) {
      console.log(value);
    },
  },
  template: `
    <input v-oninput="handleInput">
  `,
};

在上面的代码中，我们在组件的 `directives` 选项中注册了 `oninput` 指令，并在模板中使用 `v-oninput` 指令将 `handleInput` 函数绑定到输入框上。当输入框的值发生变化时，`handleInput` 函数会被调用，传入输入框的值。

通过以上步骤，我们就可以封装一个公共的 `oninput` 工具函数，并在需要使用的组件中引入和注册。