@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/lineProgress.md

@@ -0,0 +1,141 @@
+## LineProgress 线形进度条 <to-api/>
+
+<demo-model url="/pages/componentsD/progress/progress"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-line-progress**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-line-progress)
+
+:::
+
+该组件是一个线形的进度条，通过参数配置进度，灵活操作当前进度。适用于某个任务的进度等场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`percentage`设置当前的进度值，该值区间为0-100
+- 通过`activeColor`设置进度条的颜色
+
+```vue
+<template>
+	<uv-line-progress :percentage="30" activeColor="#ff0000"></uv-line-progress>
+</template>
+```
+
+### 不显示百分比
+
+通过`show-text`属性配置是否显示进度条内百分值
+
+```vue
+<template>
+	<uv-line-progress :percentage="30" :showText="false"></uv-line-progress>
+</template>
+```
+
+### 自定义高度
+
+通过`height`属性设置进度条高度
+
+```vue
+<template>
+	<uv-line-progress :percentage="30" height="30"></uv-line-progress>
+</template>
+```
+
+### 自定义样式(不支持安卓环境的nvue)
+
+自定义的数值样式，需要将数值嵌套在默认插槽里
+
+```vue
+<template>
+	<uv-line-progress :percentage="30">
+		<text class="uv-percentage-slot">{{30}}%</text>
+	</uv-line-progress>
+</template>
+<style lang="scss" scoped>
+	.uv-percentage-slot {
+		padding: 1px 5px;
+		background-color: #f9ae3d;
+		color: #fff;
+		border-radius: 100px;
+		font-size: 10px;
+		margin-right: -5px;
+	}
+</style>
+```
+
+### 手动加减
+
+通过`percentage`属性设置数值达到增减
+
+::: warning 温馨提示
+使用uni上挂载的uv-ui内置方法，需要根据[扩展配置 - JS工具库](/components/setting.html)进行相应的配置，否则直接会报错！
+:::
+
+```vue
+<template>
+	<view style="margin-top: 50px;">
+		<uv-line-progress :percentage="percentage" />
+		<view style="display: flex;margin-top: 100px;">
+			<button @click="computedWidth('minus')">减少</button>
+			<button @click="computedWidth('plus')">增加</button>
+		</view>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const percentage = ref(30);
+function computedWidth(type) {
+  if (type === 'plus') {
+    percentage.value = uni.$uv.range(0, 100, percentage.value + 10);
+  } else {
+    percentage.value = uni.$uv.range(0, 100, percentage.value - 10);
+  }
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### LineProgress Props
+
+| 参数			| 说明							| 类型					| 默认值		|  可选值	|
+|:-				|:-								|:-						|:-			|:-			|
+| activeColor	| 进度条激活部分的颜色			| String				| #19be6b	| -			|
+| inactiveColor	| 进度条的底色，默认为灰色			| String				| #ececec	| -			|
+| percentage	| 进度百分比，数值				| String &#124; Number	| 0			| -			|
+| showText		| 是否在进度条内部显示百分比的值	| Boolean				| true		| true &#124; false		|
+| height		| 进度条的高度，默认单位px。eg：`height="30rpx"`			| String &#124; Number	| 12		| -			|
+| customStyle		| 自定义外部样式		| Object	| -		| -			|
+
+
+ ### LineProgress Slots
+
+| 名称							| 说明												|
+|:-								|:-													|
+| default | 传入自定义的显示内容，将会覆盖默认显示的百分比值		|
+
+
+<style scoped>
+h3[id=lineprogress-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/link.md

@@ -0,0 +1,89 @@
+## Link 超链接
+
+<demo-model url="/pages/componentsA/link/link"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-link**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-link)
+
+:::
+
+该组件为超链接组件，在不同平台有不同表现形式：
+- 在APP平台会通过`plus`环境打开内置浏览器
+- 在小程序中把链接复制到粘贴板，同时提示信息
+- 在H5中通过`window.open`打开链接
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`href`设置打开的链接，`text`设置显示的内容
+
+```vue
+<template>
+	<uv-link href="https://www.uvui.cn" text="打开uv-ui文档" @click="click"></uv-link>
+</template>
+<script setup>
+function click() {
+  console.log('click');
+}
+
+</script>
+```
+
+### 下划线
+
+通过`under-line`设置是否显示链接的下划线
+
+```vue
+<template>
+	<uv-link href="https://www.uvui.cn" text="打开uv-ui文档" :under-line="true"></uv-link>
+</template>
+```
+
+### 自定义颜色
+
+- 通过`color`设置文字颜色
+- 通过`line-color`设置下划线颜色
+
+```vue
+<template>
+	<uv-link href="https://www.uvui.cn" text="打开uv-ui文档" color="#19be6b" line-color="#19be6b"></uv-link>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Link Props
+
+| 参数		| 说明													| 类型					| 默认值						|  可选值	|
+|:-			|:-														|:-						|:-							|:-			|
+| color		| 文字颜色												| String				| -		| -			|
+| fontSize	| 字体大小，默认单位`px(rpx)`									| String &#124; Number	| 15						| -			|
+| underLine	| 是否显示下划线											| Boolean				| false						| true &#124; false		|
+| href		| 跳转的链接，要带上http(s)								| String				| -							| -			|
+| mpTips	| 各个小程序平台把链接复制到粘贴板后的提示语					| String				| 链接已复制，请在浏览器打开	| -			|
+| lineColor	| 下划线颜色，默认同`color`参数颜色						| String				| -							| -			|
+| text		| 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色	| String				| -| -|
+
+
+### Link Events
+
+|事件名	|说明				|回调参数		|
+|:-		|:-					|:-				|
+| @click	| 点击链接时触发		| -				|

