手搓vue3组件_1.封装一个button

已于 2023-08-08 23:37:41 修改
阅读量362 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue.js 手搓组件 elementui
于 2023-08-08 23:30:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_stone_kai/article/details/132177431
版权
前端 同时被 2 个专栏收录
81 篇文章 1 订阅
订阅专栏
vue
13 篇文章 0 订阅
订阅专栏

我的icepro参考地址,内有参考代码,有条件的割割点点star

实现要求:

  • 基于vue3
  • 支持通过colors(更改颜色)
  • 支持点击事件
  • …支持其他的自定义样式(例如圆角,size等等)

最基础的第一步:

父组件引入并使用:

<template>
  <div class="buttonLim">
    我的按钮:
    <ice-button>
      primary
    </ice-button>
  </div>
</template>
<script setup>
import IceButton from '../../components/other/ice-button.vue'
</script>
<style scoped lang="less">
</style>

子组件中使用slot去展示:

<template>
  <div class="ice-button">
    <slot></slot>
  </div>
</template>
<script setup>
</script>
<style scoped lang="less">
</style>

run:

在这里插入图片描述

那么,把它的样式改的好看一些:

父组件:

<template>
  <div class="buttonLim">
    我的按钮:
    <ice-button>
      primary
    </ice-button>

  </div>
</template>

<script setup>
import IceButton from '../../components/other/ice-button.vue'</script>

<style scoped lang="less">
.buttonLim {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>

子组件:

<template>
  <div class="ice-button">
    <slot></slot>
  </div>
</template>

<script setup>

</script>

<style scoped lang="less">
.ice-button {
  border-radius: .3rem;
  border: rgba(0, 0, 0, .7) 1px solid;
  background: rgba(0, 0, 0, .2);
  width: fit-content;
  padding: .2rem .4rem;
  margin: .1rem .2rem;
  user-select: none;
}

</style>

在这里插入图片描述
当然,此时他的颜色并不够好看,那么如果想通过props向子组件自定义颜色:
子组件:

<template>
  <div class="ice-button">
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    default: ''
  }
})
</script>

这样你传过来了,但是想怎么用呢,

这里要求颜色有未hover时的颜色和hover时的颜色,hover时的颜色自动计算出来

而此时可以考虑使用到css的变量了,像是:
子组件:

<template>
  <div class="ice-button"
       :class="[
           color?'hoverColor':'defaultColor'
       ]"
       :style="{ '--color': color,'--hover-color': hoverColor(color) }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    default: ''
  }
})
const hoverColor = (rgb) => {
  return rgb.replaceAll(')', ',.5)')
}
</script>

<style scoped lang="less">
.ice-button {
  border-radius: .3rem;
  width: fit-content;
  padding: .2rem .4rem;
  margin: .1rem .2rem;
  user-select: none;
  transition-duration: .3s;
}

.defaultColor {
  border: rgba(0, 0, 0, .7) 1px solid;
  background: rgba(0, 0, 0, .2);
}

.hoverColor {
  color: var(--color);
  border: var(--color) 1px solid;

  &:hover {
    color: var(--hover-color);
    border: var(--hover-color) 1px solid;
  }
}
</style>

父组件的调用:

<template>
  <div class="buttonLim">
    我的按钮:
    <ice-button color="rgb(251, 139, 5)">
      primary
    </ice-button>
    <ice-button color="rgb(234, 137, 88)">
      primary
    </ice-button>

  </div>
</template>

<script setup>
import IceButton from '../../components/other/ice-button.vue'</script>

<style scoped lang="less">
.buttonLim {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>

run:
在这里插入图片描述

解释一下:

子组件中,如果传入了color的值,那么子组件的类名hoverColor生效,反之defaultColor生效,这里是给class传入了一个数组,如果你查看elementui的源码,会发现他们也是这样实现组件的type的切换,用过了才知道这个技巧是如此好用

还有,这里只是传入了一个rgb的值,然后在子组件中自动计算出来另一个颜色值(直接改为rgba,opacity为0.5)

支持点击事件

如果你直接使用下面的方式来绑定:
父组件:

<template>
  <div class="buttonLim">
    我的按钮:
    <ice-button color="rgb(251, 139, 5)">
      primary
    </ice-button>
    <ice-button color="rgb(234, 137, 88)">
      primary
    </ice-button>

    <ice-button @click="clickTrigger" color="rgb(242, 72, 27)" ref="btn">
      click
    </ice-button>


  </div>
</template>

<script setup>
import IceButton from '../../components/other/ice-button.vue'
import { ref } from 'vue'

const btn = ref()
const clickTrigger = async () => {
  console.log('clickTrigger--->')
  const str = '我即将要赋值的文字'
  if (await copyText(str)) {
    console.log('success')
  } else {
    console.log('error')
  }
}

const copyText = function (str) {
  return navigator.clipboard.writeText(str)
      .then(() => {
        return true
      })
      .catch(() => {
        return false
      })
}

</script>

<style scoped lang="less">
.buttonLim {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>

子组件:

<template>
  <div class="ice-button"
       :class="[
           color?'hoverColor':'defaultColor'
       ]"
       :style="{ '--color': color,'--hover-color': hoverColor(color) }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    default: ''
  }
})
const hoverColor = (rgb) => {
  return rgb.replaceAll(')', ',.5)')
}
</script>

