vue 二次封装elementUI el-button

最新推荐文章于 2024-04-24 10:59:04 发布
最新推荐文章于 2024-04-24 10:59:04 发布
阅读量2k 收藏 1
点赞数
分类专栏： 开发 前端 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Supporint/article/details/122477382
版权
本文介绍如何在Vue项目中二次封装ElementUI的el-button组件，以实现点击按钮即可复制内容的功能。通过创建新的组件模板，避免了重复代码，提升了代码复用性。在新组件中利用v-clipboard属性和自定义方法处理复制操作，同时保留了el-button原有的属性兼容性。
摘要由CSDN通过智能技术生成

二次封装el-button实现点击即复制内容

问题背景

比如原来的el-button是这么写的：

//t是一个字符串
<el-button style="width: 150px;" size="small" >{
  {t.length <= 14 ? t : t.slice(0,14)+ '...'}}</copy-button>

那我门要实现点击即复制这个t，当然可以直接通过在el-button中加入属性v-clipboard组合来实现，但是在项目中有很多地方都需要做此修改，因为我们不可能在每个使用到此功能的vue文件中来做这种操作，无疑增加了重复代码量，因此我们来二次封装。

具体实现

首先我们要新建一个vue文件，来新做一个template，方便以后直接复用。


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  supporint
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
element-ui 的el-button组件中添加自定义颜色和图标的实现方法

				
			

			

				

					10-17
				

			

		

		

			
				
在Element UI框架中，`el-button`组件是一个常用的按钮组件，提供多种预设样式和功能。然而，在实际项目中，我们可能需要自定义按钮的颜色和图标以满足特定的设计需求。本篇文章将详细介绍如何在`el-button`组件中...

			
		

	



                

              
                



	

		

			

				
					
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）

				
			

			

				

					程序员成长指北
				

				

					01-11
					
					2603
					
				

			

		

		

			
				
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言 ????ProTable 组件目前已是 2.0版本????，在 1.0版本[1] 中大家提出的问题与功能优化，目前已经得到优化和解决。???? 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star ????一、在线...

			
		

	



                


  
              

                


	

		

			

				
					
对el-button的二次封装

				
			

			

				

					多看书少吃饭的博客
				

				

					05-20
					
					1191
					
				

			

		

		

			
				
对el-button的二次封装,按钮的权限判断

			
		

	





	

		

			

				
					
el-button简单二次封装

				
			

			

				

					Black_Straight的博客
				

				

					07-16
					
					813
					
				

			

		

		

			
				
el-button简单二次封装

			
		

	



		

			
		



	

		

			

				
					
组件封装--button组件

				
			

			

				

					m0_53273062的博客
				

				

					09-11
					
					762
					
				

			

		

		

			
				
模仿elementUI组件库，封装自己的组件库。

			
		

	





	

		

			

				
					
element-UI组件el-button样式覆写 - 生效篇

					
热门推荐

				
			

			

				

					草巾冒小子的博客
				

				

					03-21
					
					4万+
					
				

			

		

		

			
				
踩坑：el-button样式覆写

表单代码参考：

<!-- 表单区域 -->
<div class="wd1200 form-container">
  <el-row :gutter="0">
      <el-col :span="12" class="bg1">
        <div id="form-cnt">
    ...

			
		

	





	

		

			

				
					
详解关于element el-button使用$attrs的一个注意要点

				
			

			

				

					10-17
				

			

		

		

			
				
描述部分则说明了文章内容是关于作者在二次封装el-button组件时遇到的问题以及解决方案。作者在分享二次封装el-button组件时，采用了$attrs和$listeners属性来实现属性的传递和事件监听。不过在这个过程中，遇到了一...

			
		

	





	

		

			

				
					
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf

				
			

			

				

					12-16
				

			

		

		

			
				
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。  首先，我们关注`el-form`组件的封装。`el-form`用于创建...

			
		

	





	

		

			

				
					
vue+element搭建后台小总结 el-dropdown下拉功能

				
			

			

				

					10-16
				

			

		

		

			
				
在使用Vue.js框架结合Element UI组件库搭建后台管理系统时，el-dropdown组件的使用是实现下拉菜单功能的关键。本文将详细介绍如何在Vue+Element的环境下，搭建并实现后台管理系统的下拉菜单功能，特别是el-dropdown...

			
		

	





	

		

			

				
					
element-ui table组件化，重新封装

				
			

			

				

					DevelopmentW的博客
				

				

					09-02
					
					1217
					
				

			

		

		

			
				
element-ui 表格组件化

			
		

	





	

		

			

				
					
封装一个Button按钮组件（vue）

				
			

			

				

					weixin_42602736的博客
				

				

					05-25
					
					771
					
				

			

		

		

			
				
