打造你的专属Vue组件：超实用“高级筛选弹窗组件“实战

在现代前端开发中，组件化思想是提高开发效率、维护性和代码复用性的关键。本文将通过一个实例——创建一个自定义的“高级筛选”弹窗组件，来展示如何在Vue框架下利用Composition API和Element Plus构建功能丰富且易于集成的UI组件。下面的代码示例不仅展示了组件的结构、样式定制，还涉及了事件处理和属性传递，是一个全面的组件开发教程。

组件效果

在这里插入图片描述

组件概览

我们所创建的“高级筛选”组件基于Element Plus的el-popover，旨在为用户提供一个包含筛选条件输入、清除、提交和取消操作的交互界面。组件设计考虑到了外观自定义、事件触发方式的灵活性以及对父组件的通信支持。

组件代码解析

结构与绑定 (`<template>`)

组件的模板部分定义了弹窗的结构，利用插槽(<slot>)允许外部插入具体的筛选内容。el-popover包裹了整个组件，并通过:title、:trigger、:width等属性接收外部配置，确保组件的灵活性。值得注意的是，通过:teleported="false"保持弹窗在DOM树中的位置不变，这在某些特定布局需求下非常有用。

逻辑处理 (`<script setup>`)

引入依赖: 首先引入了自定义按钮组件MButton以及图标资源。
Composition API: 使用defineOptions定义组件名，ref管理弹窗实例，defineProps和defineEmits分别用来声明组件的属性和事件。
事件处理: 定义了clearClick、submitClick和cancelClick方法，用于响应清除、提交和取消操作，并通过emits触发外部监听的事件。
暴露方法: 通过defineExpose对外暴露close方法，使得外部可以控制弹窗的隐藏。

样式定制 (`<style>`)

SCSS: 利用SCSS进行了详细的样式定制，包括按钮的大小调整、图标定位、红色提示点的实现以及弹窗内部元素的布局和间距调整，确保组件的视觉效果与项目整体风格相协调。

实践要点

组件通信: 通过props接收外部传入的数据和配置，使用emits触发事件，实现了组件间的解耦与消息传递。
样式封装: 利用scoped样式保护组件内部CSS不污染全局，同时通过类名自定义实现了弹窗内容区域的样式扩展。
可维护性: 通过Composition API的组合式函数逻辑，使得组件内部状态和行为逻辑清晰，便于维护和测试。
灵活性与可扩展性: 通过插槽设计，允许组件在不同场景下承载多样的筛选表单内容，提高了组件的复用性和灵活性。

代码展示

<template>
  <el-popover popper-class="searchadvanced" ref="setRemovePop" :title="title" :trigger="trigger" :teleported="false"
    :width="width" v-bind="$attrs">
    <template #reference>
      <m-button type="primary" class="searchadvanced-icon-btn" :class="{ 'searchadvanced-badge': isDot }"
        :icon="Filter"></m-button>
    </template>
    <slot></slot>
    <div class="searchadvanced-operitoin">
      <m-button class="clearbtn" type="primary" :icon="Delete" link @click="clearClick">清空</m-button> 
      <m-button class="opbtn cancelbtn" @click="cancelClick">取消</m-button>
      <m-button class="opbtn submitbtn" type="primary" @click="submitClick">确认</m-button>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import MButton from '../button'
import { ref } from 'vue'
import { Delete, Filter } from '@element-plus/icons-vue'

defineOptions({
  name: 'MSearchAdvanced'
})

const setRemovePop = ref<any>(null)

const prop = defineProps({
  title: {
    type: String,
    default: '高级筛选',
  },
  trigger: {
    type: String,
    default: 'click',
  },
  width: {
    type: [String, Number],
    default: 900,
  },
  isDot: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['clear', 'submit', 'cancel'])
const clearClick = () => {
  emits('clear')
}
const submitClick = () => {
  setRemovePop.value.hide()
  emits('submit')
}
const cancelClick = () => {
  setRemovePop.value.hide()
  emits('cancel')
}
const close = () => {
  setRemovePop.value.hide()
}

defineExpose({
  close,
})
</script>

<style lang="scss">
.searchadvanced-icon-btn {
  display: inline-block !important;
  line-height: 32px;
  width: 32px;
  font-size: 16px;
  padding: 0 0 0 6px !important;

  .el-icon {
    font-size: 16px;

  }
}

.searchadvanced-badge {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: red;
    border: 2px solid #fff;
    border-radius: 50%;
    right: -5px;
    top: -5px;
  }
}

.searchadvanced {
  &.el-popper {
    padding: 24px;
    background: #fff;
    border-radius: 2px;
  }

  .el-popover__title {
    margin-bottom: 26px;
  }

  &-operitoin {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;

    .opbtn {
      width: 100px;
    }
  }
}
</style>