stellar-ui-v2 1.35.3

package/components/ste-signature/README.md

@@ -0,0 +1,105 @@
+# Signature 签名
+
+签名组件用于在页面上显示签名。
+
+---$
+
+### 代码演示
+#### 基础使用
+- `type` 签名保存图片类型，支持 `jpg` 和 `png`(默认) 两种格式。
+	- 此处使用 `jpg` 格式。因为媒体预览背景是黑色，画笔颜色是黑色，`png`格式图片时预览看不见
+```html
+<template>
+	<view class="signature-box">
+		<ste-signature ref="signature" type="jpg" />
+	</view>
+	<ste-button @click="clear">清除</ste-button>
+	<ste-button @click="upstep">上一步</ste-button>
+	<ste-button @click="save">保存并预览</ste-button>
+	<ste-media-preview :show.sync="show" :urls="urls"></ste-media-preview>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+			urls: [],
+		};
+	},
+	methods: {
+		clear() {
+			this.$refs.signature.clear();
+		},
+		upstep() {
+			this.$refs.signature.back();
+		},
+		save() {
+			this.$refs.signature.save(
+				(base64) => {
+					this.urls = [base64];
+					this.show = true;
+				},
+				(err) => {
+					this.showToast({
+						title: err,
+						icon: 'none',
+					});
+				}
+			);
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.signature-box {
+	width: 100%;
+	height: 300rpx;
+	background-color: #f5f5f5;
+	margin-bottom: 30rpx;
+}
+</style>
+```
+
+#### 背景、画笔颜色和线宽
+- 属性`background`可以自定义图片背景颜色，默认`#f8f8f8`(黑色)
+- 属性`strokeColor`可以自定义画笔颜色，默认`#000000`(黑色)
+- 属性`lineWidth`可以自定义画笔线宽，默认`3`
+```html
+<ste-signature background="#0f0" strokeColor="#f0f" lineWidth="1" />
+```
+
+
+---$
+### API
+#### 组件属性(Props)
+
+| 属性名				| 说明					| 类型								| 默认值			| 可选值	| 支持版本	|
+| ---						| ---					| ---								| ---				| ---		| ---			|
+| `customClass`	| 自定义 class	| `String`					| -					| -			| -				|
+| `lineWidth`		| 线条的宽度		| `Number`					| `3`				| -			| -				|
+| `background`	| 背景颜色			| `String`					| `none`		| -			| -				|
+| `strokeColor`	| 线条的颜色		| `String`					| `#000000`	| -			| -				|
+| `type`				| 保存图片类型	| `String`					| `png`			| `jpg`	| -				|
+| `width`				| 宽度,单位rpx	| `String`,`Number`	| `100%`		| -			| -				|
+| `height`			| 高度,单位rpx	| `String`,`Number`	| `100%`		| -			| -				|
+
+
+#### 组件事件(Events)
+
+|事件名		|说明					|事件参数	|支持版本	|
+|---			|---					|---			|---			|
+|`start`	| 笔画开始			| -				|-				|
+|`signing`| 正在书写中		| -				|-				|
+|`end`		| 笔画结束			|-				|-				|
+
+#### 组件方法(Method)
+
+|方法名	| 说明				|方法参数										|支持版本	|
+|---		|---				|---												|---			|
+|`clear`| 清空画布		|-													|-				|
+|`back`	| 回退				|-													|-				|
+|`save`	| 保存为图片	|(base64)=>void,(err)=>void	|-				|
+
+
+---$
+{{xuyajun}}

package/components/ste-signature/ste-signature.vue

