vue3+tsx封装组件

子组件（selectTab.tsx）

import { defineComponent } from 'vue'
import { tabsProps, Tab } from './selectTabType'
import './selectTab.scss'
export default defineComponent({name: 'selectTab',props: tabsProps,emits: ['update:modelValue', 'tab-click'],setup(props, { emit, slots }) {const tabClick = (item: Tab) => {if (props.modelValue === item.name) returnemit('update:modelValue', item.name)emit('tab-click', item)}return () => (<div class="select_tab"><div class="tab_con_l"></div><div class="tab_con">{props.tabList.map((item: Tab) => {return (<divclass={[props.modelValue === item.name ? 'tab_active' : '', 'tab_con_item']}key={item.name}onClick={() => tabClick(item)}>{item.label}</div>)})}</div>{slots['right'] ? (<div class="tab_right">{/* <slot name="right"></slot> */}{slots['right']?.()}</div>) : null}</div>)},
})

类型定义（selectTabType）

import { PropType } from 'vue'export interface Tab {label: string | numbername: string | number
}export const tabsProps = {modelValue: {type: [String, Number] as PropType<string | number>,default: null,},tabList: {type: Array as PropType<Array<Tab>>,default: function() {return []},},
}

样式文件（selectTab.scss）

.select_tab {display: flex;margin-bottom: 10px;height: 36px;border-bottom: 1px solid #e4e7ed;.tab_con {display: flex;}.tab_con_l {width: 20px;}.tab_con_item {cursor: pointer;padding: 0 20px;height: 36px;box-sizing: border-box;line-height: 36px;list-style: none;font-size: 14px;font-weight: 500;border-bottom: 1px solid #e4e7ed;width: 110px;text-align: center;&:hover {color: #4f6bff;}}.tab_active {color: #4f6bff;background-color: #fff;border: 1px solid #e4e7ed;border-bottom: none;border-radius: 4px 4px 0 0;}.tab_right {height: 36px;line-height: 36px;margin-left: auto;}
}

父组件使用

// template
<selectTab v-model="activeTab" :tabList="tabList"><template #right><div>右侧插槽</div></template>
</selectTab>// data
tabList: [{ label: '整体数据', name: 'all' },{ label: '详细数据', name: 'detail' },
],
activeTab: 'all',

实现效果

子组件另一种写法(render)

import { defineComponent } from 'vue'
import { tabsProps, Tab } from './selectTabType'
import './selectTab.scss'
export default defineComponent({name: 'selectTab',props: tabsProps,emits: ['update:modelValue', 'tab-click'],setup(props, { emit, slots }) {const tabClick = (item: Tab) => {if (props.modelValue === item.name) returnemit('update:modelValue', item.name)emit('tab-click', item)}return { slots, tabClick }},render() {return (<div class="select_tab"><div class="tab_con_l"></div><div class="tab_con">{this.tabList.map((item: Tab) => {return (<divclass={[this.modelValue === item.name ? 'tab_active' : '', 'tab_con_item']}key={item.name}onClick={() => this.tabClick(item)}>{item.label}</div>)})}</div>{this.slots['right'] ? (<div class="tab_right">{/* <slot name="right"></slot> */}{this.slots['right']?.()}</div>) : null}</div>)},
})

vue3+tsx封装组件相关推荐

Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
vue3 + uni-app 封装音乐播放插件
1.初始化一个音乐实例 let AUDIO = '' export const initAudio = function (url) {AUDIO = uni.createInnerAudioCont ...
vue 封装组件供全局使用_vue 封装组件的基本操作
/**1.封装组件局部封装**/ // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> </div>` }) ...
前端：uniapp封装组件用法笔记
大家在做前端项目开发的时候,经常会遇到公用的一些页面,比如搜索.列表.商品详情卡片.评论列表等.为了提高开发效率.使代码看起来更加简洁,这个时候封装相应的组件是最好的解决方案.今天小编给大家介绍一下如 ...
jquery数组怎么传给后台_我是如何让公司后台管理系统焕然一新的（下）封装组件...
作者:yeyan1996 https://juejin.im/post/5c7b4761f265da2db2795036 写在前面上篇在这里马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热 ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决
项目场景: vue3中rrweb-player组件实现网页录屏功能问题描述提示:这里描述项目中遇到的问题: 录制的视频会重复记录录制中这个按钮的状态,每打开一次开始录制视频中就会多一个按钮,bug ...
vue3内置组件（Teleport组件，Fragment组件）-传送组件，减少层级
一.传送组件(Teleport组件) 可将组件移动到 DOM 中 Vue app 之外的其他位置,主要是为了解决一些特殊场景下模态对话框组件.组件的渲染. 例子:模拟UI框架对话框组件. App.vu ...
Vue3+ Vue-cli (2) 组件篇
目录一.全局组件定义和复用性讲解二.Vue3中的局部组件三.父子组件的静态和动态传值四.组件传值时的校验操作五.组件中重要机制 - 单项数据流六.Non-props使用技巧七.组件中通过 ...
Vue3 10多种组件通讯方法
本文简介点赞 + 关注 + 收藏 = 学会了本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了单文件组件 <script setup> . 众所周知,Vue.js 中一 ...

vue3+tsx封装组件

vue3+tsx封装组件

子组件（selectTab.tsx）

类型定义（selectTabType）

样式文件（selectTab.scss）

父组件使用

实现效果

子组件另一种写法(render)

vue3+tsx封装组件相关推荐

最新文章

热门文章