【vue3封装element-plus的反馈组件el-drawer、el-dialog】


vue2中封装el-drawer、el-dialog这类反馈类子组件,需要将父组件的visible值传递子组件,并且再通过$emit将关闭弹窗的组件值传回父组件,同时子组件还需要监听父组件传递过来的visible的值,来驱动弹窗显示隐藏,很麻烦,代码也比较臃肿,vue3中实现方案更加简洁、方便,本文主要示例讲解vue3封装element-plus的对话框、抽屉的实现方案,同时会将vue2的实现示例写出,来进行对比,这两个组件实现方案基本一致,故放在一起说明


vue2封装示例

el-drawer、el-dialog作为子组件的封装基本一致,将二者示例同时展示,主要是方便以后复制粘贴

el-dialog组件封装

父组件调用文件:

<template>
  <div >
    <childDlg @updateVisible="updateVisible" 	
 		  :visible="changeVisible" />
  </div>
</template>

<script>
import childDlg from './childDlg .vue'
export default {
   components:{
     childDlg 
   },
   data(){
		return {
			changeVisible:false//弹窗控制
		}
	},
	methods:{
		// 接收弹窗关闭
		updateVisible(val) {
		  this.changeVisible= val
		}
	}
 </script>    

子组件childDlg .vue弹窗封装文件

<template>
  <div>
    <el-dialog title="修改信息"
               :visible.sync="checkDialog"
               :before-close="closeReset"
               :close-on-click-modal="false">
               弹窗展示
              </el-dialog>
  </div>
</template>

<script>
  export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    checkDialog: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候,触发父组件的 updateVisible方法,在该方法中更改传入子组件的 changeVisible的值
        this.$emit('updateVisible', val)
      },
    },
  },  
  watch:{
    visible(newVal){//可以执行异步
      if(newVal){
        this.openDialog()
      }
    }
  },
  methods:{
  	openDialog(){
  		//打开弹窗事件
  	},
    closeReset(done) {//弹窗关闭
      this.checkDialog = false
    },
  }
  }
</script>

<style lang="scss" scoped>

</style>

el-drawer组件封装

父组件调用文件:

<template>
  <div >
    <childDrawer  @updateVisible="updateVisible" 	
 		  :visible="changeVisible" />
  </div>
</template>

<script>
import childDrawerfrom './childDrawer.vue'
export default {
   components:{
     childDrawer
   },
   data(){
		return {
			changeVisible:false//抽屉控制
		}
	},
	methods:{
		// 接收抽屉关闭
		updateVisible(val) {
		  this.changeVisible= val
		}
	}
 </script> 

子组件childDrawer.vue弹窗封装文件

<template>
  <div>
    <el-drawertitle="修改信息"
               :visible.sync="checkDialog"
               :before-close="closeReset"
               >
               抽屉展示
              </el-dialog>
  </div>
</template>

<script>
  export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    checkDialog: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候,触发父组件的 updateVisible方法,在该方法中更改传入子组件的 changeVisible的值
        this.$emit('updateVisible', val)
      },
    },
  },  
  watch:{
    visible(newVal){//可以执行异步
      if(newVal){
        this.openDialog()
      }
    }
  },
  methods:{
  	openDialog(){
  		//打开抽屉事件
  	},
    closeReset(done) {//弹窗关闭
      this.checkDialog = false
    },
  }
  }
</script>

<style lang="scss" scoped>

</style>

vue3封装示例

这里主要以el-drawer为例说明,el-dialog组件会将代码块粘贴,二者使用上是完全一致的,当然vue3与vue2封装上的主要区别,在于vue3使用的< script setup >方式声明为了保证文件独立性,将组件进行了全封闭,换句话说,控制子组件的弹窗、抽屉的属性值需要在子组件内,而不是像vue2封装一样在父组件中,通过父组件值的true或者false来控制弹窗显示隐藏,那如此要解决的最主要的问题就是如何“点击父组件的按钮让子组件弹出来”

