@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/countTo.md

@@ -0,0 +1,140 @@
+## CountTo 数字滚动 <to-api/>
+
+<demo-model url="/pages/componentsD/countTo/countTo"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-count-to**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-count-to)
+
+:::
+
+该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+
+::: warning 注意
+如果给组件的父元素设置`text-align: center`想让数字水平居中，可能是由于元素内容快速变化而导致渲染的问题，在APP上组件可能会有轻微的左右抖动现象，
+解决办法是给父元素设置`padding-left`或者`margin-left`即可。
+:::
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过`startVal`设置开始值，`endVal`设置结束值
+
+```vue
+<uv-count-to :startVal="30" :endVal="500"></uv-count-to>
+```
+
+### 设置滚动相关参数
+
+- 通过`duration`设置从开始值到结束值整个滚动过程所需的时间，单位`ms`
+- 通过`useEasing`设置滚动快结尾的时候，是否放慢滚动的速度，给用户更好的视觉效果，默认`true`
+
+```vue
+<uv-count-to :start-val="30" :end-val="500" :duration="2000" :useEasing="false"></uv-count-to>
+```
+
+### 是否显示小数位
+
+- 通过`decimals`设置显示的小数位，如果设置了，在滚动过程中，小数位会一起变化。
+- 通过`decimal`设置小数位分割符号。
+- 如果`startVal`和`endVal`是带小数的，应该设置`decimals`为`startVal`和`endVal`一样的小数位数值，如`endVal`为500.55，那么`decimals`应该设置为2。
+
+```vue
+<uv-count-to :startVal="30" :endVal="500.55" :decimals="2" decimal="."></uv-count-to>
+```
+
+### 千分位分隔符
+
+通过`separator`配置千分位分隔符，默认为空字符串，可以设置英文逗号","，此参数表现为`endVal`值超过1000时，比如为"1542"，那么滚动后会变成"1,542"，在金额数值时，
+该参数可能会用上。
+
+```vue
+<uv-count-to :endVal="1542" separator=","></uv-count-to>
+```
+
+### 滚动执行的时机
+
+可以通过`autoplay`设置是否需要初始化时就开始滚动，默认为`true`。如果设置为`false`，可以通过组件的`ref`去控制组件内部的`start()`和`stop()`或`restart()`
+方法来开始或暂停。
+
+```vue
+<template>
+	<view>
+		<uv-count-to ref="countTo" :endVal="5000.55" :autoplay="false"></uv-count-to>
+		<button type="primary" size="small" @click="stop">暂停</button>
+		<button type="primary" size="small" @click="start">开始</button>
+		<button type="primary" size="small" @click="restart">继续</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const countTo = ref(null);
+function start() {
+  countTo.value.start();
+}
+function stop() {
+  countTo.value.stop();
+}
+function restart() {
+  countTo.value.restart();
+}
+
+</script>
+```
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### CountTo Props
+
+| 参数		| 说明									| 类型					| 默认值		|  可选值	|
+|:-			|:-										|:-						|:-			|:-			|
+| startVal	| 开始值									| String &#124; Number	| 0			| -			|
+| endVal	| 结束值									| String &#124; Number	| 0			| -			|
+| duration	| 滚动过程所需的时间，单位ms				| String &#124; Number	| 2000		| -			|
+| autoplay	| 是否自动开始滚动						| Boolean				| true		| true &#124; false		|
+| decimals	| 要显示的小数位数，见上方[是否显示小数位](/components/countTo.html#是否显示小数位)				| String &#124; Number	| 0			| -			|
+| decimal	| 小数位分割符号								| String				| .			| -			|
+| useEasing	| 滚动结束时，是否缓动结尾，见上方[设置滚动相关参数](/components/countTo.html#设置滚动相关参数)		| Boolean				| true		| true &#124; false		|
+| color		| 字体颜色								| String				| #606266	| -			|
+| fontSize	| 字体大小，单位默认px						| String &#124; Number	| 22		| -			|
+| bold		| 字体是否加粗							| Boolean				| false		| true	&#124; false	|
+| separator	| 千位分隔符，见上方[千分位分隔符](/components/countTo.html#千分位分隔符)				| String				| -			| -			|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+
+### CountTo Methods
+
+此方法如要通过ref手动调用
+
+| 名称		| 说明										|
+|:-			|:-											|
+| start		|`autoplay`为`false`时，通过此方法启动滚动，调用即从头开始滚动		|
+| restart	| 暂定状态，从暂停状态开始滚动；或者滚动状态下，暂停	|
+| stop	| 暂停滚动	|
+
+
+### CountTo Events
+
+|事件名	|说明					|回调参数	|
+|:-		|:-						|:-			|
+| @end	| 数值滚动到目标值时触发	| -			|
+
+<style scoped>
+h3[id=countto-methods] + p + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/datetimePicker.md

@@ -0,0 +1,283 @@
+## DatetimePicker 时间选择器 <to-api/>
+
+<demo-model url="/pages/componentsB/datetimePicker/datetimePicker"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-datetime-picker**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-datetime-picker)
+
+:::
+
+此选择器用于时间日期
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+1. 本组件统一返回时间戳，如果需要格式化时间，可以自行转换。推荐使用 `uv-ui` 提供的API进行处理：[Time时间格式化](https://www.uvui.cn/api/api/utils/time.html)
+2. `mode="time"`时传入的应该是一个 String ，如： 12:00 ，而不是 Number(new Date())
+3. 如果某些平台formatter参数不生效，可能就是不支持参数传递方法，可以使用setFormatter()进行设置
+:::
+
+### 基本使用
+
+- 通过`ref`调用`open()`控制组件的打开。
+- 通过`mode`配置选择何种日期格式。
+
+```vue
+<template>
+	<view>
+		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="datetime" @confirm="confirm">
+		</uv-datetime-picker>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const value = ref(Number(new Date()));
+const datetimePicker = ref(null);
+function open() {
+  datetimePicker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+
+</script>
+```
+
+### 年 月 日
+
+此模式通过`mode`设置为`date`。
+
+```vue
+<template>
+	<view>
+		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" @confirm="confirm">
+		</uv-datetime-picker>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const value = ref(Number(new Date()));
+const datetimePicker = ref(null);
+function open() {
+  datetimePicker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+
+</script>
+```
+
+### 过滤器
+
+使用过滤器`filter`进项处理时间，下方示例是保留偶数年。
+
+```vue
+<template>
+	<view>
+		<uv-datetime-picker 
+			ref="datetimePicker" 
+			v-model="value" 
+			mode="date" 
+			:filter="filter" 
+			@confirm="confirm">
+		</uv-datetime-picker>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const value = ref(Number(new Date()));
+const datetimePicker = ref(null);
+function open() {
+  datetimePicker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+function filter(type, options) {
+  if (type === 'year') {
+    return options.filter(option => option % 2 === 0);
+  }
+  return options;
+}
+
+</script>
+```
+
+### 格式化
+
+如有需要，可以通过`formatter`参数编写自定义格式化规则。
+
+```vue
+<template>
+	<view>
+		<uv-datetime-picker 
+			ref="datetimePicker" 
+			v-model="value" 
+			mode="datetime" 
+			:formatter="formatter" 
+			@confirm="confirm">
+		</uv-datetime-picker>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const value = ref(Number(new Date()));
+const datetimePicker = ref(null);
+function open() {
+  datetimePicker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+function formatter(type, value) {
+  if (type === 'year') {
+    return `${value}年`;
+  }
+  if (type === 'month') {
+    return `${value}月`;
+  }
+  if (type === 'day') {
+    return `${value}日`;
+  }
+  return value;
+}
+
+</script>
+```
+
+::: warning 注意：
+
+某些平台可能不支持props传递函数，为了兼容性内置有方法，可以通过`setFormatter`方法设置规则。如下：
+```vue
+onReady() {
+	//onReady 为uni-app支持的生命周期之一
+	datetimePicker.value?.setFormatter(formatter)
+}
+```
+:::
+
+### 限制最大最小值
+
+参数`minDate`和`maxDate`可以设置最大值和最小值（传入时间戳）。
+
+```vue
+<template>
+	<view>
+		<uv-datetime-picker 
+			ref="datetimePicker" 
+			v-model="value" 
+			mode="datetime" 
+			:minDate="1587524800000" 
+			:maxDate="1786778555000" 
+			@confirm="confirm">
+		</uv-datetime-picker>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const value = ref(Number(new Date()));
+const datetimePicker = ref(null);
+function open() {
+  datetimePicker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### DatetimePicker Props
+| 参数				| 说明							| 类型					| 默认值				|  可选值												|
+|:-					|:-								|:-						|:-					|:-														|
+| value / v-model			| 绑定值							| String &#124; Number	| -					| -														|
+| showToolbar		| 是否显示顶部的操作栏			| Boolean				| true				| true &#124; false													|
+| title				| 顶部标题						| String				| -					| -														|
+| round `1.0.12`			| 弹窗圆角								| String &#124; Number				| 0			| -			|
+| mode				| 展示格式，见[Mode Options](/components/datetimePicker.html#mode-options)	| String				| datetime			| datetime &#124; date &#124; time &#124; year-month &#124; year		|
+| clearDate | 是否清空上次选择 | Boolean | false| true &#124; false |
+| maxDate			| 可选的最大时间（时间戳毫秒）		| Number				| 最大默认值为后10年	| -														|
+| minDate			| 可选的最小时间（时间戳毫秒）		| Number				| 最小默认值为前10年	| -														|
+| minHour			| 可选的最小小时，仅mode=time有效	| Number				| 0					| -														|
+| maxHour			| 可选的最大小时，仅mode=time有效	| Number				| 23				| -														|
+| minMinute			| 可选的最小分钟，仅mode=time有效	| Number				| 0					| -														|
+| maxMinute			| 可选的最大分钟，仅mode=time有效	| Number				| 59				| -														|
+| filter			| 选项过滤函数，上方示例有具体用法					| Function				| null				| -														|
+| formatter			| 输入过滤或格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法)，上方示例有具体用法						| Function				| null				| -														|
+| loading			| 是否显示加载中状态				| Boolean				| false				| true &#124; false													|
+| itemHeight		| 各列中，单个选项的高度			| String &#124; Number	| 44				| -														|
+| cancelText		| 取消按钮的文字					| String				| 取消				| -														|
+| confirmText		| 确认按钮的文字					| String				| 确认				| -														|
+| cancelColor		| 取消按钮的颜色					| String				| #909193			| -														|
+| confirmColor		| 确认按钮的颜色					| String				| #3c9cff			| -														|
+| visibleItemCount	| 每列中可见选项的数量			| String &#124; Number	| 5					| -														|
+| closeOnClickOverlay | 是否允许点击遮罩关闭时间选择器 | Boolean				| true		| true &#124; false		|
+| closeOnClickConfirm | 是否允许点击确认关闭时间选择器 | Boolean				| true		| true &#124; false		|
+
+### Mode Options
+| 属性名 | 说明	| 
+| :- | :- |
+| datetime | 年月日时分选择	 |
+| date | 年月日选择	 |
+| time | 时分选择，`mode="time"`时`value`的格式应该类似`00:00`	 |
+| year-month | 年月选择	 |
+| year | 年选择	 |
+
+### DatetimePicker Methods
+| 方法名								| 说明					| 
+| :-								| :-					|
+| open	| 弹出时间选择器组件	 | -| 
+| setFormatter	| 格式化函数，见上方示例	 |
+
+### DatetimePicker Events
+|事件名		|说明							|回调参数	|
+|:-			|:-								|:-			|
+| @confirm	| 点击确定按钮时触发	| value:返回所选时间戳，mode:当前模式			|
+| @change	| 当选择值变化时触发				| value:返回所选时间戳，mode:当前模式			|
+| @cancel	| 点击取消按钮					| -			|
+| @close	| 关闭遮罩时触发				| -			|
+
+:::warning 注意
+示例依赖了 `uv-picker` `uv-ui` 等多个组件，直接拷贝示例代码将无法正常运行。
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uv-datetime-picker) ，在页面右侧选择 使用 `HBuilderX导入示例项目` 。
+:::
+
+<style scoped>
+h3[id=mode-options] + table thead tr th:nth-child(2) {
+width: 70%;
+}
+h3[id=datetimepicker-methods] + table thead tr th:nth-child(2) {
+	width: 70%;
+}
+h3[id=mode-options] + table {
+width: auto;
+}
+h3[id=mode-options] + table thead tr th:nth-child(2){
+width: 60%;
+}
+</style>

package/docs/components/diff1.x.md

@@ -0,0 +1,190 @@
+## 对比1.X
+
+uv-ui1.0与uv-ui1.x之间，是有非常大差异的，`1.x`不能升级到`2.x`版本。  
+造成这个问题的根本原因是，`2.x`是一个重构版本，对`1.x`进行了整个架构的改造升级，摒弃了`1.x`中一些不合理的理念和做法，同时引入很多优秀的新特性，让`2.0`更加
+健壮和稳定。  
+下面列出一些`1.x`与`2.x`的差异，让您能更好的对`2.x`有整体的认识，了解该使用哪个版本，以及是否值得升级到`2.0`版本。
+
+#### 1. 对nvue的支持
+
+众所周知，`1.x`是不支持`nvue`的，所以`2.x`立项的首要目标就是对`nvue`的兼容，目前uv-ui1.0也全面实现了兼容`nvue`。  
+我们也知道，`nvue`的背后其实是`weex`，在渲染上有出色的效果，但是其也有很多无法填平的兼容问题，导致某些情况下费尽心思依然无法实现理想的效果。
+
+
+#### 2. form表单校验的加强
+
+在`1.x`中，`prop`参数不支持`a.b.c`的写法，`2.x`实现了支持，同时对`form`组件引入了`validateField、resetFields、clearValidate`等方法，从各个方面对表单功能
+进行了加强，让您在移动端依然能对表单校验游刃有余。
+
+
+#### 3. 优化popup弹窗组件
+
+在`2.x`中，我们对弹窗进行了优化，有如下：
+- 修复了`1.x`中快速切换可能会卡死；
+- 移除了内置的`scroll-view`组件，让`popup`内的内容可以超出边界；
+- 优化弹窗的响应速度
+- 处理了由于uni-app的问题，导致微信小程序内，弹窗内无法准确获取元素尺寸而导致某些内嵌组件失效的问题；
+- 提供一个`bgColor`参数，设置为`transparent`可以方便去掉背景色，实现个性化的中部弹窗；
+
+
+#### 4. 提供通用性的customStyle参数
+
+我们为每个组件都提供了一个`customStyle`，一般作用于组件内部的根节点，可以方便设置一些基础样式，它同时能接受对象或者字符串的样式形式，如下：
+
+```js
+// 对象形式
+<uv-badge :customStyle="{backgroundColor: 'red'}"></uv-badge>
+
+// 字符串形式
+<uv-badge customStyle="background-color: red;"></uv-badge>
+```
+
+
+#### 5. 优化在微信小程序上的差异
+
+微信小程序中，默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置`class style 、动画、 flex`布局等，但是在复杂的
+布局下，这可能会导致我们无法控制组件的整体布局，所以在`2.x`中，我们统一将所有组件设置为“虚拟的”，让其能更好的按我们的预期进行工作。
+
+```js
+// #ifdef MP-WEIXIN
+// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
+options: {
+	virtualHost: true
+}
+// #endif
+```
+
+
+#### 6. 加强calendar日历组件
+
+在`2.x`中，我们加入了多个控制参数，让您能够对日历进行各个方面进行细致的操作，如通过`formatter`参数，可以自定义日历提示语，角标等；允许控制日期最大和最小范围；
+可以通过滚动的形式，同时展示多个月份；总之，相比`1.x`，我们从每个方面进行了细致的考虑，并提供了对应的处理方法。
+
+
+#### 7. picker组件的调整
+
+在`1.x`中，我们提供了`picker`和`select`组件，这些组件存在一些不足与混乱，同时可能无法配置出我们想要的场景，在`2.x`中，我们对此进行了梳理，拆分为典型的`picker`组件，
+用于普通的非时间类型选择，同时提供`datetime-picker`组件，用于专门的时间选择，并针对时间的格式化，最小和最大时间等方面，提供了多样化的控制参数。
+
+
+#### 8. 加强numberBox组件
+
+在`1.x`上，由于历史原因，此组件存在更新值时可能会有异常的问题。在`2.x`中，我们对此组件进行了重构和加强，加入异步控制，以及样式完全自定义的特性，让它能适用于
+任何您需要它的场景。
+
+
+#### 9. 优化upload组件
+
+在`1.x`中，我们将上传的核心功能集成在组件内，导致在某些特殊返回状态，以及有前端直传`oss`时，可能会操作不方便的问题。  
+所以，在`2.x`中，我们重构了此组件，此后，组件内部只提供图片(新增了视频和文件类型)的选择与展示，将上传的步骤交由外部用户自定义的逻辑进行操作，实现更好的解耦。
+
+
+#### 10. 优化radio和checkbox组件
+
+在`1.x`中，我们没法控制这两个组件的排列形式，所以在`2.x`中，我们提供了一个`placement`参数，可以对调图片与文本的位置，用于在特殊场景的布局，同时我们在组件内部进行了
+特殊处理，让他们能更好的配合`form`组件进行表单校验。
+
+
+#### 11. switch组件细节优化
+
+在`1.x`中，该组件能够满足正常使用，在`2.x`中，我们对它进行优化，比如加入更好的`loading`效果、切换动画、以及提供`space`参数让您配置出另一种风格的样式。
+
+
+#### 12. 优化countDown倒计时组件
+
+在`2.x`中，我们对此组件进行如下优化：
+
+- 加入毫秒级的功能
+- 提供完全自定义的样式配置，让它能适用于任何场景。
+
+
+#### 13. 优化swipeAction滑动单元格组件
+
+在`2.x`中，我们针对不同的平台，采用不同的方案去实现此组件的效果，在`nvue`上，我们采用了`BindingX`方案，在APP和微信小程序，H5上，我们采用了`wxs`的方案，
+这些优化 ，能让我们滑动单元格时，有丝滑和细腻的效果。
+
+
+#### 14. 组件内部获取尺寸时机的优化
+
+在`1.x`中，普遍的做法是在组件初始化完成后获取内部元素的尺寸，这导致在内容变化而导致尺寸变化后，可能导致不准确，或者需要通过调用组件的方法重新进行初始化。  
+而在`2.x`中，我们对此进行了反思，采用的方法为每次需要进行操作的时候，重新获取元素的尺寸，典型的为`collapse`折叠面板组件，在每次打开的时候，组件都会重新
+计算该展示的高度。
+
+
+#### 15. 父子嵌套组件调用的优化
+
+在uv-ui中，有很多组件都采用父子嵌套的做法，比如`radio`组件，就由`uv-radio-group`和`uv-radio`组件，`1.x`中对类似的组件采用了统一的处理方法，该方法存在一定的缺陷，
+导致反复操作一些子组件时，重复加入一些实例到管理状态中，从而导致卡顿或者混乱。在`2.x`中，我们对类似的问题进行了优化，保证了状态的正确性，以及在组件被卸载的时候，进行移除。
+
+
+#### 16. 骨架屏组件重构
+
+在`1.x`中，我们需要给骨架屏组件提供类名，以及初始的模拟数据，让组件内部进行尺寸获取以及在对应的位置绘制占位图，在便捷性的同时，舍弃了可控性。  
+所以，在`2.x`中，我们采用了另一种实现方式，让用户可以通过参数的形式，配置出想要的占位图信息，可以获得更强的自定义性。
+
+
+#### 17. 加强http请求
+
+在`1.x`中，我们提供了基本可用的`http`支持，它也存在一些缺陷，比如不支持`upload、download`，其他各项配置不够细化等。  
+在`2.x`中，我们引入更专业的`luch-request`插件，它能全面的支持一个企业应用在各种复杂场景下的请求配置需求，我们对此插件进行了进一步的封装，并提供了详细实践用例，
+您可以在[Http请求](https://www.uvui.cn/api/request/http.html)章节中查阅更多关于它的用法。
+
+
+#### 18. 提供全局性的组件默认参数配置
+
+我们知道，每个组件都有很多的`props`参数，在调用组件的时候，通过修改对应的参数，可以覆盖组件的默认值。但是在对于某个常用的组件来说，如果组件的某个参数
+默认值不符合自己的需求，就需要在每次调用的时候，都去覆盖它。  
+在`2.x`中，我们对此提供了一个解决方案，假设`uv-text`的`color`为`#333333`，而您应用的默认色值为`#555555`，就需要每次使用`uv-text`组件时，都去修改它，如下：
+
+```html
+<!-- 列表页 -->
+<uv-text color="#555555" text="列表内容"></uv-text>
+
+<!-- 详情页 -->
+<uv-text color="#555555" text="详情内容"></uv-text>
+```
+
+在`2.x`中，我们可以通过`uni.$uv.props.组件名.参数名`的形去对组件的某个默认参数进行全局覆盖，比如我们我要修改`uv-text`组件`color`参数：
+
+```js
+// 建议在main.js中(初始化uv-ui之后)引入外部配置文件中进行统一处理
+uni.$uv.props.text.color = '#555555'
+```
+
+在进行如上设置后，整个应用中，任意调用`uv-text`的地方，`color`参数的默认值都成为了`#555555`。
+
+
+#### 19. 优化demo演示效果，以及移除了模板和js的模块
+
+为了让组件库更加专注和简洁，我们在演示demo中，移除了`1.x`中关于`模板`和`js`的模块，同时优化了组件的演示效果，不再使用`1.x`切换按钮的形式去动态切换效果，
+而是提供更直观的形式对组件的重要效果进行罗列演示。  
+同时，在官网中，我们也移除了`模板`模块。
+
+
+#### 20. 加强tag组件
+
+在`2.x`中，我们对`tag`组件进行了加强，相较`1.x`，它具有如下优势：
+
+- 可以配置关闭功能
+- 可以配置图标
+- 可以适用于进行多选和单选的场景
+
+
+#### 21. 加强swiper轮播图组件
+
+在`2.x`中，我们对`swiper`组件进行了加强，让它可以配置出更加灵活的指示器样式，同时加入加载中的状态，以及可以嵌入视频播放的特性。
+
+
+#### 22. 优化sticky吸顶组件
+
+在`1.x`中，我们采用的是监听元素状态的形式，通过`js`方案进行吸顶，但是随着时代的进步以及设备的升级，大部分设备以及某些平台已经实现了对`css sticky`支持，
+所以在`2.x`中，我们采用了两种方案，在各个平台，比如`nvue, App, Ios，Android，微信小程序，H5`等，通过各种手段，去判断当前平台或者设备是否支持`css sticky`，
+如果支持则优先使用`css`方案以获得更细腻的效果。如果不支持`css`方案，则自动降级为`js`方案。
+
+
+#### 23. 优化tabs组件
+
+在`1.x`，可能会存在动态增减菜单下，底部滑块位置可能会错乱的问题，得益于`2.x`的整体架构调整，我们在每次移动滑块时，都会重新获取菜单的尺寸，再进行移动，保证了滑块
+能准确移动到如期的位置。同时，我们对此组件还进行其他细节优化，比如可以禁用某个菜单，显示角标，可以配合`uv-sticky`进行吸顶等。
+
+