# vue3组件Demo

**Repository Path**: chenjunxin259/vue3-component-demo

## Basic Information

- **Project Name**: vue3组件Demo
- **Description**: 主要编写一些在项目中经常用到的组件技术栈是vue3+uniapp
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-12
- **Last Updated**: 2024-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3组件Demo

#### 介绍

技术栈是vue3+uniapp，目前我的使用环境是使用uniapp开发微信小程序  


主要编写一些在项目中经常用到的组件  

cityselect组件：城市选择页面，可以拿到当前城市的值，名称和code  

cityselectpicke：使用了uniapp中的picker-view组件进行开发的城市选择组件，拿到的是省市区的名称  

customHeaderNav:实现了自定义导航栏自适应高度的问题，目前需要传入导航栏的名称即可，如果有需要可以自行修改源码实现自己的需求，增加了返回功能。  

引入了uviewplus 是一个针对vue3的ui库  

测试了svg图片的使用，可以设置大小  

实现了手机全屏响应式背景颜色  

引导页思路：将引导页设置为pages.json中的第一个。设置一个flage来判断是否进入引导页就直接进入到首页    

**以下的新功能都是基于uviewplus二次封装的，满足当下的使用**    

新增了带有对话框的弹出层，目前只能控制是否显示弹窗和控制遮罩层的透明度--confirmPopup组件名称    

新增了滚动屏幕检测是否有视频，如果视频滚动到页面中间，就进行播放，如果视频滚出屏幕就不播放--controllerVideo组件名称    

新增了沉浸式导航栏--immerseNav组件名称   

新增了成功弹出层，目前只是静态的页面，没有开放主动关闭，可以结合定时器进行关闭弹窗--successPopup组件名称   

新增了瀑布流组件，但是在使用的过程中需要注意的是，子组件和父组件执行的生命周期顺序,如果使用的是动态加载更多就需要新定义一个加载更多的数组变量来接受，需要使用watch来显示加载更多的数据。--waterfall2     

新增了导航栏根据滑动的距离出显示在页面上    

适配苹果底部安全区：
`` 
	兼容 iOS < 11.2
	padding-bottom: constant(safe-area-inset-bottom);
	兼容 iOS >= 11.2
	padding-bottom: env(safe-area-inset-bottom);
``
下载loadsh第三方API插件库，封装好了很多api，可以直接使用，官网：[loadsh](https://www.lodashjs.com/)    

使用了scss中的minx对css代码进行优化    

1. 创建一个后缀为.scss结尾的文件，编写你需要混入的样式代码
``@mixin box($width,$height,$borderRadius,$border:solid,){
   width: $width;
   height: $height;
   border: $border;
   border-radius: $borderRadius;
   }
``

2. 全局使用    

	2.1 在uni.scss中引入你新增的文件    
	
	2.2 在你需要使用到混入的页面使用以下语法：  
	   
		eg：    
		
		<view class="box">    
		
			123    
			
		</view>    
		
		.box {   
			
			@include box(500rpx, 300rpx, 20rpx)    
			 
		}  
		 
uniapp 开发小程序的时候，你新建一个文件，微信开发者工具可能会检测不到。所有需要重新启动一下项目，在去测试混入的样式是否能正常使用   

新增日期选择组件，使用的事uniapp自带的picker进行实现，目前没有封装--datepicker   

新增滚动标题依附在顶部效果，纯CSS实现--scrollFixed   

新增预览图片效果，便于查看图片以及下载图片--img/index   

新增自定义tabbar组件--diytabbar，使用自定义tabbar很大的问题就是切换页面的时候会有明显的页面闪动，对于展示效果不友好。目前的自定义tabbar组件并没有完善。   

新增引导页效果，--guide/index。提供思路和代码实现
组件中CardMirrorFlip---实现了点击卡片翻转效果，只能翻转两次，点击一次翻转卡片，在点击一次回到最初的卡片
组件中VerticalScrolling---简单的实现了跑马灯纵向自动滚动使用了uniapp中的swiper组件进行实现
组件中UpDown---实现上滑和下拉时切换页面布局，未完善
组件中SlideLoading---通过uni.createIntersectionObserver可以优雅的实现图片懒加载以及监听某元素进入视口区域
实现页面的自定义下拉刷新样式：自定义下拉刷新可以使用scrollView 进行实现
canvas页面实现了使用canvas绘制图片并增加自定义文字，长段落文字换行，下载绘制好的图片功能
实现直播场景播放礼物画面，使用了插件https://github.com/svga/svgaplayer-weapp/tree/master
代码实例--svga/svga页面中，目前就是简单的实现了效果,实测使用本地svga不会生效，报错解析不到文件，没有实际的使用到业务逻辑中，目前没有需求。
引入了视频倍速试看组件，支持免费观看多长然后提示去成为会员,正常使用。组件地址：[视频播放组件](https://ext.dcloud.net.cn/plugin?id=11982)
组件中tabs文件夹下DiyTabs实现了自定义tabs选中时使用自定义图片。
组件中tabs文件夹下RoundTabs实现了圆角tabs样式，支持滚动
组件中tabs文件夹下CurveTabs实现了曲线切换栏样式，支持滚动
组件中tabs文件夹下AutoCenterTabs实现了多个tabs点击切换时，选中tabs选项自动移动到可视区域中间
页面video中customVideoPoster实现了获取视频首帧作为视频封面，需要接口支持，uniapp中的video封面poster属性需要网络地址格式
组件SimpleSwiper实现了简易的swiper，熟悉了一点css的属性，推荐使用更加成熟的swiper插件
组件CloseIcon组件，实现了点击动画效果，可以根据需求修改动画效果以及执行时机
tabs页面实现了自定义tabs选中时使用自定义图片。
创建了swiper文件夹，保存根据swiper进行封装的组件
bgColorForImg：使用canvas根据swiper中的主题色来修改背景色
Swiper3D：swiper3D效果，当前swiper放大，其他swiper缩小
#### 软件架构
软件架构说明


#### 安装教程

可以直接使用components中的组件文件

#### 使用说明
可以参考我代码中的说明



#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)