@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/text.md

@@ -0,0 +1,157 @@
+## Text 文本 <to-api/>
+
+<demo-model url="/pages/componentsA/text/text"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-text**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-text)
+
+:::
+
+此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。
+您大可不必在使用特殊文本时自己定义，text组件涵盖您能使用的大部分场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`text`参数设置文本内容。推荐您使用`:text='value'`的形式
+
+```vue
+<uv-text text="我用十年青春,赴你最后之约"></uv-text>
+```
+### 设置主题
+
+通过`type`参数设置文本主题，我们提供了五类属性：`primary`  `error`  `success`  `warning`  `info`。
+
+```vue
+<uv-text type="primary" text="主色"></uv-text>
+<uv-text type="error"   text="错误"></uv-text>
+<uv-text type="success" text="成功"></uv-text>
+<uv-text type="warning" text="警告"></uv-text>
+<uv-text type="info"    text="信息"></uv-text>
+```
+### 拨打电话
+
+通过将`mode`属性设置为`phone`即可调用拨打电话，提供加密值`format="encrypt"`电话号码中间脱敏
+
+```vue
+<uv-text mode="phone" text="15019479320"></uv-text> <!--15019479320-->
+<uv-text mode="phone" format="encrypt" text="15019479320"></uv-text> <!--150****9320-->
+```
+
+### 日期格式化 
+
+通过将`mode`属性设置为`date`
+
+```vue
+<uv-text mode="date" text="1612959739"></uv-text> <!--2021-02-10-->
+```
+### 姓名脱敏
+
+通过将`mode`属性设置为`name`，同时设置 `format="encrypt"`属性
+
+```vue
+
+<uv-text mode="name" text="张三三" format="encrypt"></uv-text> <!--张*三-->
+```
+
+### 超链接
+通过将`mode`属性设置为`link`，同时设置`href`指定链接地址
+
+```vue
+<uv-text mode="link" text="Go to uv-ui docs" href="https://www.uv-uiui.com" ></uv-text>
+```
+### 显示金额
+
+通过将`mode`属性设置为`price`
+
+```vue
+<uv-text mode="price" text="728732.32"></uv-text>
+```
+### 前后图标
+添加`prefixIcon,suffixIcon`指定图标和位置，`iconStyle`设置图标大小
+```vue
+<uv-text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></uv-text>
+<uv-text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></uv-text>
+```
+
+### 超出隐藏
+内置了文字超出隐藏样式，设置`lines`属性表明几行后隐藏
+```vue
+<uv-text :lines="2" text="关于uv-ui的取名来由，首字母u来自于uni-app首字母，
+uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，故取名uv-ui，
+表达源于uni-app和Vue和uView之意，同时在此也对它们表示感谢。"></uv-text>
+```
+
+### 小程序开放能力
+针对小程序开放能力，我们提供了分享，请在小程序环境下使用
+
+注意：使用uni上挂载的uv-ui内置方法，需要根据[扩展配置 - JS工具库](/components/setting.html)进行相应的配置，否则直接会报错！
+```vue
+<uv-text text="分享到微信" openType="share" type="success" @click="clickHandler"></uv-text>
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+function clickHandler() {
+  // #ifndef MP-WEIXIN
+  uni.showToast({
+    icon: 'none',
+    title: '请在微信小程序内查看效果'
+  });
+  // #endif
+}
+onLoad(() => {});
+
+</script>
+```
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Text Props
+
+| 参数		| 说明																					| 类型									| 默认值		|  可选值				|
+|:-			|:-																						|:-										|:-			|:-						|
+| text		| 显示的值																				| String &#124; Number					| -			| -						|
+| type		| 主题颜色																				| String								| -			| -						|
+| show		| 是否显示																				| Boolean								| true		| true &#124; false					|
+| prefixIcon| 前置图标																				| String								| -			| -						|
+| suffixIcon| 后置图标																				| String								| -			| -						|
+| mode		| 文本处理的匹配模式text-普通文本，price - 价格，phone - 手机号，name - 姓名，date - 日期，link - 超链接	| String								| -			|						|
+| href		| mode=link下，配置的链接																	| String								| -			| -						|
+| format	| 格式化规则																				| String &#124; Function				| -			| -						|
+| call		| mode=phone时，点击文本是否拨打电话														| Boolean								| false		| true &#124; false					|
+| openType	| 小程序的打开方式													    					| String								| -			| -						|
+| bold		| 是否粗体，默认normal																	| Boolean								| false		| true	&#124; false				|
+| block		| 是否块状	，仅vue生效																			| Boolean								| false		| true	&#124; false				|
+| lines		| 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。 	| String &#124; Number					| -			| -						|
+| color		| 文本颜色																				| String								| #303133	| -						|
+| size		| 字体大小																				| String &#124; Number					| 15		| -						|
+| iconStyle	| 图标的样式																				| Object &#124; String					| 15px		| -						|
+| decoration| 文字装饰，下划线，中划线等																| String								| none		| none &#124; underline &#124; line-through|
+| margin	| 外边距，对象、字符串，数值形式均可												    		| Object &#124; Number &#124; String	| -			| -						|
+| lineHeight| 文本行高																				| Number &#124; String					| -			| -						|
+| align		| 文本对齐方式																			| String								| left		| left &#124; center &#124; right			|
+| wordWrap	| 文字换行																				| String								| normal	| normal &#124; break-word &#124; anywhere	|
+| customStyle | 自定义样式，eg：`:custom-style="{color:'red',width:'20px'}"` | Object | - | - |
+
+
+### Text Events
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+| @click	| 点击触发事件	| -			|
+