此外，我们还在按钮元素上绑定了一个 click 事件，并通过 $emit 方法触发了 Button 组件的 click 事件。在组件的 <template> 中，我们简单地使用了 Button 组件，并传递了一些 props。现在，我们就可以在页面中看到我们封装的共公共按钮组件了。首先，共公共组件有很多种类型，如按钮、表单、对话框等等，因此需要根据具体情况选择封装的组件类型。当然，以上是基础的封装，根据实际项目需求，我们需要在封装组件时根据场景需求，添加更多的 props、方法以及事件等。

			
		

	





	

		

			

				
					
基于element组件库二次封装(el-button为例)

					
最新发布

				
			

			

				

					qq1319504645的博客
				

				

					04-24
					
					197
					
				

			

		

		

			
				
基于element组件库的二次封装简答总结

			
		

	





	

		

			

				
					
el-button组件二次封装，全局封装引用solt使用

				
			

			

				

					jieweiwujie的博客
				

				

					07-06
					
					642
					
				

			

		

		

			
				
el-button二次封装

			
		

	





	

		

			

				
					
el-button的封装

				
			

			

				

					tangmukuaipao的博客
				

				

					03-11
					
					222
					
				

			

		

		

			
				
对于el-button的二次封装

			
		

	





	

		

			

				
					
el-button封装

				
			

			

				

					weixin_45665171的博客
				

				

					02-26
					
					864
					
				

			

		

		

			
				
el-button封装

			
		

	





	

		

			

				
					
element-ui 二次封装系列- button

				
			

			

				

					sky2714的博客
				

				

					01-11
					
					2110
					
				

			

		

		

			
				
elementUI是一个vue.js的ui框架, 在做后台管理系统等方面非常出色,然而面对重复的后台管理系统,大量重复的代码, 这里我们将使用elemnt ui做二次封装,以扩展element ui的属性 来简化代码.
本文以	el-button为例el-button是最简单的组件了,所有操作都需要用到它, 它仅对外提供click事件.
在平时工作中,我们经常遇到一个 重复点击的问题,点太快了接口没有返回会导致多次重复请求,这时我们会想到使用防抖或节流,或者使用el-button的loading属性, 如果

			
		

	





	

		

			

				
					
Vue3+element-plus+vite 组件的二次封装-- 新建npm打包项目，生成二次封装npm组件库，本地测试

				
			

			

				

					Penk的博客
				

				

					12-14
					
					3697
					
				

			

		

		

			
				
Vue3+element-plus+vite 组件的二次封装-- 新建npm打包项目，生成二次封装npm组件库。封装好的组件，只能在当前项目里面复用，如果其他项目也有类似的需求，除了可以copy外，还有发布到npm库中。npm包的样式文件也需要在pakeage.json中显式导出，不会有会报错！！！本地npm组件库测试。

			
		

	





	

		

			

				
					
Vue2二次封装elementUI教程，用例button按钮

				
			

			

				

					weixin_53641562的博客
				

				

					07-31
					
					647
					
				

			

		

		

			
				
Vue2二次封装elementUI教程，用例button按钮

			
		

	





	

		

			

				
					
二次封装这几个 element-ui 组件后，让代码更加优雅了

				
			

			

				

					嗜雨的博客
				

				

					04-25
					
					5656
					
				

			

		

		

			
				
element-ui 本身就提供了许多强大的组件。那么为什么还要进行二次封装呢？  在日常的开发过程中，部分模块重复性比较强，这个时候就会产生大量重复的代码。这些模块的样式基本上是比较固定的，而且实现的功能也比较相近。如果每个地方都复制一份相似的代码，既不遵守代码的简洁之道，也不利于后期的维护修改   此外，在一些业务背景下，产品可能会要求设计新的交互。这个时候也可以基于 element-ui 进行二次开发，将其封装成一个新的组件方便多个地方使用...

			
		

	





	

		

			

				
					
vue二次封装el-from表单，实现一个demo

				
			

			

				

					06-06
				

			

		

		

			
				
好的，这里是一个简单的示例，二次封装了 `el-form` 组件，实现了表单验证和表单重置的功能：

```vue
<template>
  <my-form :form-data="formData" :form-rules="formRules" @submit="handleSubmit" @reset="handleReset" />
</template>

<script>
import MyForm from '@/components/MyForm'

export default {
  components: {
    MyForm
  },
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit(formData) {
      // 表单提交处理逻辑
      console.log(formData)
    },
    handleReset() {
      // 表单重置处理逻辑
      console.log('表单已重置')
    }
  }
}
</script>
```

`MyForm` 组件的代码如下：

```vue
<template>
  <el-form :model="formData" :rules="formRules" ref="form" label-width="100px">
    <slot></slot>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    formData: Object,
    formRules: Object
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单数据
          this.$emit('submit', this.formData)
        } else {
          // 表单验证失败
          console.log('表单验证失败')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.$emit('reset')
    }
  }
}
</script>
```

在 `MyForm` 组件中，使用 `slot` 插槽来实现动态插入表单项，使用 `props` 属性来接收父组件传递的表单数据和表单验证规则，使用 `$emit` 方法来向父组件发送表单提交和表单重置的事件。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值