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

news2025/11/4 18:07:31

我的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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/851201.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

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

相关文章

Zabbix监控华为交换机DHCP接口地址池

第二课-一键安装SD-Stable Diffusion 教程

Spring中Bean的“一生”(生命周期)

设计模式（3）装饰模式

[RCTF2019]DontEatMe

业务需求紧急,IT部门缺失,企业如何应对＂影子IT＂危机?

互联网电影购票选座后台管理系统源码开发

铸铝齿轮泵比例流量阀放大器

探析STM32标准库与HAL库之间的差异与优劣

[HDLBits] Exams/m2014 q4e

【MySQL】

【linux】ssh 和adb connect区别

无涯教程-Perl - fileno函数

c#设计模式-行为型模式之观察者模式

Go Gin 中使用 JWT

C++ 多态性——纯虚函数与抽象类

提升招标文件准确性：校对软件助力招标流程优化

企业进销存管理流程有哪些? 附进销存管理系统

机器学习竞赛、CV/NLP 竞赛入门没人带解决办法

【MySQL】deepin安装mysql的cpp开发包