<style scoped lang="less">
.ice-button {
  border-radius: .3rem;
  width: fit-content;
  padding: .2rem .4rem;
  margin: .1rem .2rem;
  user-select: none;
  transition-duration: .3s;
}

.defaultColor {
  border: rgba(0, 0, 0, .7) 1px solid;
  background: rgba(0, 0, 0, .2);
}

.hoverColor {
  color: var(--color);
  border: var(--color) 1px solid;

  &:hover {
    color: var(--hover-color);
    border: var(--hover-color) 1px solid;
  }
}
</style>

这样没问题可以,但是有时会报错,click不是原生事件,这里我没有复现,淡然,你也可以在复习bug的时候想起这篇文章

这里的逻辑是点击左侧的item,赋值文字,但是这里的子组件没有定义click的处理事件,上面的button也是,可能会报这种错,

  • 如何解决:

在子组件中定义click事件:
子组件:

<template>
  <div class="ice-button"
       @click="clickCallBack"
       :class="[
           color?'hoverColor':'defaultColor'
       ]"
       :style="{ '--color': color,'--hover-color': hoverColor(color) }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    default: ''
  }
})
const hoverColor = (rgb) => {
  return rgb.replaceAll(')', ',.5)')
}

const emit = defineEmits(['click'])
const clickCallBack = (evt) => {

  emit('click', evt)
}
</script>

<style scoped lang="less">
.ice-button {
  border-radius: .3rem;
  width: fit-content;
  padding: .2rem .4rem;
  margin: .1rem .2rem;
  user-select: none;
  transition-duration: .3s;
}

.defaultColor {
  border: rgba(0, 0, 0, .7) 1px solid;
  background: rgba(0, 0, 0, .2);
}

.hoverColor {
  color: var(--color);
  border: var(--color) 1px solid;

  &:hover {
    color: var(--hover-color);
    border: var(--hover-color) 1px solid;
  }
}
</style>

这里的clickCallBack接收并emit一下click事件
emit函数会触发父组件绑定的click事件。当用户点击按钮时，父组件会接收到这个事件，并执行相应的操作。

自定义圆角

这里其实还是使用props来自定义圆角,例如我实现下面几个(round和block)按钮:
在这里插入图片描述
父组件的调用:

    自定义圆角:
    <ice-button round>round</ice-button>
    <ice-button block>block</ice-button>

子组件:

<template>
  <div class="ice-button"
       @click="clickCallBack"
       :class="[
           color?'hoverColor':'defaultColor',
           round?'round':'',
           block?'block':''
       ]"
       :style="{ '--color': color,'--hover-color': hoverColor(color) }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    default: ''
  },
  round: {
    type: Boolean,
    default: false
  },
  block: {
    type: Boolean,
    default: false
  }
})
const hoverColor = (rgb) => {
  return rgb.replaceAll(')', ',.5)')
}

const emit = defineEmits(['click'])
const clickCallBack = (evt) => {
  emit('click', evt)
}
</script>

<style scoped lang="less">
.ice-button {
  border-radius: .3rem;
  width: fit-content;
  padding: .2rem .4rem;
  margin: .1rem .2rem;
  user-select: none;
  transition-duration: .3s;
}

.defaultColor {
  border: rgba(0, 0, 0, .7) 1px solid;
  color: rgba(0, 0, 0, .7);
  transition-duration: .3s;

  &:hover {
    color: rgba(0, 0, 0, .4);
    border: rgba(0, 0, 0, .4) 1px solid;
  }
}

.hoverColor {
  color: var(--color);
  border: var(--color) 1px solid;

  &:hover {
    color: var(--hover-color);
    border: var(--hover-color) 1px solid;
  }
}

.round {
  border-radius: 2rem;
}

.block {
  border-radius: 0;
}
</style>

当然,也可以混合使用:
在这里插入图片描述

    <ice-button block color="rgb(242, 72, 27)">混合</ice-button>

以上说的功能能都实现了

注意这里的代码还有很多没有优化,颜色获取,其他自定义type之类的都没有处理,关于更多的细节优化,详见icepro

