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`。

相关问题

vue3.0封装select

Vue 3.0 中可以使用 Composition API 来封装一个 Select 组件。下面是一个简单的 Select 组件的示例代码：

<template>
  <div class="select">
    <label>{{ label }}</label>
    <select v-model="selectedValue" @change="handleChange">
      <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    label: String,
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.value)

    function handleChange(event) {
      selectedValue.value = event.target.value
      emit('update:value', selectedValue.value)
    }

    return {
      selectedValue,
      handleChange
    }
  }
}
</script>

在这个示例中，我们使用了 `ref` 创建了一个响应式的 `selectedValue` 变量，并在 `handleChange` 方法中更新了它的值。同时，我们也使用了 `emit` 方法来触发一个名为 `update:value` 的事件，以便父组件可以监听到 `selectedValue` 变量的变化。

在父组件中使用这个 Select 组件时，可以像这样：

<template>
  <div>
    <Select label="选择" :options="options" v-model="selectedOption" />
  </div>
</template>

<script>
import Select from './Select.vue'

export default {
  components: {
    Select
  },
  data() {
    return {
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      selectedOption: '1'
    }
  }
}
</script>

在这个示例中，我们将 `options` 数组作为属性传递给了 Select 组件，同时使用 `v-model` 指令将 `selectedOption` 变量绑定到了 Select 组件的 `value` 属性上。这样，当用户选择不同的选项时，`selectedOption` 变量的值也会随之变化。

<input type="text" oninput="limitDecimal(this)"> 用vue3.0封装公共方法

可以将该函数封装为一个 Vue3 的自定义指令，具体代码如下：

import { Directive } from 'vue';

const limitDecimalDirective: Directive = {
  mounted(el) {
    el.addEventListener('input', function(event) {
      const target = event.target as HTMLInputElement;
      target.value = target.value.replace(/[^\d.]/g, '')
        .replace(/^\./g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    });
  }
};

export default limitDecimalDirective;

然后在 Vue3 的组件中使用该指令即可：

<template>
  <div>
    <input type="text" v-limit-decimal />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import limitDecimalDirective from '@/utils/limitDecimalDirective';

export default defineComponent({
  directives: {
    limitDecimal: limitDecimalDirective
  }
});
</script>

需要注意，在 Vue3 中，自定义指令的用法与 Vue2 有所不同，需要在组件中通过 `directives` 属性来注册指令，并且指令的名称不需要加上 `v-` 前缀。