stellar-ui-v2 1.35.3

package/components/ste-icon/ste-icon.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="ste-icon-root" :style="[cmpCssVar]" @click="handleClick">
+		{{ cmpCode }}
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-icon 图标
+ * @description  图标组件 基于字体的图标集，包含了大多数常见场景的图标
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-icon
+ * @property {String} code 图标名称
+ * @property {String} color 图标颜色
+ * @property {Number|String} size 图标大小，单位rpx，默认28
+ * @property {Boolean} bold 图标是否粗体，默认false
+ * @property {Number|String} marginLeft 左外边距，单位rpx，默认0
+ * @property {Number|String} marginRight 右外边距，单位rpx，默认0
+ * @property {Number|String} marginTop 上外边距，单位rpx，默认0
+ * @property {Number|String} marginBottom 下外边距，单位rpx，默认0
+ * @property {String} fontFamily 字体名 默认''
+ * @property {Boolean} inlineBlock 容器对齐方式  默认true
+ * @event {Function} click 图标点击回调事件
+ */
+export default {
+	group: '基础组件',
+	title: 'Icon 图标',
+	name: 'ste-icon',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		// iconfont unicode
+		code: {
+			type: [String, null],
+			required: true,
+		},
+		// 字体大小
+		size: {
+			type: [Number, String, null],
+			default: 28,
+		},
+		scale: {
+			type: [Number, null],
+			default: 1,
+		},
+		// 颜色
+		color: {
+			type: [String, null],
+			default: '',
+		},
+		// 图标是否粗体
+		bold: {
+			type: [Boolean, null],
+			default: false,
+		},
+		// 左外边距
+		marginLeft: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 右外边距
+		marginRight: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 上外边距
+		marginTop: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 下外边距
+		marginBottom: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		fontFamily: {
+			type: [String, null],
+			default: '',
+		},
+		showBorder: {
+			type: [Boolean, null],
+			default: false,
+		},
+		// 容器对齐方式 true inline-block false inline-flex
+		inlineBlock: {
+			type: [Boolean, null],
+			default: true,
+		},
+	},
+	data() {
+		return {
+			defaultFontFamily: 'ste-iconfont-1709689042473', // 和iconfont项目中的字体名保持一致
+		};
+	},
+	mounted() {},
+	computed: {
+		cmpCode() {
+			// unicode编码转字符
+			return String.fromCharCode(this.code.replace('&#', '0').replace(';', ''));
+		},
+		cmpCssVar() {
+			return {
+				'--border': this.showBorder ? '1px' : '0px',
+				'--color': this.color,
+				'--size': utils.formatPx(this.size),
+				'--weight': this.bold ? 'bold' : 'normal',
+				'--margin-left': utils.formatPx(this.marginLeft),
+				'--margin-right': utils.formatPx(this.marginRight),
+				'--margin-top': utils.formatPx(this.marginTop),
+				'--margin-bottom': utils.formatPx(this.marginBottom),
+				'--font-family': this.fontFamily === '' ? this.defaultFontFamily : this.fontFamily,
+				'--display': this.inlineBlock ? 'inline-block' : 'inline-flex',
+			};
+		},
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click');
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './iconfont.css';
+.ste-icon-root {
+	display: var(--display);
+	justify-content: center;
+	align-items: center;
+	vertical-align: baseline;
+	border-width: var(--border);
+	border-color: #bbb;
+	border-style: solid;
+
+	margin-left: var(--margin-left) !important;
+	margin-right: var(--margin-right) !important;
+	transform: translateY(calc(var(--margin-bottom) - var(--margin-top))) !important ;
+
+	width: calc(var(--size)) !important;
+	line-height: calc(var(--size) - var(--border) * 2) !important;
+	font-family: var(--font-family) !important;
+	font-size: calc(var(--size) - var(--border) * 2) !important;
+	color: var(--color);
+	font-weight: var(--weight) !important;
+}
+</style>

package/components/ste-image/README.md

@@ -0,0 +1,154 @@
+# Image 图片
+图片组件，对原生`image`组件进行了扩展。
+
+---$
+
+### 代码演示
+
+
+#### 不同填充模式的图片
+- 通过`src`属性设置图片地址
+- 通过`width`属性设置图片宽度
+- 通过`height`属性设置图片高度
+- 通过`mode`属性设置图片的裁剪和拉伸
+
+```html
+<ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="200" height="200" />
+<ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="200" height="200" mode="aspectFit"/>
+<ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="200" height="200" mode="aspectFill"/>
+<ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="200" mode="widthFix"/>
+<ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" height="200" mode="heightFix"/>
+```
+
+#### 圆角
+- 通过`radius`属性设置图片圆角属性
+
+```html
+<ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" radius="50%" width="200" height="200" />
+```
+
+#### 加载效果
+- 通过`hiddenLoading`关闭图片加载中提示
+
+```html
+<template>
+	<view>
+		<view class="image-box">
+			<ste-image :src="imgUrl" width="200" height="200" />
+			<view class="msg">加载中提示</view>
+		</view>
+		<view class="image-box">
+			<ste-image :src="imgUrl" hiddenLoading width="200" height="200" />
+			<view class="msg">隐藏加载中提示</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			imgUrl: '',
+		};
+	},
+	watch: {},
+	mounted() {
+		setTimeout(() => {
+			this.imgUrl = 'https://image.whzb.com/chain/StellarUI/图片.jpg';
+		}, 1500);
+	},
+};
+</script>
+```
+#### 加载失败
+- 通过`hiddenError`隐藏图片加载失败提示
+
+```html
+<template>
+	<view>
+		<view class="image-box">
+			<ste-image :src="errorUrl" width="200" height="200" />
+			<view class="msg">加载失败提示</view>
+		</view>
+		<view class="image-box">
+			<ste-image :src="errorUrl" hiddenError width="200" height="200" />
+			<view class="msg">关闭加载失败提示</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			errorUrl: '',
+		};
+	},
+	watch: {},
+	mounted() {
+		setTimeout(() => {
+			this.errorUrl = 'https://image.whzb.com/chain/StellarUI/none.png';
+		}, 1500);
+	},
+};
+</script>
+```
+#### 具名插槽
+- 通过`loading`具名插槽可以自定义加载中内容
+- 通过`error`具名插槽可以自定义加载失败内容
+
+```html
+<ste-image :src="errorUrl" width="200" height="200">
+	<template v-slot:loading>Loading...</template>
+	<template v-slot:error>Error</template>
+</ste-image>
+```
+
+
+---$
+### API
+#### Props
+|属性名									|说明																																																								| 类型							| 默认值						| 可选值									|支持版本						|
+| ---										|---																																																								|---							|---							|---										|---								|
+| `src`									| 图片源，同原生																																																			| `String`				| -								| -											|-									|
+| `mode`								| 图片裁剪、缩放的模式																																																| `String`				| `"scaleToFill"`	| 见下面`Mode`表格				|-									|
+| `width`								| 宽度：`Number`单位`rpx`，`String`同原生																																						| `Number/String`	| `"100%"`				| -											|-									|
+| `height`							| 高度：`Number`单位`rpx`，`String`同原生																																						| `Number/String`	| `"100%"`				| -											|-									|
+| `radius`							| 圆角：`Number`单位`rpx`，`String`同原生																																						| `Number/String`	| `0`							| -											|-									|
+| `hiddenLoading`				| 是否隐藏图片未加载的占位内容																																												| `Boolean`				| `false`					| -											|-									|
+| `hiddenError`					| 是否隐藏图片加载失败的占位内容																																											| `Boolean`				| `false`					| -											|-									|
+| `showMenuByLongpress`	| 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单	| `Boolean`				| `false`					| -											|微信小程序`2.13.0`	|
+| `lazyLoad`						| 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载																																| `Boolean`				| `false`					| -											|-									|
+| `display`							| 盒子模型																																																						| `String`				| `inline-flex`		|	可选属性同css同名属性值	|-									|
+
+##### Mode
+|合法值					|说明																																																													|
+| ---						|---																																																													|
+| `scaleToFill`	| 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素																														|
+| `aspectFit`		| 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来																			|
+| `aspectFill`	| 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取	|
+| `widthFix`		| 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变																																						|
+| `heightFix`		| 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变																																						|
+
+
+#### Events
+- 您可以通过监听`load`事件，监听图片是否加载完成
+- 您可以通过监听`error`事件，监听图片是否加载失败
+
+|事件名		|说明				|事件参数	|支持版本	|
+|---		|---				|---		|---		|
+| `click`	| 图片点击触发		|`event`	| -			|
+| `load`	| 图片加载成功触发	|`event`	| -			|
+| `error`	| 图片加载失败触发	|`event`	| -			|
+
+
+#### Slots
+|插槽名		| 说明				| 插槽参数	| 支持版本	|
+| ---		| ---				| ---		| ---		|
+| `loading`	| 加载中内容插槽		|-			| -			|
+| `error`	| 加载失败内容插槽	|-			| -			|
+
+
+---$
+{{xuyajun}}
+
+{{qinpengfei}}
+

package/components/ste-image/ste-image.vue

@@ -0,0 +1,218 @@
+<template>
+	<view class="ste-image-root" :style="[cmpStyle]">
+		<view class="loading-icon" v-if="!hiddenLoading && status === 0">
+			<slot name="loading">
+				<ste-icon code="&#xe693;" :size="iconSize" />
+			</slot>
+		</view>
+
+		<image
+			class="content"
+			:style="{ opacity: status === 1 ? '1' : '0' }"
+			:src="src"
+			:mode="mode"
+			:lazy-load="lazyLoad"
+			:show-menu-by-longpress="showMenuByLongpress"
+			@load="onLoadOver"
+			@error="onFault"
+			@click="click"
+		></image>
+
+		<view class="loading-icon" v-if="!hiddenError && status === 2">
+			<slot name="error">
+				<ste-icon code="&#xe692;" :size="iconSize" />
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-image 图片
+ * @description 图片组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-image
+ * @property {String}			src										图片地址
+ * @property {String}			mode									图片裁剪、缩放的模式 默认值：scaleToFill
+ * @value scaleToFill 缩放（默认）：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 {String}
+ * @value aspectFit 	缩放：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 {String}
+ * @value aspectFill 	缩放：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 {String}
+ * @value widthFix 		缩放：宽度不变，高度自动变化，保持原图宽高比不变 {String}
+ * @value heightFix 	缩放：高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3 {String}
+ * @property {String|Number}	width									宽度：（默认值100%）Number-单位rpx，String-同原生
+ * @property {String|Number}	height								高度：（默认值100%）Number-单位rpx，String-同原生
+ * @property {String|Number}	radius								圆角：（默认值0）Number-单位rpx，String-同原生
+ * @property {Boolean}				hiddenLoading					是否隐藏图片加载中内容
+ * @property {Boolean}				hiddenError						是否隐藏加载失败的内容
+ * @property {Boolean}				showMenuByLongpress		长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
+ * @property {Boolean}				lazyLoad							图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
+ * @property {String}					display								盒子模型
+ * @value inline-flex 行内弹性盒子（默认）
+ * @value flex 块级弹性盒子
+ * @value block 块级盒子
+ * @value inline-block 行内块级盒子
+ * @value none 隐藏
+ * @value inherit 继承父元素
+ * @value inline 行内元素
+ * @event {Function}			click 点击事件
+ * @event {Function}			load 加载成功事件
+ * @event {Function}			error 加载失败事件
+ */
+export default {
+	group: '基础组件',
+	title: 'Image 图片',
+	name: 'ste-image',
+	props: {
+		src: {
+			type: [String, null],
+			default: () => '',
+		},
+		mode: {
+			type: [String, null],
+			default: () => 'scaleToFill',
+		},
+		width: {
+			type: [Number, String, null],
+			default: () => '100%',
+		},
+		height: {
+			type: [Number, String, null],
+			default: () => '100%',
+		},
+		radius: {
+			type: [Number, String, null],
+			default: () => 0,
+		},
+		hiddenLoading: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		hiddenError: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		showMenuByLongpress: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		lazyLoad: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		display: {
+			type: [String, null],
+			default: () => 'inline-flex',
+		},
+	},
+	data() {
+		return {
+			status: 1,
+			initializing: true,
+			iconSize: 60,
+		};
+	},
+	computed: {
+		cmpStyle() {
+			let width = isNaN(this.width) ? this.width : utils.formatPx(this.width);
+			let height = isNaN(this.height) ? this.height : utils.formatPx(this.height);
+			if (this.mode === 'widthFix') {
+				if (this.status !== 1) {
+					height = width;
+				} else {
+					height = 'auto';
+				}
+			} else if (this.mode === 'heightFix') {
+				if (this.status !== 1) {
+					width = height;
+				} else {
+					width = 'auto';
+				}
+			}
+			return {
+				'--image-root-width': width,
+				'--image-root-height': height,
+				'--image-root-display': this.display,
+				'--image-root-radius': utils.formatPx(this.radius),
+				'--image-root-background-color': this.status === 1 ? 'none' : 'rgba(127,127,127,.05)',
+			};
+		},
+	},
+	watch: {
+		src() {
+			this.status = 0;
+		},
+		hiddenLoading: {
+			handler(v) {
+				if (v && this.hiddenError) this.status = 1;
+			},
+			immediate: true,
+		},
+		hiddenError: {
+			handler(v) {
+				if (v && this.hiddenLoading) this.status = 1;
+			},
+			immediate: true,
+		},
+	},
+	mounted() {
+		this.setIconSize();
+		setTimeout(() => {
+			if (this.initializing) this.status = 0;
+		}, 25);
+	},
+	methods: {
+		click(e) {
+			this.$emit('click', e);
+		},
+		onLoadOver(e) {
+			this.initializing = false;
+			if (this.status !== 1) this.status = 1;
+			this.$emit('load', e);
+		},
+		onFault(e) {
+			this.initializing = false;
+			if (this.status !== 2) this.status = 2;
+			this.$emit('error', e);
+		},
+		setIconSize() {
+			this.$nextTick(async () => {
+				const dom = await utils.querySelector('.ste-image-root', this);
+				// 因为查找dom为异步方法 组件销毁后，该方法继续执行导致报错
+				if (!dom) return;
+				const size = dom.width <= dom.height ? dom.width : dom.height;
+				if (size <= 30) this.iconSize = 12 * 2;
+				else if (size <= 50) this.iconSize = 20 * 2;
+				else if (size <= 100) this.iconSize = 30 * 2;
+				else if (size <= 150) this.iconSize = 50 * 2;
+				else this.iconSize = 70 * 2;
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-image-root {
+	width: var(--image-root-width);
+	height: var(--image-root-height);
+	display: var(--image-root-display);
+	font-size: 24rpx;
+	color: #bbbbbb;
+	justify-content: center;
+	align-items: center;
+	background-color: var(--image-root-background-color);
+	border-radius: var(--image-root-radius);
+	overflow: hidden;
+	line-height: 1;
+	vertical-align: top;
+	position: relative;
+	& > .content {
+		width: var(--image-root-width);
+		height: var(--image-root-height);
+	}
+	.loading-icon {
+		position: absolute;
+		z-index: 2;
+	}
+}
+</style>

package/components/ste-index-item/ste-index-item.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="ste-scroll-to-item-root">
+		<slot name="title">
+			<block v-if="title">
+				<ste-sticky v-if="sticky">
+					<view class="index-item-title" :class="{ active }">{{ title }}</view>
+				</ste-sticky>
+				<view v-else class="index-item-title" :class="{ active }">{{ title }}</view>
+			</block>
+		</slot>
+		<slot>
+			<view class="index-item-text-list">
+				<view class="index-item-text" v-for="(text, i) in list" :key="i" @click="onClickItem(text)">
+					{{ text }}
+				</view>
+			</view>
+		</slot>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import { childMixin } from '../../utils/mixin.js';
+/**
+ * ste-index-item 锚点项
+ * @description 锚点项
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-scroll-to
+ * @property {String}	title 分组标题
+ * @property {Array<String>}	list 分组字符串列表
+ */
+export default {
+	name: 'ste-index-item',
+	mixins: [childMixin('ste-index-list')],
+	props: {
+		title: {
+			type: [String, null],
+			required: true,
+		},
+		list: {
+			type: [Array, null],
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			sticky: true,
+			active: false,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.sticky = this.parent.sticky;
+		});
+	},
+	methods: {
+		setActive(bool) {
+			this.active = bool;
+		},
+		onClickItem(item) {
+			this.parent.onClickItem(this.title, item);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-scroll-to-item-root {
+	width: 100%;
+	.index-item-title {
+		width: 100%;
+		height: 80rpx;
+		line-height: 80rpx;
+		font-size: 32rpx;
+		padding: 0 32rpx;
+		background-color: #f5f5f5;
+		color: var(--ste-index-list-inactive-color);
+		&.active {
+			color: var(--ste-index-list-active-color);
+		}
+	}
+	.index-item-text-list {
+		padding: 0 32rpx;
+		background-color: #fff;
+		.index-item-text {
+			width: 100%;
+			height: 92rpx;
+			line-height: 92rpx;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #252525;
+			border-bottom: 2rpx solid #f9f9f9;
+		}
+	}
+}
+</style>