基于vue3+ts+vant4封装按钮组件

本文介绍了如何基于Vue3、TypeScript(TS)和Vant4库来封装一个自定义的单选按钮组件(CpRadioBtn)。组件接受选项数组和modelValue属性,通过v-model或自定义事件实现与父组件的数据交互,动态展示并控制按钮选中状态。同时,文章展示了在src/types/components.d.ts中添加类型提示以及在其他组件中如何使用该自定义组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基于vue3+ts+vant4封装按钮组件

自我记录

src/components/CpRadioBtn.vue

<script setup lang="ts">
defineProps<{
  options: {
    label: string
    value: string | number
  }[] // 使用传入数组的方式动态展示需要显示的按钮
  modelValue?: string | number // 默认选中 可不传也就是不选
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
}>()
const toggleItem = (value: string | number) => {
  // 触发自定义事件把数据给父组件
  emit('update:modelValue', value)
}
</script>

<template>
  <div class="cp-radio-btn">
    <a
      class="item"
      href="javascript:;"
      v-for="item in options"
      :key="item.value"
      :class="{ active: modelValue === item.value }"
      @click="toggleItem(item.value)"
    >
      {{ item.label }}
    </a>
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid #f6f7f9;
    background-color: #f6f7f9;
    margin-right: 10px;
    box-sizing: border-box;
    color: #3c3e42;
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: #16c2a3;
      background-color: #eaf8f6;
    }
  }
}
</style>

添加Ts类型提示
src/types/components.d.ts

// 给components 下的全局组件设置类型
// 1. 导入组件实例
import CpRadioBtn from '@/components/CpRadioBtn.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {
  // 3. 给 vue  添加全局组件类型,interface 和之前的合并
  interface GlobalComponents {
    // 指定组件类型,typeof(从一个JS对象中得到他对应的TS类型) 从组件对象得到类型,设置给全局组件 CpNavBar
    CpRadioBtn: typeof CpRadioBtn
  }
}

使用src/views/User/index.vue

<script setup lang="ts">
import { ref } from 'vue'
// 传参的数组
const options = [
  { label: '男', value: 1 },
  { label: '女', value: 0 }
]
// 默认选中
const gender = ref(1)
</script>

<template>
	<!-- v-model语法糖 -->
	<cp-radio-btn :options="options" v-model="gender" />
	<!-- 不默认选中的 -->
	<cp-radio-btn :options="options" />
	<!-- 不使用 v-model 实现父子数据同步,理解语法糖 -->
	<cp-radio-btn 
	:options="options"
	:modelValue="gender"
	@update:model-value="gender =$event" />
</template>

效果

在这里插入图片描述

### 回答1: Vue3是一种前端开发框架,它的目标是提供更好的性能和开发体验。与之前的版本相比,Vue3在许多方面进行了改进和优化。 TS代表TypeScript,它是一种类型安全的编程语言。Vue3TS的结合可以提供更强大的开发工具和更好的代码提示,使开发者能够更轻松地编写可维护的代码。 Vite是一种用于前端开发的构建工具。它基于ES模块来进行快速的热更新,从而提供了更快的开发体验。使用Vite可以在开发过程中实时预览和调试项目,大大提高了开发效率。 Vant是一套基于Vue的移动端组件库。它提供了丰富的UI组件和样式,可以帮助开发者快速搭建漂亮且高效的移动端应用程序。 综上所述,Vue3 TS Vite Vant 是一种在前端开发中频繁使用的组合。它们共同提供了更好的性能、开发体验和移动端开发支持。开发者可以通过使用Vue3TS来编写可维护的代码,并使用Vite和Vant来提高开发效率和用户体验。 ### 回答2: Vue3是基于TypeScript的一款前端框架,它相较于Vue2有着更加强大的性能和更高效的开发体验。 Vue3采用了模块化的设计,将代码拆分为不同的模块,使得开发者可以按需引入,减少了打包体积,提高了加载速度。此外,Vue3还引入了Composition API,这是一套全新的 API 设计风格,使得组件之间的业务逻辑可以更好地共享和封装,提高了代码的可复用性。 而Vite是一款由Vue团队开发的新一代前端构建工具,它具有快速的冷启动时间和热更新能力。Vite利用浏览器原生的 ES 模块导入能力,在开发过程中使用一种需要少量转换的现代化方式加载代码。这使得构建过程更加快速和高效,提高了开发效率。 而Vant是一款基于Vue3的移动端组件库,它提供了一系列常用的移动端UI组件,可以帮助开发者快速搭建漂亮的移动端界面。Vant的设计风格简洁大方,组件丰富多样,支持按需引入,可以满足各种不同的业务需求。 通过将Vue3、TypeScript、Vite和Vant结合使用,开发者可以在项目中获得更好的开发体验和更高的效率。Vue3提供了强大的开发能力,TypeScript增强了代码的可读性和可维护性,Vite提供了快速的开发和构建速度,Vant则提供了丰富的移动端组件。这一组合使得前端开发更加高效、灵活和便捷。 ### 回答3Vue3是一种用于构建用户界面的现代JavaScript框架,它结合了React的组件化开发和Angular的响应式数据绑定。相对于Vue2,Vue3提供了更快的性能、更小的包体积以及更好的开发体验。 TS是指TypeScript,它是JavaScript的一个超集,为JavaScript添加了静态类型检查和更强大的开发工具。使用TypeScript可以提供更好的代码提示、错误检查和重构支持,能够使代码更加健壮和易于维护。 Vite是Vue3的一个新型构建工具,它基于ES模块的原生导入机制,能够快速地在开发过程中进行热重载和快速构建。相比于Webpack等传统构建工具,Vite具有更快的冷启动速度和更低的内存占用,提供了更好的开发体验。 Vant是一套基于Vue3的移动组件库,它提供了丰富的UI组件和常用功能,能够快速构建出美观、高效的移动应用。Vant组件能够自动适配不同屏幕尺寸,支持响应式布局和主题定制,开发者可以根据自己的需求进行扩展和定制。 综上所述,Vue3、TypeScript、Vite和Vant是一套完整的技术栈,能够提供高效、可靠和易于维护的前端开发体验。在使用这些技术的过程中,开发者可以快速构建出优秀的Web应用和移动应用,并且能够享受到更好的性能和开发效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值