@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/parse.md

@@ -0,0 +1,204 @@
+## Parse 富文本解析器 <to-api/>
+
+<demo-model url="/pages/componentsB/parse/parse"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-parse**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-parse)
+
+:::
+
+该组件一般用于富文本解析场景，比如解析文章内容，商品详情，带原生HTML标签的各类字符串等，此组件和uni-app官方的`rich-text`组件功能有重合之处，但是也有不同的地方。
+
+#### 相同点：
+- 二者都能解析HTML字符串
+
+#### 不同点：
+- 对于轻量、简单的字符串，`rich-text`性能更好
+- 对于复杂的字符串，使用`parse`组件效果更好，有更多的自定义属性和效果
+
+总结：如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用`rich-text`组件，在文章内容，商品详情等复杂的文本详情，可以优先使用`parse`组件。
+
+:::tip 提示
+此组件源于开源的优秀作品[mp-html](https://github.com/jin-yufeng/mp-html)，本文档只对重要的功能进行介绍，如果需要更详细的说明，请参考[mp-html官方文档](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart?id=uni-app)。
+:::
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+1. 如果你是npm安装方式 + app-nvue（其他可忽略），则需要注意static目录下需要创建相应的uv-parse文件，可以到uv-ui-npm项目去复制：[https://gitee.com/climblee/uv-ui-npm/tree/master/static](https://gitee.com/climblee/uv-ui-npm/tree/master/static)
+:::
+
+### 基本使用
+
+通过`content`参数绑定需要解析的内容即可。
+
+```vue
+<template>
+	<view class="uv-content">
+		<uv-parse :content="content"></uv-parse>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const content = ref(`
+					<p>露从今夜白，月是故乡明</p>
+					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
+				`);
+
+</script>
+<style lang="scss" scoped>
+    .uv-content {
+        padding: 24rpx;
+    }
+</style>
+```
+
+### 长按复制
+
+可以通过设置`selectable`参数为`true`来实现长按复制的效果
+
+```vue
+<uv-parse :content="content" :selectable="true"></uv-parse>
+```
+
+### 设置样式
+
+可以有两种方法可设置富文本的样式：
+
+- 通过组件的`tagStyle`参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为**字符串**的形式，而非**对象**形式：
+
+```vue
+<template>
+	<view class="uv-content">
+		<uv-parse :content="content" :tagStyle="style"></uv-parse>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const content = ref(`
+					<p>露从今夜白，月是故乡明</p>
+					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
+				`);
+const style = ref({
+  // 字符串的形式
+  p: 'color: red;font-size:32rpx',
+  span: 'font-size: 30rpx'
+});
+
+</script>
+```
+
+- 通过父元素标签，统一设置全文的颜色，行高，字体大小等，注意这种方式无法对单独的标签设置样式：
+
+```vue
+<template>
+	<view class="uv-content">
+		<uv-parse :content="content"></uv-parse>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const content = ref(`
+					<p>露从今夜白，月是故乡明</p>
+					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
+				`);
+
+</script>
+<style lang="scss" scoped>
+    .uv-content {
+        padding: 24rpx;
+        font-size: 32rpx;
+        color: $uv-content-color;
+        line-height: 1.6;
+    }
+</style>
+```
+
+### 懒加载和占位图
+
+- 设置`lazyLoad`为`true`即可开启图片懒加载功能
+- 设置`loadingImg`为网络路径或者base64图片，可以在图片加载完成前展示占位图
+
+```vue
+<uv-parse :content="content" :lazyLoad="true" :loadingImg="/xxx/xxx.jpg"></uv-parse>
+```
+
+### 链接跳转/锚点
+
+H5、App（含NVUE）外链可以直接打开，小程序端将自动复制链接  
+小程序端`a`标签设置`app-id`后可以跳转到其他小程序
+
+```vue
+<a href="#">跳转到顶部</a>
+<a href="#list">跳转到列表</a>
+<a href="https://www.uvui.cn">外部链接</a>
+<a href="/pages/demo/demo">内部链接</a>
+```
+
+<br>
+
+### 其他配置
+
+本组件还有其他更多的配置功能，如获取页面的所有图片数组，跳转页内锚点，视频播放等，如需更多的配置信息，请移步`mp-html`官方文档：[mp-html文档](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart?id=uni-app)
+
+<br>
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Parse Props
+
+| 参数		| 说明													| 类型			| 默认值	|  可选值	|
+|:-			|:-														|:-				|:-		| :-		|
+|container-style <badge text="1.0.3" /> 	| 容器的样式							| String		| -		| -			|
+|content	| 用于渲染的 `html` 字符串									| String		| -		| -			|
+|copy-link	| 是否允许外部链接被点击时自动复制							| Boolean		| true	| true &#124; false		|
+|domain		| 主域名（用于链接拼接）				| String		| -		| -			|
+|error-img	| 图片出错时的占位图链接									| String		| -		| -			|
+|lazy-load	| 是否开启图片懒加载						| Boolean		| false	| true &#124; false		|
+|loading-img	| 图片加载过程中的占位图链接						| String		| -		| -			|
+|pause-video	| 是否在播放一个视频时自动暂停其他视频						| Boolean		| true	| true &#124; false		|
+|preview-img	| 是否开启图片被点击时自动预览								| Boolean		| true	| true &#124; false		|
+|scroll-table| 是否给每个表格添加一个滚动层使其能单独横向滚动	| Boolean		| false	| true &#124;false		|
+|selectable	| 是否开启长按复制内容									| Boolean		| false	| true		|
+|set-title	| 是否将 `title` 标签的内容设置到页面标题					| Boolean		| true	| true &#124;false		|
+|show-img-menu| 是否允许图片被长按时显示菜单								| Boolean		| true	| true &#124;false		|
+|tag-style	| 设置标签的默认样式										| Object		| -		| -			|
+|use-anchor	| 是否使用锚点链接										| Boolean| false	| true &#124;false		|
+
+### Parse Events
+
+|事件名|说明|回调参数|
+|:-|:-|:-|
+| @load		|dom 树加载完成时触发	|所有节点被添加到节点树中时触发，无返回值，可以调用 api																							|
+| @ready		|渲染完成时触发		|返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能 延时较长					|
+| @error		|出错时触发			|返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息														|
+| @imgtap	|图片被点击时触发	    |返回一个 object，其中 src 是图片链接。可以在 img 标签 设置 ignore="1" 在事件中调用将不进行预览 |
+| @linktap	|在链接被点击时触发     |返回一个 object，其中包含了被点击的 a 标签的所有属性。如果需要链接不进行跳转/复制等操作，可以在 a 标签设置href="javascript:;"。可在该事件中进行下载文档等进一步操作	|
+| @play | 音视频播放时触发 | - | 
+
+
+<style scoped>
+h3[id=parse-events] + table thead tr th:nth-child(3){
+	width: 60%;
+}
+</style>

package/docs/components/pickColor.md

@@ -0,0 +1,112 @@
+# PickColor 颜色选择
+
+`uv-pick-color` 用于选择 RGBA 颜色，支持设置初始颜色、预置颜色，并通过 `confirm` 事件返回选择结果。
+
+## 基础用法
+
+```vue
+<template>
+  <view>
+    <uv-pick-color ref="pickerColor" @confirm="confirm" />
+    <button @click="openColor">打开</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const pickerColor = ref(null);
+function openColor() {
+  pickerColor.value.open();
+}
+function confirm(value) {
+  console.log('confirm', value);
+}
+
+</script>
+```
+
+## 初始颜色
+
+```vue
+<template>
+  <uv-pick-color ref="pickerColor" :color="color" @confirm="confirm" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const pickerColor = ref(null);
+const color = ref({
+  r: 60,
+  g: 156,
+  b: 255,
+  a: 1
+});
+function confirm(value) {
+  console.log(value);
+}
+
+</script>
+```
+
+## 预置颜色
+
+```vue
+<template>
+  <uv-pick-color ref="pickerColor" :prefab-color="prefabColor" @confirm="confirm" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const pickerColor = ref(null);
+const prefabColor = ref([{
+  r: 60,
+  g: 156,
+  b: 255,
+  a: 1
+}, {
+  r: 245,
+  g: 108,
+  b: 108,
+  a: 1
+}]);
+function confirm(value) {
+  console.log(value);
+}
+
+</script>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `color` | 初始颜色。 | `Object` | `{ r: 0, g: 0, b: 0, a: 0 }` |
+| `prefabColor` | 底部预置颜色。 | `Array` | `[]` |
+| `closeOnClickOverlay` | 是否允许点击遮罩关闭。 | `Boolean` | `false` |
+| `title` | 顶部标题。 | `String` | - |
+| `cancelText` | 取消按钮文字。 | `String` | `取消` |
+| `confirmText` | 确认按钮文字。 | `String` | `确定` |
+| `cancelColor` | 取消按钮颜色。 | `String` | `#909193` |
+| `confirmColor` | 确认按钮颜色。 | `String` | `#3c9cff` |
+
+## Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `open()` | 打开颜色选择器。 |
+| `close()` | 关闭颜色选择器。 |
+
+## Events
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `confirm` | 点击确认按钮触发。 | 颜色值，例如 `{ hex: '#000000', rgba: { r: 0, g: 0, b: 0, a: 0 } }` |
+| `cancel` | 点击取消按钮触发。 | - |
+| `close` | 组件关闭时触发。 | - |
+
+## 平台
+
+支持 App(vue)、H5、小程序和 Vue 3；nvue 暂不支持。

package/docs/components/picker.md

@@ -0,0 +1,357 @@
+## Picker 选择器 <to-api/>
+
+<demo-model url="/pages/componentsB/picker/picker"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-picker**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-picker)
+
+:::
+
+此选择器用于单列，多列，多列联动的选择场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+
+### 基本使用
+
+- 通过`ref`调用`open()`控制组件的打开。
+- 都通过传入数组`columns`配置选择项。
+
+:::warning 注意
+columns参数中是数组中嵌套数组：`columns: [ ['中国', '美国', '日本'] ]`，否则显示异常
+:::
+
+```vue
+<template>
+	<view>
+		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
+		<button @click="openPicker">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const picker = ref(null);
+const columns = ref([['中国', '美国', '日本']]);
+function openPicker() {
+  picker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+
+</script>
+```
+
+### 多列模式与多列联动
+
+此模式通过传入`columns`参数，此参数为二维数组，通过`change`事件完成联动操作。
+
+```vue
+<template>
+	<view>
+		<uv-picker ref="picker" :columns="columns" @confirm="confirm" @change="change"></uv-picker>
+		<button @click="openPicker">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const picker = ref(null);
+const columns = ref([['中国', '美国'], ['深圳', '厦门', '上海', '拉萨']]);
+const columnData = ref([['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加']]);
+function openPicker() {
+  picker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+function change(e) {
+  const {
+    columnIndex,
+    index
+  } = e;
+  if (columnIndex === 0) {
+    picker.value.setColumnValues(1, columnData.value[index]);
+  }
+}
+
+</script>
+```
+
+### 省市区三级联动
+
+需要用到该示例中的regions.json文件，可以到[uv-ui](https://ext.dcloud.net.cn/plugin?id=12287)项目中相应目录找到
+
+**注意：uvui项目中提供的regions.json只做演示数据，不一定准确，开发者可以使用其他更准确的数据，只要格式一样即可**
+
+```vue
+<template>
+	<view>
+		<uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="name" @change="change" @confirm="confirm">
+		</uv-picker>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+
+const picker = ref(null);
+const loading = ref(true);
+const provinces = ref([]);
+const citys = ref([]);
+const areas = ref([]);
+const pickerValue = ref([0, 0, 0]);
+const defaultValue = ref([3442, 1, 2]);
+getData();
+const addressList = computed(() => {
+  return [provinces.value, citys.value, areas.value];
+});
+function getData() {
+  uni.request({
+    method: 'GET',
+    url: '/static/uvui/example/regions.json',
+    success: res => {
+      const {
+        statusCode,
+        data
+      } = res;
+      if (statusCode === 200) {
+        console.log('获取的数据：', res);
+        provinces.value = data.sort((left, right) => Number(left.code) > Number(right.code) ? 1 : -1);
+        console.log(provinces.value);
+        handlePickValueDefault();
+        setTimeout(() => {
+          loading.value = false;
+        }, 200);
+      }
+    }
+  });
+}
+function handlePickValueDefault() {
+  // 设置省
+  pickerValue.value[0] = provinces.value.findIndex(item => Number(item.id) === defaultValue.value[0]);
+  // 设置市
+  citys.value = provinces.value[pickerValue.value[0]]?.children || [];
+  pickerValue.value[1] = citys.value.findIndex(item => Number(item.id) === defaultValue.value[1]);
+  // 设置区
+  areas.value = citys.value[pickerValue.value[1]]?.children || [];
+  pickerValue.value[2] = areas.value.findIndex(item => Number(item.id) === defaultValue.value[2]);
+  // 重置下位置
+  picker.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]], true);
+}
+function change(e) {
+  if (loading.value) return;
+  const {
+    columnIndex,
+    index,
+    indexs
+  } = e;
+  // 改变了省
+  if (columnIndex === 0) {
+    citys.value = provinces.value[index]?.children || [];
+    areas.value = citys.value[0]?.children || [];
+    picker.value.setIndexs([index, 0, 0], true);
+  } else if (columnIndex === 1) {
+    areas.value = citys.value[index]?.children || [];
+    picker.value.setIndexs(indexs, true);
+  }
+}
+function open() {
+  picker.value.open();
+  handlePickValueDefault();
+}
+function confirm(e) {
+  console.log('确认选择的地区：', e);
+  uni.showToast({
+    icon: 'none',
+    title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
+  });
+}
+
+</script>
+```
+
+### 加载状态
+
+由于需要多列联动，此模式和上面的"多列模式"基本相同，在加载之前将`loading`设置为`true`，数据获取完成之后再置为`false`即可。
+
+```vue
+<template>
+	<view>
+		<uv-picker ref="picker" :loading="loading" :columns="columns" @change="change"></uv-picker>
+		<button @click="openPicker">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const picker = ref(null);
+const loading = ref(false);
+const columns = ref([['中国', '美国'], ['深圳', '厦门', '上海', '拉萨']]);
+const columnData = ref([['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加']]);
+function openPicker() {
+  picker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+function change(e) {
+  console.log('change');
+  const {
+    columnIndex,
+    index
+  } = e;
+  if (columnIndex === 0) {
+    loading.value = true;
+    setTimeout(() => {
+      picker.value.setColumnValues(1, columnData.value[index]);
+      loading.value = false;
+    }, 2000);
+  }
+}
+
+</script>
+```
+
+### 自定义选项值
+
+参数`columns`可以传入自定义选项值，可以通过`keyName`参数控制对应的显示属性。
+
+```vue
+<template>
+	<view>
+		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirm"></uv-picker>
+		<button @click="openPicker">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const picker = ref(null);
+const columns = ref([[{
+  label: '雪月夜',
+  // 其他属性值
+  id: 2021
+  // ...
+}, {
+  label: '冷夜雨',
+  id: 804
+}]]);
+function openPicker() {
+  picker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+
+</script>
+```
+
+### 自定义颜色
+
+通过`color`和`activeColor`属性分别设置文本颜色和文本选中颜色
+
+```vue
+<template>
+	<view>
+		<uv-picker ref="picker" :columns="columns" color="red" activeColor="blue" @confirm="confirm"></uv-picker>
+		<button @click="openPicker">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const picker = ref(null);
+const columns = ref([['中国', '美国', '日本']]);
+function openPicker() {
+  picker.value.open();
+}
+function confirm(e) {
+  console.log('confirm', e);
+}
+
+</script>
+```
+
+### 默认值
+
+- **通过defaultIndex设置：**
+
+此组件的所有模式，都可以设置默认值，通过`defaultIndex`数组参数配置，数组元素的0表示选中每列的哪个值(从0开始)，下面分别对几种模式进行说明：
+
+**注意：** `defaultIndex`数组的长度，必须与列数相同，否则无效。
+
+1. 单列模式
+
+如设置`defaultIndex`为`[1]`表示默认选中第2个(从0开始)，`[5]`表示选中第6个。
+
+2. 多列模式
+
+如设置`defaultIndex`为`[1, 3]`表示第一列默认选中第2个，第二列默认选中第4个。
+
+- **通过setIndexs()方法设置：**
+
+也可以通过模板 ref 调用 `picker.value?.setIndexs([1], true)` 进行设置，第一个参数与 `defaultIndex` 规则一样。
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Picker Props
+| 参数				| 说明										| 类型					| 默认值		|  可选值	|
+|:-					|:-											|:-						|:-			|:-			|
+| columns			| 设置每一列的数据，见上方说明					| Array					| -			| -			|
+| keyName			| 自定义`columns`参数中需要展示的`text`属性键名				| String				| -		| -			|
+| showToolbar		| 是否显示顶部的操作栏						    | Boolean				| true		| true &#124; false		|
+| title				| 顶部中间的标题								| String				| -			| -			|
+| round	<badge text="1.0.10" />			| 弹窗圆角								| String &#124; Number				| 0			| -			|
+| loading			| 加载状态									| Boolean				| false		| true	&#124; false	|
+| itemHeight		| 各列中，单个选项的高度						| String &#124; Number	| 44		| -			|
+| cancelText		| 取消按钮的文字								| String				| 取消		| -			|
+| confirmText		| 确认按钮的文字								| String				| 确认		| -			|
+| cancelColor		| 取消按钮的颜色								| String				| #909193	| -			|
+| confirmColor		| 确认按钮的颜色								| String				| #3c9cff	| -			|
+| color <badge text="1.0.5" /> | 文本颜色 | String | #606266 | - |
+| activeColor <badge text="1.0.5" /> | 选中文本颜色 | String | #606266 | - |
+| visibleItemCount	| 每列中可见选项的数量						    | String &#124; Number	| 5			| -			|
+| closeOnClickOverlay | 是否允许点击遮罩关闭选择器 | Boolean				| true		| true &#124; false		|
+| closeOnClickConfirm | 是否允许点击确认关闭选择器 | Boolean				| true		| true &#124; false		|
+| defaultIndex		| 各列的默认索引。如果设置该值不生效，请使用下方的`setIndexs()`方法								| Array					| -			| -			|
+| immediateChange | 是否在手指松开时立即触发`change`事件。若不开启则会在滚动动画结束后触发`change`事件，只在微信`2.21.1`及以上有效 	| Boolean					| true		| true &#124; false			|
+
+### Picker Methods
+| 名称				| 说明										|
+|:-					|:-											|
+| open	| 弹出颜色选择组件 | 
+| close	| 关闭颜色选择组件 | 
+| setIndexs			| 设置对应列的选择值，eg：`picker.value?.setIndexs([1], true)`	|
+| setColumnValues	| 多列联动时需要用到，见[上方用法](/components/picker.html#多列模式与多列联动)				|
+
+### Picker Events
+|事件名		|说明							|回调参数							|
+|:-			|:-								|:-									|
+| @confirm	| 点击确定按钮触发	| Array: 见上方"回调参数"部分说明		|
+| @change	| 当选择值变化时触发				| Array: 见上方"回调参数"部分说明		|
+| @cancel	| 点击取消按钮触发					| -									|
+| @close		| 关闭选择器时触发				| -									|
+
+<style scoped>
+h3[id=picker-methods] + table thead tr th:nth-child(2) {
+	width: 70%;
+}
+</style>