vue3封装element-plus

在Vue3中封装Element Plus组件，可以使用Vue3的新特性"defineExpose"。 通过在子组件中定义暴露出来的函数或数据，父组件可以直接访问它们。 例如，在子组件中使用"defineExpose"暴露open和close函数，然后在父组件中可以直接调用这些函数来打开和关闭子组件。 <span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

Vue3 封装 element-plus 图标选择器

### Vue3 封装 Element Plus 图标选择器

#### 创建图标选择器组件

为了创建一个可重用的图标选择器，在项目中安装 `element-plus` 和 `unplugin-icons` 插件：

npm install element-plus unplugin-icons -D

构建图标选择器的基础结构如下所示[^1]。

<template>
  <el-popover v-model:visible="visible">
    <div class="icon-list">
      <!-- 动态加载并显示图标 -->
      <i :class="[selectedIcon]" @click="handleSelect(selectedIcon)" />
    </div>

    <template #reference>
      <el-button>{{ selectedIcon || '请选择' }}</el-button>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from "vue";
const visible = ref(false);
const selectedIcon = ref("");

function handleSelect(iconName: string): void {
  selectedIcon.value = iconName;
}
</script>

<style scoped>
.icon-list {
  display: flex;
  flex-wrap: wrap;
}

.icon-list i {
  margin: 8px;
  font-size: 24px;
  cursor: pointer;
}
</style>

此代码片段展示了如何利用 `Element Plus` 的弹窗组件 (`el-popover`) 来展示图标的列表，并允许用户点击来选取特定图标。当用户选择了某个图标之后，该图标名称会被存储到 `selectedIcon` 属性内。

对于实际应用中的图标库支持，可以考虑引入 `@iconify/json` 或者其他类似的资源文件以获取更多的图标选项。通过遍历这些数据源，动态生成上述模板内的 `<i>` 标签内容，从而让用户能够浏览和挑选不同的图标样式。

vue3+element-plus封装crud

### 创建基于 Vue 3 和 Element Plus 的 CRUD 组件

创建一个功能齐全的 CRUD (Create, Read, Update, Delete) 组件涉及多个方面，包括数据获取、表单处理以及状态管理。下面是一个详细的指南来构建这样的组件。

#### 使用组合 API 构建响应式逻辑

Vue 3 推出了 Composition API 来替代 Options API，在编写复杂业务逻辑时提供了更好的灵活性和可读性[^1]：

import { ref } from 'vue'
// 定义初始数据结构
const items = ref([])

async function fetchItems() {
    const response = await fetch('/api/items')
    items.value = await response.json()
}
fetchItems()

function addItem(item) {
    // 假设有一个 POST 请求用于新增项目
}

function updateItem(id, updates) {
    // 更新特定 ID 对应的数据项
}

function deleteItem(id) {
    // 删除指定 ID 的记录
}

#### 表格展示与分页支持

Element Plus 提供了丰富的 UI 组件库，其中 `el-table` 是用来显示表格化数据的理想选择。为了实现高效的页面加载体验，通常还需要加入分页控件：

<template>
  <div class="crud-container">
    <!-- 数据列表 -->
    <el-table :data="items" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column fixed="right" width="200px">
        <template slot-scope="scope">
          <el-button @click="editRow(scope.row)">Edit</el-button>
          <el-popconfirm title="Are you sure?" @onConfirm="deleteRow(scope.$index)">
            <el-button type="danger">Delete</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination layout="prev, pager, next" :total="totalCount"></el-pagination>
    
    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="Form Title">
      <el-form :model="formModel">
        <el-form-item label="Name">
          <el-input v-model="formModel.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">Cancel</el-button>
        <el-button type="primary" @click="submitForm()">Submit</el-button>
      </span>
    </el-dialog>
  </div>
</template>

#### 将操作封装成独立函数并优化用户体验

对于每一个基本的操作（增加、修改、删除），都应该定义相应的事件处理器，并考虑如何提升用户的交互感受。比如当执行成功后给出提示信息；失败情况下则捕获错误并向用户反馈具体原因。

通过上述方法可以有效地利用 Vue 3 及其生态系统中的工具和技术来开发高质量且易于维护的应用程序界面。