package/docs/components/textarea.md

@@ -0,0 +1,121 @@
+# Textarea 文本域
+
+`uv-textarea` 用于多行文本输入，支持字数统计、自动增高、禁用、底部边框和输入格式化。
+
+## 基础用法
+
+```vue
+<template>
+  <uv-textarea v-model="value" placeholder="请输入内容" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+
+</script>
+```
+
+## 字数统计
+
+```vue
+<template>
+  <uv-textarea v-model="value" count placeholder="请输入内容" />
+</template>
+```
+
+## 自动增高
+
+```vue
+<template>
+  <uv-textarea v-model="value" :maxlength="-1" auto-height placeholder="请输入内容" />
+</template>
+```
+
+## 禁用状态
+
+```vue
+<template>
+  <uv-textarea v-model="value" disabled placeholder="请输入内容" />
+</template>
+```
+
+## 下划线模式
+
+```vue
+<template>
+  <uv-textarea v-model="value" border="bottom" placeholder="请输入内容" />
+</template>
+```
+
+## 格式化处理
+
+```vue
+<template>
+  <uv-textarea v-model="value" :formatter="formatter" placeholder="请输入内容" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+function formatter(value) {
+  return value.replace(/[^0-9]/gi, '');
+}
+
+</script>
+```
+
+某些平台不支持通过 props 传递函数，可以在页面生命周期中调用 `setFormatter`：
+
+```ts
+import { ref } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+
+const textarea = ref(null);
+
+onReady(() => {
+  textarea.value?.setFormatter(formatter);
+});
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `value` / `v-model` | 输入框内容。 | `String` | - |
+| `placeholder` | 输入框为空时占位符。 | `String` | - |
+| `height` | 输入框高度。 | `String \| Number` | `70` |
+| `confirmType` | 键盘右下角按钮文字。 | `String` | `done` |
+| `disabled` | 是否禁用。 | `Boolean` | `false` |
+| `count` | 是否显示统计字数。 | `Boolean` | `false` |
+| `focus` | 是否自动获取焦点。 | `Boolean` | `false` |
+| `autoHeight` | 是否自动增加高度。 | `Boolean` | `false` |
+| `fixed` | 是否位于 `position: fixed` 区域。 | `Boolean` | `false` |
+| `cursorSpacing` | 光标与键盘的距离。 | `Number` | `0` |
+| `maxlength` | 最大输入长度，`-1` 表示不限制。 | `String \| Number` | `140` |
+| `border` | 边框类型。 | `String` | `surround` |
+| `placeholderClass` | 占位符样式类。 | `String` | `textarea-placeholder` |
+| `placeholderStyle` | 占位符样式。 | `String \| Object` | `color: #c0c4cc` |
+| `formatter` | 输入过滤或格式化函数。 | `Function` | `null` |
+| `textStyle` | 自定义文本样式。 | `Object` | - |
+| `countStyle` | 自定义统计数字样式。 | `Object` | - |
+| `customStyle` | 自定义外部样式。 | `Object` | - |
+
+## Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `setFormatter(fn)` | 设置格式化函数。 |
+
+## Events
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `focus` | 输入框聚焦时触发。 | `event.detail` |
+| `blur` | 输入框失去焦点时触发。 | `event.detail` |
+| `linechange` | 输入框行数变化时触发。 | `event.detail` |
+| `input` | 键盘输入时触发。 | `event.detail.value` |
+| `confirm` | 点击完成时触发。 | `event` |
+| `keyboardheightchange` | 键盘高度变化时触发。 | `event` |

