Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

下面是详细讲解 “Vue3 + Vite + TS 实现二次封装 element-plus 业务组件”的完整攻略。

一、前言

我们这里使用的框架是 Vue3，构建工具是 Vite，使用 TypeScript 对代码进行静态类型检查。我们将使用 element-plus 作为 UI 组件，同时对其进行二次封装。这样可以使我们的业务组件更加灵活、易用、容易扩展。

二、使用 Vite 创建项目

首先，我们需要使用 Vite 创建一个新项目：

# 全局安装 vite
npm install -g vite

# 使用 vite 创建新项目
vite create my-project --template vue-ts

这里我们使用了 --template vue-ts 选项来创建一个基于 Vue3 和 TypeScript 的项目。如果你已经有一个项目了，可以直接跳过此步骤。

三、安装 element-plus

接下来，我们安装 element-plus：

npm install element-plus --save

安装完成后，我们需要在 main.ts 中引入 element-plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import App from './App.vue'

createApp(App)
  .use(ElementPlus)
  .mount('#app')

四、封装 element-plus 组件

现在，我们开始对 element-plus 组件进行二次封装。这里我们以 Button 组件为例。

4.1 创建 Button 组件

我们在 components 目录下创建一个 Button 组件：

<!-- components/Button.vue -->
<template>
  <el-button v-bind="$attrs" v-on="$listeners">{{ $slots.default }}</el-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'element-plus/lib/theme-chalk/button.css'

export default defineComponent({
  name: 'MyButton',
  props: {
    type: String,
    icon: String,
    size: String,
    disabled: Boolean,
  },
})
</script>

注意，此处我们使用了 $attrs 和 $listeners，这是为了保证我们的组件可以正确地传递 props 和事件。具体可以参考 Vue3 官方文档中的 透传属性。

同时，我们将需要的 CSS 样式进行了引入。这样就可以直接使用这个组件了。

4.2 使用 Button 组件

我们在 App.vue 中使用这个组件：

<template>
  <my-button type="primary" icon="el-icon-search" size="medium" @click="handleClick">
    搜索
  </my-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MyButton from './components/Button.vue'

export default defineComponent({
  name: 'App',
  components: {
    MyButton,
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    },
  },
})
</script>

这样，我们就完成了对 Button 组件的二次封装。你可以根据需要，继续对其他组件进行封装。

五、示例说明

这里再给出两条示例说明。

5.1 封装 Select 组件并添加默认选项

我们可以在 Select.vue 中对 element-plus 的 Select 组件进行封装，并添加一个默认选项。

<!-- components/Select.vue -->
<template>
  <el-select v-bind="$attrs" v-on="$listeners">
    <el-option :value="defaultOption.value" :label="defaultOption.label" disabled />
    <slot />
  </el-select>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'element-plus/lib/theme-chalk/select.css'
import 'element-plus/lib/theme-chalk/option.css'

type Option = {
  value: string | number | undefined
  label: string | number | undefined
}

export default defineComponent({
  name: 'MySelect',
  props: {
    ...props,
    defaultOption: {
      type: Object as () => Option,
      default: () => ({ value: '', label: '请选择' }),
    },
  },
})
</script>

然后，在 App.vue 中使用这个组件，并添加一个默认选项：

<template>
  <my-select :options="options" v-model="selected">
    <el-option
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
      :label="option.label"
    />
  </my-select>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import MySelect from './components/Select.vue'

export default defineComponent({
  name: 'App',
  components: {
    MySelect,
  },
  setup() {
    const selected = ref('')
    const options = ref([
      { value: '1', label: '选项1' },
      { value: '2', label: '选项2' },
      { value: '3', label: '选项3' },
    ])
    return { selected, options }
  },
})
</script>

5.2 封装 InputNumber 组件并添加单位

我们还可以在 InputNumber.vue 中对 element-plus 的 InputNumber 组件进行封装，并添加一个单位。

<!-- components/InputNumber.vue -->

<template>
  <div class="my-input-number">
    <el-input-number v-bind="$attrs" v-on="$listeners" :value="value" @change="handleChange" />
    <span class="unit">{{ unit }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue'
import 'element-plus/lib/theme-chalk/input-number.css'

export default defineComponent({
  name: 'MyInputNumber',
  props: {
    ...props,
    unit: {
      type: String as () => string,
      default: '',
    },
    value: {
      type: Number as () => number,
      default: 0,
    },
  },
  mounted() {
    this.$refs.input.$el.setAttribute('inputmode', 'decimal')
  },
  methods: {
    handleChange(val: number) {
      this.$emit('update:value', val)
    },
  },
})
</script>

<style scoped>
.my-input-number.el-input-number__decrease,
.my-input-number.el-input-number__increase {
  margin-top: 0;
}

.my-input-number .unit {
  margin-left: 4px;
}
</style>

然后，在 App.vue 中使用这个组件，并添加一个单位：

<template>
  <my-input-number v-model="quantity" :unit="'件'" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import MyInputNumber from './components/InputNumber.vue'

export default defineComponent({
  name: 'App',
  components: {
    MyInputNumber,
  },
  setup() {
    const quantity = ref(1)
    return { quantity }
  },
})
</script>

这样，我们就完成了对 InputNumber 组件的二次封装，并添加了一个单位。