封装element ui组件

最新推荐文章于 2025-07-23 14:42:20 发布

原创最新推荐文章于 2025-07-23 14:42:20 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #elementui #vue.js

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

element-ui

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中封装Element UI的Select组件，以实现代码复用、样式一致性，适用于其他UI组件的类似操作。通过模板和script部分的代码展示，展示了封装过程的关键步骤。

在项目中，经常有封装element ui组件的需求
目的其实也很简单，就是为了统一样式，或者方便后期统一修改，或者后期换组件之类的需求。
下面来上代码，看看在vue里怎么封装已有ui组件
其实道理是一样的，不只针对element ui,如果是其他ui组件也适用

//select
<template>
  <el-select @submit.native.prevent v-bind="$attrs" v-on="$listeners"
    ><slot></slot>
  </el-select>
</template>
<script>
import { Select } from 'element-ui'
export default {
  components: {
    'el-select': Select
  },
  props: {},
  methods: {}
}
</script>