博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
封装出 tab-bar组件2
阅读量:3950 次
发布时间:2019-05-24

本文共 521 字,大约阅读时间需要 1 分钟。

在这里插入图片描述

components 下 建立一个 tabbar的文件夹,创建 tab-bar 和 tab-item 拆分组件

在这里插入图片描述

tabBar 使用flex 布局,然后子组件 用 slot 标签占位(方便动态插入标签,复用这个组件)

下面是 tabBar 的 文件内容

然后再创建一个tabBarItem 的子组件

里面的 tabBarItem 也是 用 slot 占位,动态插入标签(有点像泛型)

然后在 app.vue 文件下 编辑

如果 slot 加了 name, 就要指定slot的元素

效果如下:

在这里插入图片描述

转载地址:http://xluzi.baihongyu.com/

你可能感兴趣的文章
2021-01-21对map进行key或者value排序
查看>>
ConcurrentHashMap 1.7和1.8的区别
查看>>
阻塞锁与自旋锁
查看>>
【面试官:select语句和update语句分别是怎么执行的
查看>>
scala学习之安装问题
查看>>
LDAP常见错误码
查看>>
linux yum安装rpm包出现问题
查看>>
idea编译报错类似xxx.java:[85,65] 错误: 找不到符号
查看>>
ArrayList复制
查看>>
idea打开项目时,文件左下角显示橙色J
查看>>
SQL注入
查看>>
linux中ldconfig的使用介绍
查看>>
ldap适合入门学习
查看>>
ldap学习参考博客
查看>>
linux学习之source命令与alias(别名)使用
查看>>
MYSQL常用查询
查看>>
安装Linux虚拟机绑定IP操作
查看>>
centos7离线安装 mysql
查看>>
mysql学习使用一(查询)
查看>>
Linux 学习之sed命令详解
查看>>