@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/popup.md

@@ -0,0 +1,221 @@
+## Popup 弹出层（抽屉） <to-api/>
+
+<demo-model url="/pages/componentsC/popup/popup"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-popup**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-popup)
+
+:::
+
+该组件用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义，强扩展性。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+::: warning 提示
+
+1. [uv-popup等组件怎么禁止滚动穿透](https://www.uvui.cn/components/problem.html#%E5%9B%9B%E3%80%81uv-popup%E7%AD%89%E7%BB%84%E4%BB%B6%E6%80%8E%E4%B9%88%E7%A6%81%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F)
+
+2. <a href="#yh">弹出闪一下或不丝滑的优化方案</a>
+
+:::
+
+### 基本使用
+
+- 弹出层的内容通过`slot`传入，由用户自定义
+- 通过`ref`调用`open()`和`close()`控制弹出层的打开和关闭
+
+```vue
+<template>
+	<view>
+		<uv-popup ref="popup" @change="change">
+			<view>
+				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
+				不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
+				转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
+				但愿人长久，千里共婵娟。</text>
+			</view>
+		</uv-popup>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const popup = ref(null);
+function open() {
+  popup.value.open('top');
+}
+function change(e) {
+  console.log('弹窗状态改变：', e);
+}
+
+</script>
+```
+
+### 设置弹出层的方向
+
+- 通过 `mode` 属性设置，可以设置为`left`、`top`、`right`、`bottom`、`center`，默认`center`
+- 也可以通过 `open()` 方法传一个参数可代替 `mode` 属性，例如上述的基本使用。
+
+```vue
+<template>
+	<view>
+		<uv-popup ref="popup" mode="center" @change="change">
+			<view style="width: 600rpx;">
+				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
+				不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
+				转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
+				但愿人长久，千里共婵娟。</text>
+			</view>
+		</uv-popup>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const popup = ref(null);
+function open() {
+  popup.value.open();
+}
+function change(e) {
+  console.log('弹窗状态改变：', e);
+}
+
+</script>
+```
+
+### 禁用点击遮罩关闭
+
+默认情况下，点击遮罩会自动关闭弹窗，如不想点击关闭，只需将`closeOnClickOverlay`设置为`false`，这时候要关闭`uv-popup`，只能手动调用 `close()` 方法。
+
+```vue
+<template>
+	<view>
+		<uv-popup ref="popup" :close-on-click-overlay="false">
+			<view style="width: 600rpx;">
+				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
+				不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
+				转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
+				但愿人长久，千里共婵娟。</text>
+				<button @click="close">关闭</button>
+			</view>
+		</uv-popup>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const popup = ref(null);
+function open() {
+  popup.value.open();
+}
+function close() {
+  popup.value.close();
+}
+
+</script>
+```
+
+<div id="yh"></div>
+
+### 优化方案
+
+有时候弹窗内容较多时，或者内容比较复杂时，在弹出的时候，可能会闪一下，感觉不丝滑。其实这是渲染的问题，只能在内容区去解决：
+
+解决思路：设置 `custom-style` 属性设置一个高度，根据自己的实际情况设置具体高度，或者设置一个 `min-height`。这样解决就可以得到很好的优化。 
+
+注意：如果只设置 `max-height` 不会有效果。
+
+```vue
+<template>
+	<view>
+		<uv-popup ref="popup" mode="bottom" custom-style="height: 200rpx;">
+			<view class="content">
+				<view>里面是很比较多或复杂的内容...</view>
+				<view>里面是很比较多或复杂的内容...</view>
+				<view>里面是很比较多或复杂的内容...</view>
+				<view>里面是很比较多或复杂的内容...</view>
+				<view>里面是很比较多或复杂的内容...</view>
+			</view>
+		</uv-popup>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const popup = ref(null);
+function open() {
+  popup.value.open();
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Popup Props
+
+
+| 参数		| 说明			| 类型		| 默认值		|  可选值		|
+|:-			|:-			|:-		|:-			|:-				|
+| mode	| 弹出方向：`top`- 顶部弹出 `bottom`- 底部弹出 `left`- 左侧弹出 `right`- 右侧弹出 	`center`- 中间弹出		| String | center	| top &#124; bottom &#124; left &#124; right &#124; center			|
+| duration				| 动画时长，单位ms	 	| String &#124; Number	| 300 | -										|
+| overlay				| 是否显示遮罩		| Boolean				| true		| true &#124; false		|
+| overlayStyle			| 遮罩自定义样式，一般用于修改遮罩颜色，如：`{background: 'rgba(3, 100, 219, 0.5)'}` | Object &#124; String	 | - | - |
+| overlayOpacity | 遮罩透明度，`0-1`之间，勿与`overlayStyle`共用 | Number &#124; String  | 0.5 | - |
+| closeOnClickOverlay	| 点击遮罩是否关闭弹窗	| Boolean | true | true &#124; false	 	|
+| zIndex				| 弹出层的`z-index`值 | Number &#124; String | 10075 | - |
+| safeAreaInsetTop		| 是否留出<a href="/guide/safeAreaInset.html#顶部安全区" target="_blank">顶部安全区</a>（状态栏高度）	 | Boolean	 | false		| true &#124; false	 |
+| safeAreaInsetBottom	| 是否为留出<a href="/guide/safeAreaInset.html" target="_blank">底部安全区适配</a> | Boolean	 | true		| true &#124; false	 |
+| closeable				| 是否显示关闭图标 	 | Boolean		 | false		| true &#124; false			 	|
+| closeIconPos			| 自定义关闭图标位置，`top-left`-左上角，`top-right`-右上角，`bottom-left`-左下角，`bottom-right`-右下角	| String				| top-right	| top-right &#124; top-left &#124; bottom-left &#124; bottom-right	|
+| zoom					| 当`mode=center`时 是否开启缩放 | Boolean	 	| true		| true &#124; false	 |
+| bgColor | 背景色，设置为""或none可去除默认的白色背景  | String  | none		| -	 |
+| round | 设置圆角值，仅对`mode = top | bottom | center`有效  | Number &#124; String  | 0		| -	 |
+| customStyle | 定义内容区需要用到的外部样式	 	| Object	 	| -			| -			 		|
+
+### Popup Methods
+
+| 方法名	| 说明 | 参数 |
+|:-	 |:- |:- |
+| open | 打开弹出层	 | open(String:type) ，如果参数可代替 type 属性 |
+| close | 关闭弹出层 | - |
+
+### Popup Events
+
+|事件名	|说明		|回调参数	|
+|:-		|:-			|:-			|
+| @change	| 打开关闭弹窗触发	| e={show: true &#124; false}	|
+| @maskClick	| 点击遮罩触发	| -			|
+
+
+### Popup Slots
+
+|名称|	说明|
+|:-		|:-			|
+|default| 弹窗内容 |
+
+<style scoped>
+h3[id=popup-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/problem.md

@@ -0,0 +1,300 @@
+# 常见问题
+
+## 目录
+
+- [一、如何解决微信小程序关于选择器的警告提示](/components/problem.html#一、如何解决微信小程序关于选择器的警告提示)
+- [二、文档右侧的演示demo有些功能不能操作](/components/problem.html#二、文档右侧的演示demo有些功能不能操作)
+- [三、使用的ref与组件名重名，在vue3的setup语法糖中会报错](/components/problem.html#三、使用的ref与组件名重名-在vue3的setup语法糖中会报错)
+- [四、uv-popup等组件怎么禁止滚动穿透](/components/problem.html#四、uv-popup等组件怎么禁止滚动穿透)
+- [五、为什么部分组件在弹出层中显示异常或功能异常](/components/problem.html#五、为什么部分组件在弹出层中显示异常或功能异常)
+- [六、Android端list中为什么不能使用uv-image等组件](/components/problem.html#六、android端list中为什么不能使用uv-image等组件)
+- [七、uv-row、uv-grid等组件在百度小程序、抖音小程序等平台显示异常](/components/problem.html#七、uv-row、uv-grid等组件在百度小程序、抖音小程序等平台显示异常)
+- [八、在同页面使用picker-view和swiper且设置竖向自动滚动时，选择时会存在bug](/components/problem.html#八、在同页面使用picker-view和swiper且设置竖向自动滚动时-选择时会存在bug)
+- [九、怎么隐藏uv-tabs等组件的滚动条](/components/problem.html#九、怎么隐藏uv-tabs等组件的滚动条)
+- [十、避免部分扩展组件之间套娃，否则会造成错乱](/components/problem.html#十、避免部分扩展组件之间套娃-否则会造成错乱)
+- [十一、为什么uv-popup等弹窗组件显示不使用show属性进行控制，而是使用ref控制](/components/problem.html#十一、为什么uv-popup等弹窗组件显示不使用show属性进行控制-而是使用ref控制)
+
+## 一、如何解决微信小程序关于选择器的警告提示？（谨慎使用）
+
+::: warning 微信小程序组件警告提示
+Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors...
+:::
+
+### 解决方案：
+
+暂时无需解决，不影响使用
+
+## 二、文档右侧的演示demo有些功能不能操作？
+
+因为演示demo是`iframe`嵌入的`H5`，所以组件中的`@touchstart`等事件会失效。
+
+### 解决方案：
+
+直接访问[https://h5.uvui.cn](https://h5.uvui.cn)的手机模式进行体验
+
+## 三、使用的ref与组件名重名，在vue3的setup语法糖中会报错
+
+```vue
+<!-- 错误示例 -->
+<template>
+	<view style="padding-top: 100px;">
+		<uv-demo ref="uvDemo"></uv-demo>
+	</view>
+</template>
+<script setup>
+	import { ref } from 'vue'
+	const uvDemo = ref(null);
+
+</script>
+```
+::: warning 报错
+上述代码会报错导致不能正常显示<br>
+Invalid vnode type when creating vnode: null.<br>
+Component is missing template or render function. 
+:::
+
+### 解决方案：将ref改成其他名字即可，如下：
+```vue
+<template>
+	<view style="padding-top: 100px;">
+		<uv-demo ref="uvDemo1"></uv-demo>
+	</view>
+</template>
+<script setup>
+	import { ref } from 'vue'
+	const uvDemo1 = ref(null);
+
+</script>
+```
+
+## 四、uv-popup等组件怎么禁止滚动穿透？
+
+使用uv-popup等弹出层组件时，会发现遮罩下方的内容可以滚动，这就是穿透滚动。
+
+由于平台的自身原因，除H5之外，其他平台都不能在组件内禁止滚动穿透，所以在微信小程序、App 平台，页面内需要用户特殊处理一下。
+
+### 解决方案：
+
+#### 微信小程序/App
+在 `微信小程序/App` 平台可使用 `page-meta` 组件动态修改页面样式，<br>
+以 `uv-popup` 为例，需要在 `data` 中定义一个变量，用来表示 `uv-popup` 的开启关闭状态，并通过这个变量修改 `page-meta` 的 `overflow` 属性。<br>
+在 `uv-popup` 的 打开和关闭 事件中可以接受到 `uv-popup` 的开启关闭状态 ，并赋值给上面的变量。
+```vue
+<template>
+	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
+	<view class="container">
+		<!-- 普通弹窗 -->
+		<uv-popup ref="popup" @open="change(true)" @close="change(false)">
+		<!-- ... -->
+		</uv-popup>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const show = ref(false);
+const popup = ref(null);
+function change(show) {
+  show.value = show;
+}
+
+</script>
+```
+
+#### Tips
+- h5 滚动穿透不需要处理，组件内部有处理。或者自己根据状态设置 `body` 上面的 `overflow` 属性为 `hidden` 和 `visible`，也可以达到这种效果。
+- `wx`、`app` 需要 使用 `page-meta` 组件配合阻止滚动穿透，`page-meta` 组件，一个页面只能存在一个。
+- 其他平台无法阻止滚动穿透，建议使用 `scroll-view` 滚动 ，手动设置 `overflow:hidden`或设置 `scroll-y`属性来禁止滚动。
+
+## 五、为什么部分组件在弹出层中显示异常或功能异常？
+
+在弹出层 `uv-popup` 中使用 `uv-subsection` 、`uv-tabs`、`uv-rate` 等组件时，可能会显示异常或功能异常。
+
+### 原因：
+在`uv-subsection` 、`uv-tabs`、`uv-rate` 等组件中，使用了 `js` 去计算相应的节点参数，弹窗未显示的时候组件内部计算的值可能存在偏差，所以导致异常。
+
+### 解决方案：
+使用`v-if`进行控制，在弹窗弹出后，再去使用`v-if = "true"`达到重新创建组件的效果，案例如下：
+```vue
+<template>
+	<view class="uv-content">
+		<uv-popup :show="show1" mode="center" @open="open">
+			<view class="content" style="width: 600rpx;height: 300px;background-color: #fff;">
+				<uv-subsection :list="list" v-if="show2" :current="current" @change="index=>current = index"></uv-subsection>
+			</view>
+		</uv-popup>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+const show1 = ref(false);
+const show2 = ref(false);
+const current = ref(1);
+const list = ref(['未付款', '待评价', '已付款']);
+function open() {
+  // 弹窗弹出后，给一点延迟再去显示分段器组件，建议设置的值大点
+  setTimeout(() => {
+    show2.value = true;
+  }, 200);
+}
+onLoad(() => {
+  show1.value = true;
+});
+
+</script>
+```
+
+## 六、Android端list中为什么不能使用uv-image等组件？
+
+- `Android`平台，因`<list>`高效内存回收机制，不在屏幕可见区域的组件不会被创建，导致一些内部需要计算宽高的组件无法正常工作。
+- `Android`平台，因`<list>`高效内存回收机制，不在屏幕可见区域的组件不会被创建，组件如果使用`animation.transition`在内容回收后会导致显示异常，所以与`uv-transition`相关的组件不能使用，例如：`uv-image`、`uv-tags`等组件。
+- `uv-list`、`uv-waterfall`等组件在`Android`平台使用了`<list>`、`<cell>`封装，所以在该组件中仍然不能使用`uv-image`、`uv-tags`等组件。
+
+## 七、uv-row、uv-grid等组件在百度小程序、抖音小程序等平台显示异常
+
+- `uv-row`、`uv-grid`、`uv-tabbar`等组件是由父组件和子组件组合而成，并且在父组件进行`flex`布局，但是在百度小程序、抖音小程序等平台不支持[将自定义节点设置成虚拟](https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE)，即`virtualHost: true`不生效。
+
+## 八、在同页面使用picker-view和swiper且设置竖向自动滚动时，选择时会存在bug
+
+- 该BUG是`uniapp`官方就存在的，已经反馈了此问题：[https://ask.dcloud.net.cn/question/174410](https://ask.dcloud.net.cn/question/174410)
+- 可能影响的组件eg：在一个页面同时使用`uv-picker`和`uv-notice-bar`且设置竖向滚动时，然后再使用`uv-picker`时候，可能会出现选择时闪动的情况，如果不介意可以忽略。
+- 可能影响的组件eg2： 在 app-nvue 项目同一个页面中，使用 `list` 和 `uv-notice-bar`且设置竖向自动滚动时，在 `list` 下拉刷下时，`uv-notice-bar`会出现拉回到第一个。
+
+### 解决方案：
+
+1. 在 picker 组件打开时，禁止 uv-notice-bar 自动滚动，有属性可以设置，自行查看文档。
+2. 在 list 组件滚动时，禁止 uv-notice-bar 自动滚动，有属性可以设置，自行查看文档。
+
+## 九、怎么隐藏uv-tabs等组件的滚动条?
+
+`uv-tabs` 等组件使用了`scroll-view`标签，在`H5`等平台会出现滚动条，需要全局设置滚动条样式，局部设置不生效。
+
+### 解决方案：
+
+```vue
+/* APP.vue */
+<style lang="scss">
+	@import '@/uni_modules/uv-ui/index.scss';
+</style>
+```
+
+或
+
+```vue
+/* APP.vue */
+<style lang="scss">
+	::-webkit-scrollbar {
+		display: none;  
+		width: 0 !important;  
+		height: 0 !important;  
+		-webkit-appearance: none;  
+		background: transparent;  
+	}
+</style>
+```
+## 十、避免部分扩展组件之间套娃，否则会造成错乱
+
+- 套娃的简单案例：`uv-popup` 中嵌套 `uv-calendars`。造成的后果可以复制下面的代码体验下。
+```vue
+<template>
+	<view>
+		<uv-popup ref="popup" mode="top">
+			<view>
+				<uv-button :text="`选择时间${time}`" @click="openTime"></uv-button>
+				<!-- 套在了uv-popup中...过分...，uv-calendars属于弹窗性质的组件，这样做的后果就是底层组件都不知道自己是啥娃子了 -->
+				<uv-calendars ref="calendars" @confirm="confirm" />
+			</view>
+		</uv-popup>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const time = ref('');
+const popup = ref(null);
+const calendars = ref(null);
+function open() {
+  popup.value.open('top');
+}
+function openTime() {
+  calendars.value.open();
+}
+function confirm(e) {
+  time.value = e.fulldate;
+}
+
+</script>
+```
+- 正确的做法：弹窗类等组件避免套在其他扩展组件里面，要放在根节点下面使用，且根节点不能设置宽高等属性。
+```vue
+<template>
+	<view>
+		<uv-popup ref="popup" mode="top">
+			<view>
+				<uv-button :text="`选择时间${time}`" @click="openTime"></uv-button>
+			</view>
+		</uv-popup>
+		<button @click="open">打开</button>
+		<uv-calendars ref="calendars" @confirm="confirm" />
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const time = ref('');
+const popup = ref(null);
+const calendars = ref(null);
+function open() {
+  popup.value.open('top');
+}
+function openTime() {
+  calendars.value.open();
+}
+function confirm(e) {
+  time.value = e.fulldate;
+}
+
+</script>
+```
+- 总结：一些套娃的行为是不利于前端开发的！大家要谨记，特别是扩展组件，与原生组件有本质上的区别。为啥不能这样做，比如弹窗组件底层使用了动画组件，动画的开始执行位置是-100%，你把它执行的范围给缩小到你指定的范围，那弹出来的效果肯定是不对的。
+
+## 十一、为什么uv-popup等弹窗组件显示不使用show属性进行控制，而是使用ref控制
+
+1. 弹窗等组件中都会用到调用open方法去执行后续程序，使用监听show属性也可以做到，但是实际上使用watch监听show属性的变化，会比直接调方法执行的慢些，监听到去执行是需要时间的，所以uv-ui推荐直接调用方法，这可能也是uni-ui组件使用ref的原因，跟着官方对齐没毛病吧。
+
+2. 在Vuejs 中，ref 方法和监听show变化都可以用来访问和操作DOM元素。但是，它们的执行顺序是不确定的，因为它们是由 Vuejs 内部处理的。通常情况下，ref方法会先于监听show变化执行，因为它可以更早地访问和操作DOM元素。然而，在某些情况下，监听show变化可能会先于ref方法执行。例如，当show属性在组件实例化之前发生变化时，监听show变化可能会先执行。
+
+3. 可以用一个简单示例来解释：可以看出下面的示例show的变化在前，open方法执行在后，但是最后打印的结果是open中的程序在前，监听show变化程序在后。
+
+4. 总结：从性能和代码洁癖上来考虑，还是建议使用ref进行控制，这也正是uv-ui深思熟虑的结果。
+
+index.vue
+
+```vue
+<template>
+	<view class="content">
+		<demo ref="demoRef" :show="show"></demo>
+		<button @click="handle">执行</button>
+	</view>
+</template>
+<script setup>
+import { ref } from "vue";
+const show = ref(false);
+const demoRef = ref(null);
+function handle() {
+  show.value = true;
+  demoRef.value.open();
+}
+
+</script>
+```
+
+demo组件：
+```vue
+<template></template>
+<script setup>
+function open() {
+  console.log('监听open方法执行');
+}
+
+</script>
+```

package/docs/components/qrcode.md

@@ -0,0 +1,169 @@
+## QRCode 二维码 <to-api/>
+
+<demo-model url="/pages/componentsA/qrcode/qrcode"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-qrcode**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-qrcode)
+
+:::
+
+组件是超级强大的二维码生成功能，可扩展性高。自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等，具体下方有说明。
+
+**此组件源于开源的优秀作品[uQRCode](https://ext.dcloud.net.cn/plugin?id=1287)，`uv-ui`只做了部分优化。本文档只对`uni-app`组件方式等重要的功能进行介绍，如果需要原生方法或更详细的说明，请参考[uQRCode官方文档](https://uqrcode.cn/doc/document/uni-app.html)。**
+
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+1. 在`nvue`中使用该组件，会有报错提示`reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!`。
+该报错完全不影响使用，是因为`weex`中使用`gcanvas`的BUG，只要用到gcanvas都会有，不影响应用，可以无视。
+2. `options`属性设置size属性暂时不生效，直接在组件上设置size即可`<uv-qrcode size="300" ...`。
+3. nvue本地运行有二维码，打包后没有二维码，解决方案参考：[nvue打包后生成失败](https://uqrcode.cn/doc/guide/common-problem.html#nvue%E6%89%93%E5%8C%85%E5%90%8E%E7%94%9F%E6%88%90%E5%A4%B1%E8%B4%A5)
+:::
+
+### 基本使用
+
+二维码默认尺寸为 `200px` ，可以根据设置 `size` 进行调整。下面有更多参数说明。
+
+```vue
+<template>
+	<view>
+		<uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
+	</view>
+</template>
+```
+
+### 自定义样式
+
+二维码配置选项，可以配置`data`、`size`、`margin`等参数，具体参考下方参数说明。
+
+```vue
+<template>
+	<view>
+		<uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options2"></uv-qrcode>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const qrcode = ref(null);
+const options2 = ref({
+  data: 'https://www.uvui.cn',
+  size: 300,
+  useDynamicSize: false,
+  errorCorrectLevel: 'Q',
+  margin: 10,
+  areaColor: "#F95F6B",
+  backgroundColor: "#3c9cff",
+  // 指定二维码前景，一般可在中间放logo
+  foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
+});
+
+</script>
+```
+
+### 自定义风格
+
+通过内置 `registerStyle` 方法进行注册扩展插件，组件仅支持注册type为style的drawCanvas扩展，具体参考下方说明。
+
+下载更多风格的模板，可以到[uQRCode官方-风格下载](https://uqrcode.cn/doc/plugin/style.html) 。
+
+温馨提示：`options` 配置中的 `style` 与插件标识对应上，比如示例中的 `style: 'round'`，`round` 即是标识。
+
+```vue
+<template>
+	<view>
+		<uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options3"></uv-qrcode>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+import QRCodeStyleRound from './uqrcode.plugin.round.es.js';
+import { onReady } from '@dcloudio/uni-app';
+
+const qrcode = ref(null);
+const options3 = ref({
+  style: 'round',
+  // 指定二维码前景，一般可在中间放logo
+  foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
+});
+onReady(() => {
+  /* 注册扩展插件 */
+  qrcode.value.registerStyle(QRCodeStyleRound); // qrcode为组件的ref名称
+});
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### QRCode Props 
+
+| 参数			| 说明	| 类型		| 默认值	| 可选值	|
+| :-			| :- | :-		| :-	| :-	|
+| value	| 二维码内容 | String	| -		| -		|
+| options	| 二维码配置选项 | Object	| -		| 参考[uQRCode官方基本配置](https://uqrcode.cn/doc/document/native.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE)		|
+| size	| 二维码尺寸，单位可以是px，rpx | String &#124; Number	| 200		| -		|
+| fileType	| 导出的文件类型 | String	| png		| png &#124; jpg	|
+| start	| 是否初始化组件后就开始生成 | Boolean	| true		| true &#124; false		|
+| auto	| 是否数据发生改变自动重绘 | Boolean	| true 	| true &#124; false	|
+| hide	| 隐藏组件 | Boolean	| false	| true &#124; false	|
+| type	| canvas 类型，微信小程序默认使用2d，其他为normal | String	| - | 2d &#124; normal	|
+| queue	| 队列绘制，主要针对nvue端 | Boolean	| false		| true &#124; false	|
+| isQueueLoadImage	| 是否队列加载图片，可减少canvas发起的网络资源请求，节省服务器资源 | Boolean	| false		| true &#124; false	|
+| loading	| loading状态 | Boolean	| true		| true &#124; false	|
+| h5SaveIsDownload	| H5保存即自动下载（在支持的环境下），默认false为仅弹层提示用户需要长按图片保存，不会自动下载 | Boolean	| false		| true &#124; false	|
+| h5DownloadName	| H5下载名称 | String	| uvQRCode	| -		|
+| h5SaveTip（1.0.3）	| H5保存二维码时候是否显示提示 | Boolean	| true	| true &#124; false	|
+
+### QRCode Methods
+
+|事件名		|说明											|使用方法	|
+|:-			|:-												|:-			|
+| make()	| 生成二维码	| `qrcode.value?.make({ success: () => console.log('生成成功'), fail: err => console.log(err) })`	|
+| remake()	| 重新生成二维码			| `qrcode.value?.remake({ success: () => console.log('生成成功'), fail: err => console.log(err) })`	|
+| toTempFilePath()	| 导出临时文件路径。请在 complete 事件返回success=true后调用。	| `qrcode.value?.toTempFilePath({ success: res => console.log(res) })`		|
+| save()	| 保存二维码到本地相册。为了保证方法调用成功，请在 complete 事件返回success=true后调用。| `qrcode.value?.save({ success: res => console.log(res) })`	 |
+| registerStyle() | 注册扩展插件，组件仅支持注册type为style的drawCanvas扩展。 | 参考上面的案例[自定义风格](/components/qrcode.html#自定义风格)。下载更多风格的模板，可以到[uQRCode官方-风格](https://uqrcode.cn/doc/plugin/style.html) |
+### QRCode Events
+
+|事件名		|说明											|回调参数	|
+|:-			|:-												|:-			|
+| @complete	| 生成完成时触发 | { success: true &#124; false }	|
+| @click	| 点击组件时触发  | -			|
+| @change	| 重绘时触发 | -			|
+
+### QRCode Slots
+
+|事件名		|说明											|
+|:-			|:-												|
+| loading	| 自定义加载中的提示内容	|
+
+<style scoped>
+h3[id=qrcode-methods] + table thead tr th:nth-child(1) {
+	width: 20%;
+}
+h3[id=qrcode-methods] + table thead tr th:nth-child(3) {
+	width: 40%;
+}
+h3[id=qrcode-slots] + table thead tr th:nth-child(2) {
+	width: 80%;
+}
+</style>