@@ -0,0 +1,220 @@
+<template>
+	<view
+		v-if="load"
+		class="ste-signature-root"
+		:style="[cmpRootStyle]"
+		:class="customClass"
+		@mousedown="onTouchStart"
+		@mousemove="onTouchMove"
+		@mouseup="onTouchEnd"
+		@mosueleave="onTouchEnd"
+	>
+		<canvas
+			disable-scroll
+			:id="canvasId"
+			:canvas-id="canvasId"
+			:style="[cmpRootStyle]"
+			@touchstart="onTouchStart"
+			@touchmove="onTouchMove"
+			@touchend="onTouchEnd"
+		/>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils';
+/**
+ * ste-signature 签名
+ * @description 签名组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-signature
+ * @property {String} customClass 自定义 class
+ * @property {Number} lineWidth 线条的宽度
+ * @property {String} strokeColor 线条颜色，支持 rgb，rgba，hex，hsl，hsla，颜色名称等格式
+ * @property {String} background 图片背景色
+ * @property {String} type 保存图片类型
+ * @value png 默认
+ * @value jpg
+ * @property {String|Number} width 宽度,单位rpx
+ * @property {String|Number} height 高度,单位rpx
+ * @event {Function} start 开始签名事件
+ * @event {Function} signing 正在签名事件（指某次笔画进行中）
+ * @event {Function} end 结束签名事件
+ */
+export default {
+	group: '表单组件',
+	title: 'Signature 签名',
+	name: 'ste-signature',
+	props: {
+		customClass: {
+			type: [String, null],
+			default: () => '',
+		},
+		lineWidth: {
+			type: [Number, String, null],
+			default: () => 3,
+		},
+		strokeColor: {
+			type: [String, null],
+			default: () => 'black',
+		},
+		background: {
+			type: [String, null],
+			default: () => 'none',
+		},
+		type: {
+			type: [String, null],
+			default: () => 'png',
+		},
+		width: {
+			type: [Number, String, null],
+			default: () => '100%',
+		},
+		height: {
+			type: [Number, String, null],
+			default: () => '100%',
+		},
+	},
+	data() {
+		return {
+			canvasId: utils.guid(8),
+			load: false,
+			ctx: null,
+			strokes: [],
+			strokeing: [],
+		};
+	},
+	computed: {
+		cmpRootStyle() {
+			return {
+				width: utils.formatPx(this.width),
+				height: utils.formatPx(this.height),
+			};
+		},
+	},
+	mounted() {
+		this.load = true;
+		this.$nextTick(() => {
+			this.initCanvas();
+		});
+	},
+	methods: {
+		clear() {
+			this.strokes = [];
+			this.drawStrokes();
+		},
+		back() {
+			this.strokes.pop();
+			this.drawStrokes();
+		},
+		async save(callback, error) {
+			if (!this.strokes.length) {
+				if (error) error('请绘制签名');
+				return;
+			}
+			const canvas = await utils.querySelector(`.ste-signature-root`, this);
+			uni.canvasToTempFilePath(
+				{
+					canvasId: this.canvasId,
+					width: canvas.width,
+					height: canvas.height,
+					destWidth: canvas.width * 2, // 设置导出图片的宽度，这里设置为canvas宽度的两倍
+					destHeight: canvas.height * 2, // 设置导出图片的高度，这里设置为canvas高度的两倍
+					fileType: this.type, // 设置导出图片的类型，如'png'、'jpg'等
+					success: (res) => {
+						if (callback) callback(res.tempFilePath);
+					},
+					fail: (err) => {
+						console.error(err, 'err');
+					},
+				},
+				this
+			);
+		},
+		async initCanvas() {
+			this.ctx = uni.createCanvasContext(this.canvasId, this);
+			this.drawStrokes();
+		},
+		drawStrokes(ctx = this.ctx) {
+			// 设置线条圆角
+			this.ctx.setLineCap('round');
+			this.ctx.setStrokeStyle(this.strokeColor); // 设置线颜色为黑色
+			this.ctx.setLineWidth(this.lineWidth); // 设置线宽
+			ctx.clearRect(0, 0, 1920, 1080);
+			if (this.background !== 'none') {
+				ctx.setFillStyle(this.background);
+				ctx.fillRect(0, 0, 1920, 1080);
+			}
+			ctx.draw();
+			if (!this.strokes?.length) {
+				ctx.stroke();
+				ctx.draw(true);
+				return;
+			}
+
+			this.strokes.forEach((stroke) => {
+				if (!stroke.length) return;
+				ctx.beginPath();
+				ctx.moveTo(stroke[0].x, stroke[0].y);
+				stroke.forEach(({ x, y }, index) => {
+					if (index == 0) return;
+					ctx.lineTo(x, y);
+				});
+				ctx.stroke();
+				ctx.draw(true);
+			});
+		},
+		drawStrokeing(ctx = this.ctx) {
+			const length = this.strokeing?.length;
+			if (!length) return;
+			ctx.beginPath();
+			const end = this.strokeing[length - 1];
+			const start = this.strokeing[length - 2] || end;
+			ctx.moveTo(start.x, start.y);
+			ctx.lineTo(end.x, end.y);
+			ctx.stroke();
+			ctx.draw(true);
+		},
+		async onTouchStart(e) {
+			// #ifdef MP
+			this.strokeing = [{ x: e.changedTouches[0].x, y: e.changedTouches[0].y }];
+			// #endif
+			// #ifdef H5
+			this.strokeing = [await this.getH5MousePosition(e)];
+			// #endif
+			this.drawStrokeing();
+			this.$emit('start');
+		},
+		async onTouchMove(e) {
+			if (!this.strokeing?.length) return;
+			// #ifdef MP
+			this.strokeing.push({ x: e.changedTouches[0].x, y: e.changedTouches[0].y });
+			// #endif
+			// #ifdef H5
+			this.strokeing.push(await this.getH5MousePosition(e));
+			// #endif
+			this.drawStrokeing();
+			this.$emit('signing');
+		},
+		onTouchEnd(e) {
+			this.strokes.push(this.strokeing);
+			this.strokeing = [];
+			this.$emit('end');
+		},
+
+		// #ifdef H5
+		async getH5MousePosition(e) {
+			const canvas = await utils.querySelector(`#${this.canvasId}`, this);
+			return {
+				x: e.clientX - canvas.left,
+				y: e.clientY - canvas.top,
+			};
+		},
+		// #endif
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.ste-signature-root {
+}
+</style>

package/components/ste-slider/README.md

@@ -0,0 +1,165 @@
+# Slider 滑块
+
+用于选择横轴或者竖轴上的数值、区间、档位。
+
+---$
+
+### 代码演示
+#### 基础使用
+```html
+<ste-slider value="30"></ste-slider>
+```
+
+#### 滑块条高度 & 滑块大小
+```html
+<ste-slider barHeight="26" value="30"></ste-slider>
+<ste-slider buttonSize="50" value="30"></ste-slider>
+```
+
+#### 进度条颜色
+```html
+<ste-slider value="30" activeColor="#ff0000" inactiveColor="#a9ee13"></ste-slider>
+```
+
+#### 范围选择
+```html
+<ste-slider :value="[10, 20]" range></ste-slider>
+```
+
+#### 竖向
+```html
+<ste-slider vertical value="30"></ste-slider>
+```
+
+#### 禁用
+```html
+<ste-slider disabled value="30"></ste-slider>
+```
+
+#### 只读
+```html
+<ste-slider readonly value="30"></ste-slider>
+```
+
+#### 间断点
+当`showStops`为`true`时，会根据最大值(`max`)、最小值(`min`)、步长(`step`)来显示间断点
+```html
+<ste-slider showStops :step="10" value="30"></ste-slider>
+```
+
+#### 标记
+当同时配置了`showStops`属性和`marks`属性时，会显示自定义节点
+```html
+<ste-slider showStops :marks="marks" value="30"></ste-slider>
+<script>
+export default {
+	data() {
+		return {
+			marks: {
+				10: '0°C',
+				20: '8°C',
+				37: '37°C',
+				80: {
+					style: {
+						color: '#1989FA',
+					},
+					label: '合格',
+				},
+			}
+		};
+	},
+};
+</script>
+```
+
+#### 自定义滑块
+```html
+<ste-slider :step="10" showStops value="30" activeColor="#ff0000">
+	<view class="c-slider-1" slot="button">
+		<view class="content">
+			<text>滑块</text>
+		</view>
+	</view>
+</ste-slider>
+<ste-slider :step="10" showStops :value="[10, 40]" range>
+	<view class="c-slider-2" slot="leftButton">
+		<view class="content">
+			<ste-icon code="&#xe673;" color="#fff"></ste-icon>
+		</view>
+	</view>
+	<view class="c-slider-2" slot="rightButton">
+		<view class="content">
+			<ste-icon code="&#xe674;" color="#fff"></ste-icon>
+		</view>
+	</view>
+</ste-slider>
+<style lang="scss">
+.c-slider-1 {
+	.content {
+		padding: 0 16rpx;
+		background-color: #ff0000;
+		border-radius: 20rpx;
+
+		color: #ffffff;
+		font-size: 24rpx;
+
+		text {
+			white-space: nowrap;
+		}
+	}
+}
+.c-slider-2 {
+	.content {
+		background-color: #0090FF;
+		border-radius: 50%;
+		height: 40rpx;
+		width: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 属性名			| 说明																				| 类型					| 默认值		| 可选值	| 支持版本	|
+| ---				| ---																				| ---					| ---		| ---	| ---		|
+| `value`			| 当前进度百分比，在双滑块模式下为数组格式（数组的值都是从小到大）						| `Number/String/Array`	| `0`		| -		| -			|
+| `min`				| 最小值																				| `Number/String/Array`	| `0`		| -		| -			|
+| `max`				| 最大值																				| `Number/String/Array`	| `100`		| -		| -			|
+| `step`			| 步长																				| `Number/String/Array`	| `1`		| -		| -			|
+| `barHeight`		| 进度条高度，默认单位为 rpx															| `Number/String/Array`	| `8`		| -		| -			|
+| `buttonSize`		| 滑块按钮大小，默认单位为 rpx														| `Number/String/Array`	| `40`		| -		| -			|
+| `activeColor`		| 进度条激活态颜色																	| `Number/String/Array`	| `#0090FF`	| -		| -			|
+| `inactiveColor`	| 进度条非激活态颜色																	| `Number/String/Array`	| `#eeeeee`	| -		| -			|
+| `range`			| 是否为范围选择																		| `Number/String/Array`	| `false`	| -		| -			|
+| `vertical`		| 是否竖向模式																		| `Number/String/Array`	| `false`	| -		| -			|
+| `disabled`		| 是否禁用滑块																		| `Number/String/Array`	| `false`	| -		| -			|
+| `readonly`		| 是否为只读状态，只读状态下无法修改滑块的值											| `Number/String/Array`	| `false`	| -		| -			|
+| `showStops`		| 是否显示间断点																		| `Number/String/Array`	| `false`	| -		| -			|
+| `marks`			| 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式	| `Number/String/Array`	| `{}`		| -		| -			|
+
+#### 组件事件(Events)
+
+|事件名		|说明					|事件参数				|支持版本	|
+|---		|---					|---					|---		|
+|`input`	|进度变化时实时触发		|`value`:改变后的绑定值	|-			|
+|`change`	|进度变化且结束拖动后触发	|`value`:改变后的绑定值	|-			|
+|`dragStart`|开始拖动时触发			|-						|-			|
+|`dragEnd`	|结束拖动时触发			|-						|-			|
+
+#### 组件插槽(Slots)
+
+|插槽名		|说明							|插槽参数	|支持版本	|
+|---		|---							|---		|---		|
+|`button`	|自定义滑块按钮					|-			|-			|
+|`button`	|自定义左侧滑块按钮（范围选择下)	|-			|-			|
+|`button`	|自定义右侧滑块按钮（范围选择下）	|-			|-			|
+
+
+---$
+{{fuyuwei}}