stellar-ui-v2 1.35.3

package/components/ste-rate/ste-rate.vue

@@ -0,0 +1,202 @@
+<template>
+	<view class="ste-rate-root">
+		<view class="list" :style="[cmpListStyle]">
+			<view v-for="index in cmpCount" class="item" :key="index">
+				<view class="icon-box inactive" @click="onSelect(index)">
+					<ste-icon :code="cmpInactiveCode" :color="inactiveColor" :size="size"></ste-icon>
+				</view>
+				<view class="icon-box active" @click="onSelect(index)" :style="{ width: getWidth(index) }">
+					<ste-icon
+						:code="cmpActiveCode"
+						:color="disabled ? '#C8C9CC' : cmpActiveColor"
+						:size="size"
+					></ste-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-rate 评分
+ * @description 评分组件,用于对事物进行评级操作。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-rate
+ * @property {Number} value 当前评分数（支持v-model双向绑定）默认 0
+ * @property {Number} count 图标总数 默认 5
+ * @property {Number} score 每颗星星代表的分数 默认 1
+ * @property {Boolean} disabled 禁用 默认 false
+ * @property {Boolean} readonly 只读（不置灰） 默认 false
+ * @property {Number|String} size 评分图标的大小，单位rpx 默认 44
+ * @property {String} inactiveColor 未选中的颜色 默认 #dddddd
+ * @property {String} activeColor 选中的颜色 默认 #0090FF
+ * @property {String} inactiveCode 未选中的图标code 默认 &#xe681;
+ * @property {String} activeCode 选中的图标code 默认 &#xe684;
+ * @property {Number|String} gutter 每个图标之间的距离，单位rpx 默认 10
+ * @property {Array} iconData 每个分值对应的图标code
+ * @event {Function} change 当前分值变化时触发的事件
+ */
+
+export default {
+	group: '表单组件',
+	title: 'Rate 评分',
+	name: 'ste-rate',
+	props: {
+		value: {
+			type: [Number, null],
+			default: 0,
+		},
+		count: {
+			type: [Number, null],
+			default: 5,
+		},
+		score: {
+			type: [Number, null],
+			default: 1,
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		readonly: {
+			type: [Boolean, null],
+			default: false,
+		},
+		size: {
+			type: [String, Number, null],
+			default: 44,
+		},
+		inactiveColor: {
+			type: [String, null],
+			default: '#dddddd',
+		},
+		activeColor: {
+			type: [String, null],
+			default: '',
+		},
+		inactiveCode: {
+			type: [String, null],
+			default: '&#xe681;',
+		},
+		activeCode: {
+			type: [String, null],
+			default: '&#xe684;',
+		},
+		gutter: {
+			type: [String, Number, null],
+			default: 10,
+		},
+		iconData: {
+			type: [Array, null],
+			default: () => [],
+		},
+	},
+	model: {
+		prop: 'value',
+		// 派发事件名，更新父组件数据
+		event: 'input',
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		cmpListStyle() {
+			let style = {};
+			style['columnGap'] = utils.formatPx(this.gutter);
+			// #ifdef H5
+			if (this.disabled || this.readonly) {
+				style['cursor'] = 'not-allowed';
+			} else {
+				style['cursor'] = 'pointer';
+			}
+			// #endif
+			return style;
+		},
+		cmpCount() {
+			// 兼容浏览器和微信 对数字循环的处理不同
+			return Array.from({ length: this.count }, (_, index) => index);
+		},
+		cmpActiveCode() {
+			let code = this.getIconCode();
+			if (code) return code;
+			return this.activeCode;
+		},
+		cmpInactiveCode() {
+			let code = this.getIconCode();
+			if (code) return code;
+			return this.inactiveCode;
+		},
+		cmpActiveColor() {
+			return this.activeColor ? this.activeColor : color.getColor().steThemeColor;
+		},
+	},
+	methods: {
+		onSelect(index) {
+			if (!this.disabled && !this.readonly) {
+				let value = (index + 1) * this.score;
+				if (this.value != value) {
+					// 更新 model
+					this.$emit('input', value);
+					// change回调
+					this.$emit('change', value);
+				}
+			}
+		},
+		// 计算已评分占未评分的宽度
+		getWidth(index) {
+			let value = (index + 1) * this.score;
+			let diff = this.value - value;
+			// 全部占据
+			if (diff >= 0) {
+				return '100%';
+			}
+			// 部分占据
+			else if (Math.abs(diff) > 0 && Math.abs(diff) < this.score) {
+				return (1 - Math.abs(diff) / this.score).toFixed(2) * 100 + '%';
+			}
+			// 未占据
+			else {
+				return 0;
+			}
+		},
+		// 根据iconData来算出每个分值对应的iconCode
+		getIconCode() {
+			if (!this.iconData || this.iconData.length === 0) return;
+
+			let curScroeIndex = Math.ceil(this.value / this.score) - 1;
+			// 如果索引在数组范围内且对应的值不为空，直接返回该值
+			if (curScroeIndex < this.iconData.length && this.iconData[curScroeIndex] !== '') {
+				return this.iconData[curScroeIndex];
+			}
+
+			// 否则，从索引位置向左搜索最近的非空值
+			for (let i = curScroeIndex; i >= 0; i--) {
+				if (this.iconData[i] !== '') {
+					return this.iconData[i];
+				}
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-rate-root {
+	.list {
+		display: flex;
+
+		.item {
+			position: relative;
+
+			.active {
+				position: absolute;
+				overflow: hidden;
+				top: 0;
+			}
+		}
+	}
+}
+</style>

package/components/ste-read-more/README.md

@@ -0,0 +1,111 @@
+# ReadMore 展开更多
+
+用于多行文本展示需要折叠的场景
+
+---$
+
+### 代码演示
+#### 基础使用
+```html
+<view>
+	<ste-read-more>{{ moreStr }}</ste-read-more>
+</view>
+<script>
+export default {
+	data() {
+		return {
+			moreStr: '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+		}
+	}
+}
+</script>
+```
+
+#### 收起后展示按钮
+```html
+<view>
+	<ste-read-more toggle>{{ moreStr }}</ste-read-more>
+</view>
+<script>
+export default {
+	data() {
+		return {
+			moreStr: '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+		}
+	}
+}
+</script>
+```
+
+#### 提示文字
+```html
+<view>
+	<ste-read-more toggle openText="收起吧" closeText="展开吧" color="#f1f" fontSize="32">{{ moreStr }}</ste-read-more>
+</view>
+<script>
+export default {
+	data() {
+		return {
+			moreStr: '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+		}
+	}
+}
+</script>
+```
+
+#### 异步初始化
+有时候需要展示的内容是从后端获取的，组件内部的`mounted`生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过`ref`调用组件的`init`方法，重新初始化
+```html
+<view>
+	<ste-read-more ref="steReadMore">{{ moreStr }}</ste-read-more>
+</view>
+<script>
+export default {
+	data() {
+		return {
+			moreStr: ''
+		}
+	},
+	created() {
+		setTimeout(() => {
+			this.moreStr = '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故';
+			this.$nextTick(() => {
+				this.$refs.steReadMore.init();
+			});
+		}, 1500);
+	}
+}
+</script>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数			| 说明										| 类型				| 默认值			| 可选值	| 支持版本	|
+| ---			| ---										| ---				| ---			| ---	| ---		|
+| `showHeight`	| 内容超出此高度才会显示展开全文按钮，单位rpx	| `String/Number`	| `400`			| -		| -			|
+| `toggle`		| 展开后是否显示收起按钮						| `Boolean`			| `false`		| -		| -			|
+| `closeText`	| 关闭时的提示文字							| `String`			| `展开阅读全文`	| -		| -			|
+| `openText`	| 展开时的提示文字							| `String`			| `收起`			| -		| -			|
+| `fontSize`	| 提示文字的大小，单位rpx						| `String/Number`	| `28`			| -		| -			|
+| `color`		| 提示文字的颜色								| `String`			| `#2979ff`		| -		| -			|
+
+#### Events
+| 方法名	| 说明				| 方法参数	| 支持版本	|
+| ---		| ---				| ---		| ---		|
+| `open`	| 内容被展开时触发	| -			| -			|
+| `close`	| 内容被收起时触发	| -			| -			|
+
+#### Slots
+|插槽名		|说明			|插槽参数	|支持版本	|
+| ---		| ---			| ---		| ---		|
+| `default`	| 单选框文本内容	| -			| -			|
+
+#### Methods
+| 方法名| 说明														| 方法参数	| 支持版本	|
+| ---	| ---														| ---		| ---		|
+| `init`| 重新初始化组件内部高度计算过程，如果是异步获取内容需要用到	| -			| -			|
+
+---$
+{{fuyuwei}}

package/components/ste-read-more/ste-read-more.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="ste-read-more-root">
+		<view class="content-box" :style="[cmpContentStyle]">
+			<view class="content">
+				<slot></slot>
+			</view>
+		</view>
+		<view class="action-box" :style="[cmpActionStyle]" v-if="cmpShowAction">
+			<view @click="handleToggleStatus">{{ open ? openText : closeText }}</view>
+			<ste-icon :code="open ? '&#xe678;' : '&#xe676;'" size="28" marginBottom="3"></ste-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+export default {
+	group: '展示组件',
+	title: 'ReadMore 阅读更多',
+	name: 'ste-read-more',
+	props: {
+		showHeight: {
+			type: [String, Number, null],
+			default: 400,
+		},
+		// 展开后是否显示收起按钮
+		toggle: {
+			type: [Boolean, null],
+			default: false,
+		},
+		closeText: {
+			type: [String, null],
+			default: '展开阅读全文',
+		},
+		openText: {
+			type: [String, null],
+			default: '收起',
+		},
+		fontSize: {
+			type: [String, Number, null],
+			default: 28,
+		},
+		color: {
+			type: [String, null],
+			default: '#666666',
+		},
+	},
+	data() {
+		return {
+			open: false,
+			showToggle: false,
+		};
+	},
+	watch: {},
+	computed: {
+		cmpContentStyle() {
+			let style = {};
+			if (this.showToggle) {
+				style.height = this.open ? 'auto' : utils.addUnit(this.showHeight);
+			}
+
+			return style;
+		},
+		cmpActionStyle() {
+			let style = {
+				color: this.color,
+				fontSize: utils.addUnit(this.fontSize),
+				background: this.open
+					? ''
+					: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%)',
+			};
+			return style;
+		},
+		cmpShowAction() {
+			let show = true;
+			if (!this.showToggle) {
+				show = false;
+			}
+
+			if (this.open && !this.toggle) {
+				show = false;
+			}
+
+			return show;
+		},
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			utils.sleep(200).then(() => {
+				utils.querySelector('.content', this).then((rect) => {
+					this.showToggle = parseInt(rect.height) > parseInt(utils.formatPx(this.showHeight));
+				});
+			});
+		},
+		handleToggleStatus() {
+			if (!this.open) {
+				this.$emit('open');
+			} else {
+				this.$emit('close');
+			}
+			this.open = !this.open;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-read-more-root {
+	.content-box {
+		overflow: hidden;
+	}
+
+	.action-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		position: relative;
+		padding-top: 200rpx;
+		margin-top: -200rpx;
+		// margin-bottom: 20rpx;
+
+		text {
+			cursor: pointer;
+			font-size: 28rpx;
+			margin-right: 16rpx;
+		}
+	}
+}
+</style>

package/components/ste-rich-text/README.md

@@ -0,0 +1,31 @@
+# RichText 富文本
+
+富文本，增加文本换行功能，解决两张图片中间有空隙的问题。
+
+---$
+
+#### 一张图片
+
+```html
+<ste-rich-text :text="node1"></ste-rich-text>
+```
+
+#### 两张图片
+
+```html
+<ste-rich-text :text="node2"></ste-rich-text>
+```
+
+---$
+### API
+
+#### Props
+
+|属性名			|说明			|类型		|默认值		|可选值																							| 支持版本	|
+| ---			|---			| ---		| ---		| ---																							| ---		|
+| `text`		| 富文本值		| `String`	| -			| -																								| -			|
+| `space`		| 显示连续空格	| `String`	| `"nbsp"`	| `"ensp"`：中文字符空格一半大小 <br/> `"emsp"`：中文字符空格大小<br/>`"nbsp"`：根据字体设置的空格大小	| -			|
+| `userSelect`	| 文本是否可选	| `Boolean`	| `false`	| -																								| -			|
+
+---$
+{{zyy}}

package/components/ste-rich-text/ste-rich-text.vue

@@ -0,0 +1,70 @@
+<template>
+	<!-- 富文本组件 -->
+	<view style="overflow: hidden">
+		<rich-text
+			:nodes="replaceVerticalAlign(text)"
+			:user-select="userSelect"
+			class="rich-text"
+			:space="space"
+		></rich-text>
+	</view>
+</template>
+<script>
+import utils from '../../utils/utils.js';
+
+/**
+ * ste-rich-text 按钮
+ * @description 富文本组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-rich-text
+ * @property {String} text 富文本值
+ * @property {String} space 显示连续空格 默认值 nbsp
+ * @value ensp 中文字符空格一半大小 {String}
+ * @value emsp 中文字符空格大小 {String}
+ * @value nbsp 根据字体设置的空格大小 {String}
+ * @property {Boolean} userSelect 文本是否可选 默认 false
+ */
+export default {
+	group: '表单组件',
+	title: 'RichText 富文本',
+	name: 'ste-rich-text',
+	props: {
+		text: {
+			type: [String, null],
+			default: '',
+		},
+		space: {
+			type: [String, null],
+			default: 'nbsp',
+		},
+		userSelect: {
+			type: [Boolean, null],
+			default: false,
+		},
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		replaceVerticalAlign(text) {
+			if (!text) {
+				return;
+			}
+			let html = text;
+			html = utils.richTextTagAddStyle(html, 'p', ['margin', 'margin-top'], ';margin-top:0');
+			html = utils.richTextTagAddStyle(html, 'p', ['margin', 'margin-bottom'], ';margin-bottom:0');
+			html = utils.richTextTagAddStyle(html, 'img', 'vertical-align', ';vertical-align:top');
+			// 解决微信小程序会忽略空白换行的问题
+			html = html.replace(/↵/g, '\n');
+			html = html.replace(/&nbsp;/g, '\n');
+			return html;
+		},
+	},
+
+	mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.rich-text {
+	word-break: break-all;
+}
+</style>

package/components/ste-scroll-to/README.md

@@ -0,0 +1,68 @@
+# ScrollTo 滚动锚点
+
+滚动锚点，可以滚动到指定锚点。
+
+---$
+
+#### 基础用法
+
+```html
+<ste-tabs :active.sync="active" sticky>
+	<ste-tab v-for="(m, i) in imgs" :key="i" :title="`标签${i + 1}`" />
+</ste-tabs>
+<ste-scroll-to ref="scrollTo" height="1200" :active.sync="active">
+	<ste-scroll-to-item v-for="(m, i) in imgs" :key="i">
+		<view>内容{{ i + 1 }}</view>
+		<image :src="m" mode="widthFix"></image>
+	</ste-scroll-to-item>
+</ste-scroll-to>
+<script>
+	export default {
+		data() {
+			return {
+				active: 0,
+				imgs: [
+					'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+					'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+					'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+				],
+			};
+		},
+		mounted() {
+			setTimeout(() => {
+				this.$refs.scrollTo.init();
+			}, 500);
+		},
+	}
+</script>
+```
+
+
+
+---$
+### API
+
+#### ScrollTo Props
+
+| 属性名	| 说明																						|类型								|默认值		|可选值	| 支持版本	|
+| ---			|---																						| ---								| ---			| ---		| ---			|
+| `active`| 当前激活的锚点index，支持sync双向绑定，默认值0	| `Number`					| `0`			| -			| -				|
+| `height`| 高度，默认值100%																| `String`/`Number`	| `"100%"`| -			| -				|
+
+#### ScrollTo Events
+| 事件名		|说明						|事件参数										|支持版本	|
+|---			|---						|---												|---			|
+| `change`| 滚动锚点时触发	| `active`: 当前激活的锚点下标	| -				|
+
+#### ScrollTo Method
+| 方法名| 说明															|支持版本	|
+| ---		| ---															|---			|
+| `init`| 初始化锚点信息，在渲染完成后调用	| -				|
+
+---$
+{{xuyajun}}