这里会用到新属性:defineExpose()方法,官方描述:使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性
示例:

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
文档地址:vue3–defineExpose()

子组件封装示例:

说明:在子组件中声明关闭与打开方法:open()与close()用于修改控制抽屉开关的值drawer,以方便父组件调取

drawerChild.vue文件

<template>
  <el-drawer v-model="drawer"
             title="抽屉标题">
    <span>抽屉内容</span>
  </el-drawer>
</template>

<script setup>
const drawer = ref(false)
function open() {
  drawer.value = true
}
function close() {
  drawer.value = false
}
defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
</style> 
父组件调用:
<!-- 抽屉 -->
	<el-button @click="openDrawer">打开抽屉</el-button>
    <drawer-child ref="drawerChildRef" />
<script setup>
import drawerChildfrom './drawerChild.vue'

const drawerChildRef= ref(null) //抽屉ref

function openDrawer() {
  drawerChildRef.value.open()
}

除此之外,相关的父子组件传值还是可以继续使用Props、emit来实现的
difineProps:子组件接收父组件传过来的值。
difineEmits: 子组件接收父组件传过来的方法。
这里不做过多演示

结尾说明

从代码简洁度,逻辑条理性上无疑vue3相对于vue2都是更胜一筹的,vue3本身还有很多非常优秀的api创新,建议多阅读官方文档:vue3官方文档
接下来把el-dialog封装也贴一下,方便日后复制粘贴

<template>
  <el-dialog v-model="dialogVisible"
             title="弹窗标题">
    <span>弹窗内容</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false)
function open() {
  dialogVisible.value = true
}
function close() {
  dialogVisible.value = false
}
defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
</style>
### 如何在 Element Plus 组件中实现高亮显示效果 #### 实现组件高亮显示的方法 对于 `el-table` 组件,可以通过自定义样式来控制鼠标移入时的高亮背景色。默认情况下,当鼠标悬浮于某一行上时会触发 hover 效果并改变该行的颜色。为了修改这一行为,在使用 scoped CSS 的场景下可能无法生效,因为scoped 样式的优先级较低[^3]。 针对此情况,可以采用全局样式的解决方案: ```css /* 放置在App.vue中的<style>标签内 */ .el-table .hover-row { background-color: #f0f9eb !important; } ``` 上述代码片段展示了如何通过覆盖 `.el-table .hover-row` 类来自定义高亮颜色为浅绿色(`#f0f9eb`)。需要注意的是这里使用了 `!important` 来提高样式的优先级以确保能够成功应用新设定的颜色值。 另外一种常见需求是在特定条件下手动触发表格行或其他元素的高亮状态。这通常涉及到监听某些事件(如点击),并通过绑定类名的方式动态调整目标元素的状态。下面是一个简单的例子说明怎样利用 Vue.jsElement Plus 完成这项功能: ```html <template> <div id="app"> <!-- 表格 --> <el-table :data="tableData" @row-click="handleRowClick" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> </el-table> </div> </template> <script setup> import { ref } from &#39;vue&#39;; const tableData = [ { date: "2016-05-02", name: "王小虎" }, { date: "2016-05-04", name: "李大牛" } ]; // 当前行索引变量 let currentIndex = ref(-1); function handleRowClick(row, column, event){ // 更新当前选中行索引 currentIndex.value = row.index; console.log(&#39;clicked on row:&#39;, row); } </script> <style> /* 动态添加到被点击行上的class */ .current-row { background-color: yellow !important; /* 设置您想要的高亮颜色 */ } </style> ``` 在这个实例里,每当用户单击任意一行数据时都会调用 `handleRowClick()` 方法更新 `currentIndex` 变量保存最新一次交互的位置信息,并且可以在模板部分给每一行加上条件渲染逻辑以便根据实际情况决定是否附加额外的 class 名用于呈现不同的视觉反馈效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值