package/docs/components/list.md

@@ -0,0 +1,223 @@
+## List 列表
+
+<demo-model url="/pages/componentsC/list/list"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-list > uv-list-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-list)
+
+:::
+
+重构：<Badge text="1.0.6" />
+
+List列表组件，包含基本列表样式、默认插槽机制、可扩展插槽机制、长列表性能优化、多端兼容。
+
+在vue页面里，它默认使用页面级滚动，这样做的目的是性能更加友好。在app-nvue页面里，它默认使用原生list组件滚动，这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
+
+uv-list组件是父容器，里面的核心是uv-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
+
+uv-list-item有很多风格，uv-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容，插槽包括：默认插槽（完全自定义内容）、具名插槽（header | body | footer），根据需求进行扩展。
+
+内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表等，其他不能满足的场景使用插槽进行扩展。
+
+uv-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uv-load-more](https://www.uvui.cn/components/loadMore.html)
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本用法
+
+- 设置 `title` 属性，可以显示列表标题
+- 设置 `disabled` 属性，可以禁用当前项
+
+```vue
+<uv-list>
+    <uv-list-item title="列表文字" ></uv-list-item>
+    <uv-list-item :disabled="true" title="列表禁用状态" ></uv-list-item>
+</uv-list>
+```
+
+### 多行内容显示
+
+- 设置 `note` 属性 ，可以在第二行显示描述文本信息
+
+```vue
+<uv-list>
+    <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
+    <uv-list-item :disabled="true" title="列表禁用状态" note="列表描述信息"></uv-list-item>
+</uv-list>
+```
+
+### 右侧显示角标、switch
+
+- 设置 `show-badge` 属性是否显示角标，设置 `badge` 属性可以显示角标内容，具体参数参考：[uv-badge](https://www.uvui.cn/components/badge.html)
+- 设置 `show-switch` 属性，可以显示 `switch` 开关
+
+```vue
+<uv-list>
+    <uv-list-item  title="列表右侧显示角标" :show-badge="true" :badge="{value: '999+'}" ></uv-list-item>
+    <uv-list-item title="列表右侧显示 switch"  :show-switch="true" @switchChange="switchChange" ></uv-list-item>
+</uv-list>
+```
+
+### 左侧显示略缩图、图标
+
+- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
+- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
+
+```vue
+<uv-list>
+	<uv-list-item 
+		title="列表左侧带略缩图" 
+		note="列表描述信息" 
+		thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" 
+		thumb-size="lg" 
+		rightText="右侧文字">
+	</uv-list-item>
+	<uv-list-item :show-extra-icon="true" :extra-icon="{icon:'photo',color:'red'}" title="列表左侧带扩展图标">
+	</uv-list-item>
+</uv-list>
+```
+### 开启点击反馈和右侧箭头
+- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
+- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
+- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
+
+```vue
+<uv-list>
+	<uv-list-item title="开启点击反馈" clickable @click=""></uv-list-item>
+	<uv-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="($event,1)"></uv-list-item>
+	<uv-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="($event,1)"></uv-list-item>
+</uv-list>
+```
+
+### 自定义内容
+
+```vue
+<uv-list>
+	<uv-list-item>自定义内容1</uv-list-item>
+	<uv-list-item>自定义内容2</uv-list-item>
+	<uv-list-item>自定义内容3</uv-list-item>
+</uv-list>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### List Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|:-|:-|:-|:-|
+| border | Boolean | false | 是否显示边框 |
+| border-color | String | #dadbde | 边框颜色 |
+| direction | String | row | 控制子组件排版方向，使用默认插槽自定义内容时不生效 |
+| padding | String | '20rpx 30rpx' | 控制子组件内边距，使用默认插槽自定义内容时不生效 |
+| customStyle | Object &#124; String | - | 自定义外部样式 |
+
+### ListItem Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|:-|:-|:-|:-|
+| border | Boolean | false | 是否显示边框 |
+| title | String | -	| 标题 |
+| note | String | -	| 描述 |
+| ellipsis | Number | 0 | title 是否溢出隐藏省略显示，可选值1-5 |
+| thumb | String | - | 左侧缩略图，若thumb有值，则不会显示扩展图标 |
+| thumb-size | String | medium | 略缩图尺寸，可选值，lg: 大图; medium: 一般; sm: 小图; |
+| show-badge | Boolean | false | 是否显示数字角标 |
+| badge | Object | - | 数字角标参数，[如上示例](/components/list.html#右侧显示角标、switch) ,更多参数：[uv-badge](https://www.uvui.cn/components/badge.html)|
+| right-text | String | - | 右侧文字内容 |
+| disabled | Boolean | false | 是否禁用 |
+| show-arrow | Boolean | true | 是否显示箭头图标 |
+| link | String | navigateTo | 新页面跳转方式，可选值[见下表](/components/list.html#link-props	) |
+| to | String | - | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功 |
+| clickable | Boolean | false | 是否开启点击反馈 |
+| show-switch | Boolean | false | 是否显示Switch |
+| switch-checked | Boolean | false | Switch是否被选中 |
+| show-extra-icon | Boolean | false	| 左侧是否显示扩展图标 | 
+| extra-icon | Object | - | 扩展图标参数，格式为 {color: '#4cd964',size: '22',name: 'photo'}，参考 [uv-icon](https://www.uvui.cn/components/icon.html) | 
+| direction | String | row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制 | 
+| customStyle | Object &#124; String | - | 自定义外部样式 |
+
+#### Link Options
+
+| 属性名 | 说明 |
+|:-|:-|
+| navigateTo | 同 uni.navigateTo() | 
+| redirectTo | 同 uni.reLaunch() | 
+| reLaunch | 同 uni.reLaunch() | 
+| switchTab | 同 uni.switchTab() | 
+
+
+### List Events
+
+| 事件名 | 说明 |返回参数 |
+|:- |:-	|:- |
+| @scroll | nvue模式，滚动时触发 | e |
+| @scrolltolower | nvue模式，滚动到底部触发 | - |
+
+### ListItem Events
+
+| 事件名 | 说明 |返回参数 |
+|:- |:-	|:- |
+| @click | 点击 uv-list-item 触发事件，需开启点击反馈：:clickable="true" | - |
+| @switchChange | 点击切换 Switch 时触发，需显示 switch | e={value:checked} |
+
+### ListItem Slots
+|名称 | 说明 |
+|:- |:-	|
+| default | 默认插槽，完全自定义内容时推荐该方式，示例如上：[自定义内容](/components/list.html#自定义内容) |
+| header | 左/上内容插槽，可完全自定义默认显示 |
+| body | 中间内容插槽，可完全自定义中间内容 |
+| footer | 右/下内容插槽，可完全自定义右侧内容 |
+
+<style scoped>
+h3[id=list-props] + table thead tr th:nth-child(1),
+h3[id=list-props] + table thead tr th:nth-child(2),
+h3[id=list-props] + table thead tr th:nth-child(3)
+{
+	width: 18%;
+}
+h3[id=listitem-props] + table thead tr th:nth-child(1),
+h3[id=listitem-props] + table thead tr th:nth-child(2),
+h3[id=listitem-props] + table thead tr th:nth-child(3)
+{
+	width: 18%;
+}
+h4[id=link-options] + table {
+	width: 40%;
+}
+h4[id=link-options] + table thead tr th:nth-child(1),
+h4[id=link-options] + table thead tr th:nth-child(2)
+{
+	width: 50%;
+}
+h3[id=listitem-events] + table thead tr th:nth-child(1),
+h3[id=list-events] + table thead tr th:nth-child(1) {
+	width: 20%;
+}
+h3[id=listitem-events] + table thead tr th:nth-child(2),
+h3[id=listitem-events] + table thead tr th:nth-child(3),
+h3[id=list-events] + table thead tr th:nth-child(2),
+h3[id=list-events] + table thead tr th:nth-child(3)
+{
+	width: 40%;
+}
+h3[id=listitem-slots] + table thead tr th:nth-child(2)
+{
+	width: 80%;
+}
+</style>

package/docs/components/loadMore.md

@@ -0,0 +1,140 @@
+## LoadMore 加载更多 <to-api/>
+
+<demo-model url="/pages/componentsD/loadmore/loadmore"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-load-more**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-load-more)
+
+:::
+
+此组件一般用于标识页面底部加载数据时的状态，共有三种状态：
+- `loadmore` 加载前，显示“加载更多”。该状态下提供点击回调`@loadmore`，在数据不够一页时，无法触发页面的`onReachBottom`生命周期，可使用该回调进行下一步操作
+- `loading` 加载中，显示“正在加载...”
+- 加载后，如果还有数据，回到“加载前”`loadmore`状态，否则加载结束，显示“没有更多了”`nomore`状态
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`status`设置组件的状态，`loadmore` - 加载前，`loading` - 加载中，`nomore` - 没有数据
+
+- **注意：** 以下示例仅为模拟效果，实际中请根据自己的逻辑，修改代码的实现
+
+```vue
+<template>
+	<view class="wrap">
+		<view class="item uv-border-bottom" v-for="(item, index) in list" :key="index">{{'第' + item + '条数据'}}</view>
+		<uv-load-more :status="status" />
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const status = ref('loadmore');
+const list = ref(15);
+const page = ref(0);
+
+</script>
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+	.item {
+		padding: 24rpx 0;
+		color: #222;
+		font-size: 28rpx;
+	}
+</style>
+```
+
+### 控制组件的提示以及动画效果
+
+- 设置`loadmore-text`属性配置`加载前`提示的文字；设置`loading-text`属性配置`加载中`提示的文字；设置`nomore-text`属性配置`无数据`提示的文字
+- 设置`:is-dot="true"`，在没有数据时，内容显示为一个“●”替代默认的“没有更多了”
+
+```vue
+<template>
+	<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const status = ref('loadmore');
+const loadingText = ref('努力加载中');
+const loadmoreText = ref('轻轻上拉');
+const nomoreText = ref('实在没有了');
+
+</script>
+```
+### 线条自定义颜色和设置为虚线
+
+设置`dashed`和`lineColor`属性实现，见如下：
+
+```vue
+<template>
+	<uv-load-more loadmoreText="看,我和别人不一样" color="#1CD29B" lineColor="#1CD29B" dashed line />
+</template>
+```
+
+
+### 手动触发加载更多
+
+有时候可能会因为网络，或者数据不满一页的原因，导致无法上拉触发`onReachBottom`生命周期，这时候(需`status`为`loadmore`状态)，用户点击组件，就会触发`loadmore`
+事件。可以在回调中，进行状态的控制和数据的加载，同时也可以修改`loadText`的`loadmore`为“上拉或点击加载更多”进行更加人性化的提示。
+
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### LoadMore Props
+
+| 参数			| 说明													| 类型					| 默认值			| 可选值					|
+| :-			| :-													| :-					| :-			| :-					|
+| status		| 组件状态												| String				| loadmore		| loadmore &#124; loading &#124; nomore		|
+| bgColor		| 组件背景颜色，在页面是非白色时会用到(默认`transparent`)	| String				| transparent	| -						|
+| icon			| 加载中时是否显示图标									| Boolean				| true			| true &#124; false					|
+| fontSize		| 字体大小，单位`rpx`或`px`							| String &#124; Number	| 14			| -						|
+| iconSize		| 图标大小，单位`rpx`或`px`								| String &#124; Number	| 17			| -						|
+| color			| 字体颜色												| String				| #606266		| -						|
+| loadingIcon	| 加载中状态的图标，详情可参考[模式类型](https://www.uvui.cn/components/loadingIcon.html#模式类型)										| String				| spinner		| spinner &#124; circle &#124; semicircle	|
+| loadmoreText	| 加载前的提示语											| String				| 加载更多		| -						|
+| loadingText	| 加载中提示语											| String				| 正在加载...	| -						|
+| nomoreText	| 没有更多的提示语										| String				| 没有更多了		| -						|
+| isDot			| `status`为`nomore`时，内容显示为一个"●"					| Boolean				| false			| true &#124; false					|
+| iconColor		| 加载中的动画图标的颜色									| String				| #b7b7b7		| -						|
+| lineColor		| 线条颜色										| String				| #E6E8EB			| -						|
+| dashed  | 是否虚线，false-实线，true-虚线											| Boolean				| false		| true &#124; false		|
+| marginTop		| 与前一个元素的距离，单位`rpx`或`px`								| String &#124; Number	| 10			| -						|
+| marginBottom	| 与后一个元素的距离，单位`rpx`或`px`								| String &#124; Number	| 10			| -						|
+| height		| 高度													| String &#124; Number	| auto			| -						|
+| line			| 是否显示左边分割线										| Boolean				| false			| true &#124; false					|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+
+### LoadMore Events
+
+
+| 事件名		| 说明											| 回调参数	| 
+| :-		| :-											| :-		|
+| @loadmore	| `status`为`loadmore`时，点击组件触发		| -			|
+
+<style scoped>
+h3[id=loadmore-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+</style>