package/docs/components/toast.md

@@ -0,0 +1,124 @@
+## Toast 消息提示 <to-api/>
+
+<demo-model url="/pages/componentsC/toast/toast"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-toast**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-toast)
+
+:::
+
+该组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们提供了多种丰富的API，类似于`uni.showToast`API。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+以下为不同能力的toast的具体表现。使用`ref`调用组件内部的`show`方法进行显示，并传递参数，参数参数下方[Toast Params](/components/toast.html#toast-params)
+
+```vue
+<template>
+	<view>
+		<uv-toast ref="toast"></uv-toast>
+		<view class="list">
+			<view class="item" v-for="(item,index) in list" :key="index" @click="showToast(item)">{{item.title}}</view>
+		</view>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const toast = ref(null);
+const list = ref([{
+  type: 'default',
+  title: '默认主题',
+  message: "锦瑟无端五十弦"
+}, {
+  type: 'error',
+  icon: false,
+  title: '失败主题',
+  message: "一弦一柱思华年"
+}, {
+  type: 'success',
+  title: '成功主题(带图标)',
+  message: "庄生晓梦迷蝴蝶"
+}, {
+  type: 'loading',
+  title: '正在加载',
+  message: "正在加载"
+}, {
+  type: 'default',
+  title: '结束后跳转标签页',
+  message: "此情可待成追忆",
+  url: '/pages/componentsD/tag/tag'
+}]);
+function showToast(params) {
+  toast.value.show({
+    ...params,
+    complete() {
+      params.url && uni.navigateTo({
+        url: params.url
+      });
+    }
+  });
+}
+
+</script>
+<style lang="scss" scoped>
+	.item {
+		margin: 10rpx 0;
+		padding: 10rpx;
+		text-align: center;
+		background: #f1f1f1;
+		font-size: 28rpx;
+		color: #666;
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Toast Params
+
+这些参数为通过`ref`调用`<toast/>`组件内部的`show`方法时，需要传递参数，如：
+
+| 参数		| 说明												| 类型					|  默认值	|  可选值	|
+|:-			|:-													|:-						|:-			|:-			|
+| loading	| 是否加载中											| Boolean				| false		| true	&#124; false	|
+| z-index	| toast展示时的层级										| String &#124; Number				| 10090		| -	|
+| overlay	| 是否显示透明遮罩，防止点击穿透										| Boolean				| true		| true	&#124; false	|
+| message	| 显示的文本											| String &#124; Number	| -			| -			|
+| icon		| 图标，或者绝对路径的图片								| String				| -			| -			|
+| position | toast出现的位置 | String  | center | top &#124; bottom |
+| type		| 主题类型											| String				| -			| -			|
+| params	| 跳转的参数											| Object				| -			| -			|
+| duration	| 展示时间，单位ms									| String &#124; Number	| 2000		| -			|
+| complete	| 执行完后的回调函数									| Function				| null		| -			|
+
+### Toast Methods
+
+方法是通过`ref`调用
+
+::: warning 注意
+注意：所有有关`ref`的调用，都不能在页面的`onLoad`生命周期调用，因为此时组件尚未创建完毕，会报错，应该在`onReady`生命周期调用。
+:::
+
+|方法名	|说明																|参数		|
+|:-		|:-																	|:-			|
+| show	| 显示toast，如需一进入页面就显示toast，请在`onReady`生命周期调用		| 见上方说明[Toast Params](/components/toast.html#toast-params)	|
+| hide	| 隐藏toast		|  -	|

package/docs/components/tooltip.md

@@ -0,0 +1,98 @@
+## Tooltip 长按提示 <to-api/>
+
+<demo-model url="/pages/componentsC/tooltip/tooltip"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-tooltip**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-tooltip)
+
+:::
+
+Tooltip组件主要用于长按操作，类似微信的长按气泡
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|×|√|√|√|√|
+
+:::warning 说明
+由于安卓`nvue`下，`overflow`属性不支持`visible`值，故此组件暂不支持安卓`nvue`环境。
+:::
+
+### 基本使用
+
+设置`text`属性控制文本。
+
+```vue
+<template>
+    <uv-tooltip text="复制" overlay></uv-tooltip>
+</template>
+```
+
+### 下方显示
+
+设置`direction`属性控制方向。
+
+```vue
+<template>
+    <uv-tooltip text="下方显示" direction="bottom"></uv-tooltip>
+</template>
+```
+
+### 扩展按钮
+
+设置`buttons`属性扩展的按钮组。
+
+```vue
+<template>
+    <uv-tooltip text="扩展显示" :buttons="['扩展']"></uv-tooltip>
+</template>
+```
+
+### 高亮选中文本背景色
+
+设置`bgColor`属性。
+
+```vue
+<template>
+    <uv-tooltip text="高亮选中文本背景色" :buttons="['扩展']" bgColor="#e3e4e6"></uv-tooltip>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Tooltip Props
+
+| 参数		| 说明																					| 类型									| 默认值		|  可选值				|
+|:-			|:-																						|:-										|:-			|:-						|
+| text		| 需要显示的提示文字																		| String &#124; Number					| -			| -						|
+| copyText	| 点击复制按钮时，复制的文本，为空则使用`text`值													| String &#124; Number					| - 		| - 					|
+| size		| 文本大小																				| String &#124; Number					| 14		| -						|
+| color     | 字体颜色																				| String								| #606266	| -						|
+| bgColor   | 弹出提示框时，文本的背景色																| String								| transparent | -					|
+| direction	| 弹出提示的方向，`top` - 上方，`bottom` - 下方                                                  	| String								| top		| top  &#124; bottom				|
+| zIndex	| 弹出提示的`z-index`，`nvue`无效																| String &#124; Number					| 10071		| -						|
+| showCopy	| 是否显示复制按钮																			| Boolean               				| true		| true &#124; false					|
+| buttons	| 扩展的按钮组                    														| Array 								| - 		| - 					|
+| overlay	| 是否显示透明遮罩以防止触摸穿透                           									| Boolean								| true		|  true &#124; false					|
+| showToast	| 是否显示复制成功或者失败的`toast`                           									| Boolean								| true		| true &#124; false					|
+
+
+### Tooltip Events
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+| @click	| 点击触发事件	| index，被点击按钮的索引		|
+