无名之辈无名之辈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JSON Diff(Vue2和Vue3组件封装).zip
03-03
json对比类似这个网站 https://json-diff.com/；使用的textarea组件修改样式。开发中有对应的JSON字段对比的需求，在GIthub上找到了对应的资源，但是发线npm下来，Vue2不能用，更别说Vue3的了所以写了这个资源，希望可以帮助到需要的开发者！！！！！
vue组件封装基础思路(button)
weixin_54682264的博客
01-11 463
vue组件封装基础思路
vue封装一个自己的按钮组件，按钮组件用jsx编写
树上骑个猴的博客
02-13 648
声明（使用） src/components/Rbutton.vue <script> export default{ name: "Rbutton", props:{ type:{ type: String, default:'primary', validate(val){ return ['primary','success','danger','text'],includes(val) } },
手把手教你封装简单的按钮组件
qczzc的博客
04-22 947
封装一个简单地按钮组件
封装一个Button按钮组件（vue）
weixin_42602736的博客
05-25 665
此外，我们还在按钮元素上绑定了一个 click 事件，并通过 $emit 方法触发了 Button 组件的 click 事件。在组件的 <template> 中，我们简单地使用了 Button 组件，并传递了一些 props。现在，我们就可以在页面中看到我们封装的共公共按钮组件了。首先，共公共组件有很多种类型，如按钮、表单、对话框等等，因此需要根据具体情况选择封装的组件类型。当然，以上是基础的封装，根据实际项目需求，我们需要在封装组件时根据场景需求，添加更多的 props、方法以及事件等。
vue3+ts封装一个button组件（多样式动态class优化、加载3秒后可点击）
最新发布
2401_84098018的博客
04-04 735
);
vue3——自己封装按钮组件
m0_57712926的博客
09-28 1592
文章目录前言一、封装的意义二、如何封装？1. 封装2. 使用三、 效果演示总结 前言 用elementUI组件库虽然很舒服，不知道各位有没有好奇它其中的el-button是如何封装的呢？今天就一起来看看如何封装自己的按钮组件吧~ 一、封装的意义 项目中按钮风格的统一 代码的复用性，可维护性高 二、如何封装？ 用到的地方很多，封装为全局组件。还是和之前一样，放在src/components目录下 1. 封装 src/components下新建my-button.vue文件 代码如下（示例）： &
vue3实战技巧 - 组件的封装
qq_35729091的博客
06-17 3691
追求的是语义上的完美。
【Vue3】封装按钮组件
一个前端开发者
03-07 682
目的：封装一个通用按钮组件，有大、中、小、超小四种尺寸，有默认、主要、次要、灰色四种类型。
vue3封装一个element的button按钮
weixin_45441173的博客
11-04 930
vue3封装一个element的button按钮
1.（vue3.x+vite）封装组件.rar
09-19
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue3轮播组件_TypeScript_CSS_下载.zip
04-21
Vue3轮播组件_TypeScript_CSS_下载.zip
基于Sortable.js的Vue拖拽组件_JavaScript_Vue_下载.zip
04-21
基于Sortable.js的Vue拖拽组件_JavaScript_Vue_下载.zip
vue3父子组件传值.doc
02-05
vue3父子组件传值
mongodb数组更新操作符$addToSet
没得简介
03-01 5502
mycode: //example: db.person.insert([ {name:'zs', books:[{name:'html', price:66}, {name:'js', price:88}], tags:['html', 'js']}, {name:'ls', books:[{name:'vue', price:99}, {name:'node', price:199}], tags:['vue', 'node']} ]) //在name为zs的字段中的tags增添一个vue db..
微信小程序_1,基础配置及其开发工具
没得简介
06-12 4077
微信小程序开发,学习,
mongodb更新操作符$unset
没得简介
03-01 3400
mycode db.person.find() //这里要删除ls的score字段,随便给一个值即可 db.person.update({‘name’:‘ls’},{$unset:{‘score’:’’}}) //注意:如果使用unset删除某一个字段,那么后面赋值为任何内容都不重要 //删除文档字段中的字段 db.person.update({name:‘ww’},{$unset:{‘book.price’:’’}}) //删除数组字段中的元素, //这里删除中间的元素并不会修改它的长度,只会填为nu.
11_less中的条件判断
没得简介
12-06 3046
less中可以通过when混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码 when表达式中可以使用比较运算符(> < >= <= =),逻辑运算符,或检查函数来进行条件判断 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> .
js中追加写入文件(字符串追加)_note
没得简介
04-30 2610
代码: let fs = require('fs'); let path = require('path'); //1.拼接写入的路径 let str = path.join(__dirname, "lnj.txt"); //2.开始追加数据 fs.appendFile(str, "你好啊", 'utf8', function (err) { if (err) { throw new Error("追加数据失败") } else { console.log("
vue_dev_tools.crx
06-05
vue_dev_tools.crx是一款用于Vue开发者的浏览器插件，主要用于辅助调试和开发Vue应用程序。该插件提供了许多有用的功能，包括实时监视Vue组件的生命周期、数据、事件和指令，以及查看Vue组件属性的修改历史、动态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名之辈无名之辈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值