stellar-ui-v2 1.35.3

package/components/ste-text/README.md

@@ -0,0 +1,66 @@
+# Text 文本
+
+文本组件
+
+---$
+
+### 代码演示
+#### 可选
+- 当`selectable`为`true`时，可长按选中文字
+```html
+<ste-text selectable>Stellar UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水</ste-text>
+```
+
+#### 解码
+- `&nbsp;` 解码为一个不间断空格 (Non-Breaking Space)
+- `&lt;` 解码为小于号 <
+- `&gt;` 解码为大于号 >
+- `&amp;` 解码为和号 &
+- `&apos;` 解码为单引号 '
+- `&ensp;` 解码为一个半角空格 ( )
+- `&emsp;` 解码为一个全角空格 (　)
+```html
+<ste-text decode>Stellar&nbsp;UI</ste-text>
+<ste-text decode>Stellar&lt;UI</ste-text>
+<ste-text decode>Stellar&gt;UI</ste-text>
+<ste-text decode>Stellar&amp;UI</ste-text>
+<ste-text decode>Stellar&apos;UI</ste-text>
+<ste-text decode>Stellar&ensp;UI</ste-text>
+<ste-text decode>Stellar&emsp;UI</ste-text>
+```
+
+#### 换行省略
+```html
+<ste-text>
+	Stellar UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。Stellar
+	UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
+</ste-text>
+<ste-text :lines="2">
+	Stellar UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。Stellar
+	UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
+</ste-text>
+<ste-text :lines="3">
+	Stellar UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。Stellar
+	UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
+</ste-text>
+```
+
+---$
+### API
+#### 组件属性(Props)
+| 参数			| 说明																		| 类型		| 默认值		| 可选值																						| 支持版本	|
+| ---			| ---																		| ---		| ---		| ---																						| ---		|
+| `selectable`	| 文本是否可选																| `Boolean`	| `false`	| -																							| -			|
+| `space`		| 以何种方式显示连续空格														| `String`	| -			| `ensp` 中文字符空格一半大小<br/>`emsp` 中文字符空格大小<br/>`nbsp` 根据字体设置的空格大小	| -			|
+| `decode`		| 是否解码，可解析的 HTML 实体字符有：`&nbsp;&lt;&gt;&amp;&apos;&ensp;&emsp;`	| `Boolean`	| `false`	| -																							| -			|
+| `lines`		| 文本显示的行数，如果设置，超出此行数，将会显示省略号							| `Number`	| -			| -																							| -			|
+
+#### 组件插槽(Slots)
+
+|插槽名	|说明	|插槽参数	|支持版本	|
+|---	|---	|---		|---		|
+|default|内容	|-			|-			|
+
+
+---$
+{{fuyuwei}}

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

@@ -0,0 +1,72 @@
+<template>
+	<text
+		:style="[cmpRootCssVar]"
+		class="ste-text-root"
+		:class="{ 'ste-text-lines': lines > 0 }"
+		:selectable="selectable"
+		:user-select="selectable"
+		:space="space"
+		:decode="decode"
+		:number-of-lines="lines"
+	>
+		<slot></slot>
+	</text>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-text 文本
+ * @description 文本组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-text
+ * @property {Boolean} selectable 文本是否可选 默认 false
+ * @property {String} space 以何种方式显示连续空格
+ * @property {Boolean} decode 是否解码 默认 false
+ * @property {Number} lines 文本显示的行数，如果设置，超出此行数，将会显示省略号
+ */
+
+export default {
+	group: '基础组件',
+	title: 'Text 文本',
+	name: 'ste-text',
+	props: {
+		selectable: {
+			type: [Boolean, null],
+			default: false,
+		},
+		space: {
+			type: [String, null],
+			default: '',
+		},
+		decode: {
+			type: [Boolean, null],
+			default: false,
+		},
+		lines: {
+			type: [Number, null],
+			default: undefined,
+		},
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		cmpRootCssVar() {
+			return { '--overflow-lines': this.lines };
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-text-root {
+	&.ste-text-lines {
+		/* #ifdef MP-WEIXIN || H5 */
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: var(--overflow-lines);
+		overflow: hidden;
+		/* #endif */
+	}
+}
+</style>

package/components/ste-toast/README.md

@@ -0,0 +1,243 @@
+# Toast 轻提示
+
+在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
+
+---$
+
+
+
+### 使用方法
+1. 安装 `ste-vue-inset-loader` 插件
+```
+npm install ste-vue-inset-loader --save-dev
+```
+2. 配置 `pages.json` 信息
+```
+"insetLoader": {
+	"config": {
+		"toast": "<root-portal><ste-toast id='steToast'></ste-toast></root-portal>"
+	},
+	// 全局配置  
+	"label": ["toast"],
+	"rootEle": "view"
+},
+```
+3. 配置 `vue.config.js` 信息
+```
+chainWebpack: (config) => {
+	config.module
+	.rule('vue')
+	.test(/\.vue$/)
+	.use()
+	.loader(path.resolve(__dirname, './node_modules/ste-vue-inset-loader'))
+	.end();
+},
+```
+4. 在`main.js`里引入混淆文件`app-mixin.js`
+```
+import mixin from './app-mixin.js';
+Vue.mixin(mixin);
+```
+5. 在混淆文件`app-mixin.js`里引入组件的`js`文件,将`showToast`和`hideToast`方法混入全局，每个页面通过 `this.` 来使用对应的方法
+```
+import useSteToast from '@/node_modules/stellar-ui/components/ste-toast/ste-toast.js';
+let steToast = useSteToast();
+export default {
+	methods: {
+		showToast(params) {
+			// 是否开启提示跨页面功能配置 true为开启 false为关闭
+			params.enableCrossPagePrompt = false;
+			steToast.showToast(params);
+		},
+		hideToast: steToast.hideToast,
+	},
+};
+
+```
+6. js文件中使用
+```
+import useSteToast from '@/node_modules/stellar-ui/components/ste-toast/ste-toast.js';
+let steToast = useSteToast();
+steToast.showToast()
+```
+
+7. 提示跨页面功能配置  
+在混淆方法中将参数`enableCrossPagePrompt`置为`true`为开启 `false`为关闭
+```
+showToast(params) {
+	// 是否开启提示跨页面功能配置 true为开启 false为关闭
+	params.enableCrossPagePrompt = false;
+	steToast.showToast(params);
+},
+```
+
+### 代码演示
+
+#### 文字提示
+`title`为提示内容，提示弹窗根据内容自动撑开，最大宽度为260px，超过自动换行，也可手动插入换行符`\n`
+```
+click1() {
+	this.showToast({
+		title: '提示内容',
+	});
+},
+click2() {
+	this.showToast({
+		title: '多行内容，多行内容，多行内容，多行内容，多行内容，多行内容，多行内容，多行内容，多行内容，',
+	});
+},
+click3() {
+	this.showToast({
+		title: '换行\n内容',
+	});
+},
+```
+
+### 提示类型
+`icon`为固定的图标类型，默认为`success`，为`loading`时，弹窗不会自动关闭，需手动关闭弹窗，使用`hideToast`方法
+- `success`：显示成功图标
+- `error`：显示失败图标
+- `loading`：显示加载图标
+- `none`：无图标
+
+```
+click4() {
+	this.showToast({
+		title: '提示内容',
+	});
+},
+click5() {
+	this.showToast({
+		title: '提示内容',
+		icon: 'error',
+	});
+},
+click6() {
+	this.showToast({
+		title: '提示内容',
+		icon: 'loading',
+	});
+},
+click7() {
+	this.showToast({
+		title: '提示内容',
+		icon: 'none',
+	});
+},
+```
+`image`为自定义图标的路径，image 的优先级高于 icon
+```
+click8() {
+	this.showToast({
+		title: '提示内容',
+		image: 'https://image.whzb.com/chain/StellarUI/组件图标/loading.png',
+	});
+},
+```
+
+### 遮罩层
+`mask`为是否显示透明蒙层，防止触摸穿透，默认为`false`
+```
+click9() {
+	this.showToast({
+		title: '提示内容',
+		mask: true,
+		duration: 5000,
+	});
+},
+```
+
+### 延迟时间
+`duration`为提示的延迟时间，单位ms 值为 0 时，toast 不会自动消失（loading 类型默认为 0）
+```
+click10() {
+	this.showToast({
+		title: '提示内容',
+		duration: 5000,
+	});
+},
+```
+
+### 提示队列
+`order`为提示队列属性，`同一时间执行`的提示开启函数带有该属性的，将会把这个提示加入队列，队列中的提示按照执行顺序一直执行
+```
+this.showToast({
+	title: '队列1',
+	order: true,
+});
+this.showToast({
+	title: '队列2',
+	duration: 4000,
+	order: true,
+});
+this.showToast({
+	title: '队列3',
+	order: true,
+});
+```
+
+
+### 回调事件
+- `success`：提示打开成功的回调函数
+- `fail`：提示打开失败的回调函数
+- `complete`：提示结束的回调函数（提示打开、失败都会执行）	
+- `close`：提示关闭的的回调函数
+```
+click11() {
+	this.showToast({
+		title: '提示内容',
+		success() {
+			setTimeout(() => {
+				this.showToast({
+					title: '成功',
+					icon: 'none',
+				});
+			}, 2000);
+		},
+	});
+},
+click12() {
+	this.showToast({
+		title: '提示内容',
+		complete() {
+			setTimeout(() => {
+				this.showToast({
+					title: '结束',
+					icon: 'none',
+				});
+			}, 2000);
+		},
+	});
+},
+click13() {
+	this.showToast({
+		title: '提示内容',
+		close() {
+			this.showToast({
+				title: '关闭',
+				icon: 'none',
+			});
+		},
+	});
+},
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数		| 说明																				| 类型		| 默认值		| 可选值																								| 支持版本	|
+| ---		| ---																				| ---		| ---		| ---																								| ---		|
+| `title`	| 提示的内容																			| `String`	| -			| -																									| -			|
+| `icon`	| 图标																				| `String`	| `success`	| `success`：显示成功图标<br/>`error`：显示失败图标<br/>`loading`：显示加载图标<br/>`none`：无图标<br/>	| -			|
+| `image`	| 自定义图标的路径，image 的优先级高于 icon												| `String`	| -			| -																									| -			|
+| `duration`| 提示的延迟时间，单位`ms` 值为 `0` 时，`toast` 不会自动消失（`loading` 类型默认为 `0`）	| `Number`	| `1500`	| -																									| -			|
+| `mask`	| 是否显示透明蒙层，防止触摸穿透														| `Boolean`	| `false`	| -																									| -			|
+| `order`	| 是否是队列提示																		| `Boolean`	| `false`	| -																									| `v1.29.1`	|
+| `success`	| 提示打开成功的回调函数																| `Function`| -			| -																									| -			|
+| `fail`	| 提示打开失败的回调函数																| `Function`| -			| -																									| -			|
+| `complete`| 提示结束的回调函数（提示打开、失败都会执行）											| `Function`| -			| -																									| -			|
+| `close`	| 提示关闭的的回调函数																	| `Function`| -			| -																									| -			|
+
+---$
+{{qinpengfei}}

package/components/ste-toast/ste-toast.js

@@ -0,0 +1,69 @@
+import store from '../../utils/store.js';
+import Vuex from 'vuex';
+let $state = new Vuex.Store({
+	state: {
+		openBegin: false,
+		title: '',
+		icon: '',
+		image: '',
+		duration: 1500,
+		mask: false,
+		success: null,
+		fail: null,
+		complete: null,
+		close: null,
+		enableCrossPagePrompt: false,
+		timer: [],
+	},
+}).state;
+
+function useSteToast() {
+	return {
+		/*打开弹窗*/
+		showToast(params) {
+			// 默认持续时间
+			let defaultDuration = 1500;
+			// 关闭前面的弹窗
+			$state.openBegin = false;
+			// 关闭系统的弹窗
+			uni.hideToast();
+			// 提示队列
+			let time = 0;
+			if (params.order) {
+				// 先取上一次存的值 如果为空 则为第一个值
+				let toastLastParams = uni.getStorageSync('toastLastParams');
+				// 等待的时间 第一个没有等待时间 后面的都是前面的持续时间的合
+				if (typeof toastLastParams == 'object') {
+					time = toastLastParams.time;
+				}
+				// 存当前的等待时间 加100ms 以防没有打开中间的提示
+				params.time = time + (params.duration ?? defaultDuration) + 100;
+				uni.setStorageSync('toastLastParams', params);
+			} else {
+				// 遇到非队列数据 则清空队列时间
+				uni.removeStorageSync('toastLastParams');
+			}
+			let timer = setTimeout(() => {
+				$state.openBegin = true;
+				$state.title = params.title ?? '';
+				$state.icon = params.icon ?? 'success';
+				$state.image = params.image ?? '';
+				$state.duration = params.duration ?? defaultDuration;
+				$state.mask = params.mask ?? false;
+				$state.success = params.success ?? function () {};
+				$state.fail = params.fail ?? function () {};
+				$state.complete = params.complete ?? function () {};
+				$state.close = params.close ?? function () {};
+				$state.enableCrossPagePrompt = params.enableCrossPagePrompt ?? false;
+			}, time);
+			$state.timer.push(timer);
+		},
+		/*关闭弹窗*/
+		hideToast() {
+			$state.openBegin = false;
+		},
+		/**响应式数据*/
+		$state,
+	};
+}
+export default useSteToast;

package/components/ste-toast/ste-toast.vue

@@ -0,0 +1,231 @@
+<template>
+	<view class="ste-toast-root" v-if="show">
+		<view class="base">
+			<view class="box">
+				<view v-if="icon != 'none' || image" class="icon-box">
+					<block v-if="image">
+						<ste-image :src="image" :width="72" :height="72" display="block"></ste-image>
+					</block>
+					<block v-else>
+						<ste-icon
+							v-if="icon != 'loading'"
+							:code="cmpIcon"
+							:size="icon != 'error' ? 72 : 72 * 0.8"
+						></ste-icon>
+						<ste-loading v-else :size="72" color="#FFFFFF"></ste-loading>
+					</block>
+				</view>
+				<ste-text clas="title" space="nbsp">{{ title }}</ste-text>
+			</view>
+		</view>
+		<view class="mask" v-if="mask"></view>
+	</view>
+</template>
+<script>
+import utils from '../../utils/utils.js';
+import useSteToast from './ste-toast.js';
+let steToast = useSteToast();
+let $state = steToast.$state;
+/**
+ * ste-toast 轻提示
+ * @description 在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-toast
+ * @property {String} title 提示的内容
+ * @property {String} icon 图标 默认值：success
+ * @value success 显示成功图标 {String}
+ * @value error 显示失败图标 {String}
+ * @value loading 显示加载图标 {String}
+ * @value none 无图标 {String}
+ * @property {String} image 自定义图标的路径，image的优先级高于icon
+ * @property {Number} duration 提示的延迟时间，单位ms 默认值：1500，值为 0 时，toast 不会自动消失（loading 类型默认为 0）
+ * @property {Boolean} mask 是否显示透明蒙层，防止触摸穿透 默认值：false
+ * @event {Function} success 提示打开成功的回调函数
+ * @event {Function} fail 提示打开失败的回调函数
+ * @event {Function} complete 提示结束的回调函数（提示打开、失败都会执行）
+ * @event {Function} close 提示关闭的的回调函数
+ */
+export default {
+	group: '展示组件',
+	title: 'Toast 轻提示',
+	name: 'ste-toast',
+	data() {
+		return {
+			pageShow: true,
+			show: false,
+			title: '',
+			icon: '',
+			image: '',
+			duration: '',
+			mask: '',
+			success: null,
+			fail: null,
+			complete: null,
+			close: null,
+			timer: null,
+		};
+	},
+	onPageShow() {
+		this.$nextTick(() => {
+			this.pageShow = true;
+			if (!this.enableCrossPagePrompt) {
+				// 每次进入页面 则清空队列时间
+				uni.removeStorageSync('toastLastParams');
+				// 每次进入新页面 清除所有定时器
+				$state.timer.forEach((value) => {
+					clearTimeout(value);
+				});
+				// 清除定时器数据
+				$state.timer = [];
+			}
+		});
+	},
+	onPageHide() {
+		if (!this.enableCrossPagePrompt) {
+			this.pageShow = false;
+			steToast.hideToast();
+			// 每次离开页面 则清空队列时间
+			uni.removeStorageSync('toastLastParams');
+			// 每次离开页面 清除所有定时器
+			$state.timer.forEach((value) => {
+				clearTimeout(value);
+			});
+			// 清除定时器数据
+			$state.timer = [];
+		}
+	},
+	// 可能页面存在缓存
+	created() {
+		this.$nextTick(() => {
+			this.pageShow = true;
+			if (!this.enableCrossPagePrompt) {
+				// 每次进入页面 则清空队列时间
+				uni.removeStorageSync('toastLastParams');
+				// 每次进入新页面 清除所有定时器
+				$state.timer.forEach((value) => {
+					clearTimeout(value);
+				});
+				// 清除定时器数据
+				$state.timer = [];
+			}
+		});
+	},
+	destroyed() {
+		if (!this.enableCrossPagePrompt) {
+			this.pageShow = false;
+			steToast.hideToast();
+			// 每次离开页面 则清空队列时间
+			uni.removeStorageSync('toastLastParams');
+			// 每次离开页面 清除所有定时器
+			$state.timer.forEach((value) => {
+				clearTimeout(value);
+			});
+			// 清除定时器数据
+			$state.timer = [];
+		}
+	},
+	computed: {
+		cmpIcon() {
+			let iconObj = {
+				success: '&#xe67a;',
+				error: '&#xe67b;',
+			};
+			return iconObj[this.icon] ?? '';
+		},
+		openBegin() {
+			return $state.openBegin;
+		},
+		enableCrossPagePrompt() {
+			return $state.enableCrossPagePrompt;
+		},
+	},
+	watch: {
+		openBegin: {
+			handler(newVal) {
+				if (newVal && this.pageShow) {
+					try {
+						clearTimeout(this.timer);
+						this.show = newVal;
+						this.title = $state.title ?? '';
+						this.icon = $state.icon ?? 'success';
+						this.image = $state.image ?? '';
+						this.duration = $state.duration ?? 1500;
+						if (this.icon == 'loading') {
+							this.duration = 0;
+						}
+						this.mask = $state.mask ?? false;
+						this.success = $state.success ?? function () {};
+						this.fail = $state.fail ?? function () {};
+						this.complete = $state.complete ?? function () {};
+						this.close = $state.close ?? function () {};
+						if (this.duration) {
+							this.timer = setTimeout(() => {
+								steToast.hideToast();
+							}, this.duration);
+						}
+						this.success();
+					} catch (error) {
+						this.fail();
+					}
+					this.complete();
+				} else {
+					this.show = false;
+				}
+			},
+			immediate: true,
+		},
+		show: {
+			handler(newVal) {
+				if (!newVal) {
+					this.close();
+					// 关闭弹窗 则清空队列时间
+					uni.removeStorageSync('toastLastParams');
+				}
+			},
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-toast-root {
+	.base {
+		position: fixed;
+		text-align: center;
+		z-index: 9999;
+		top: 40%;
+		left: 0;
+		transform: translateY(-40%);
+		width: 100vw;
+	}
+	.box {
+		max-width: 520rpx;
+		background-color: rgba(0, 0, 0, 0.7);
+		border-radius: 16rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #ffffff;
+		line-height: 44rpx;
+		padding: 40rpx 48rpx;
+		word-break: break-all;
+		text-align: center;
+		margin: 0 auto;
+		display: inline-block;
+	}
+	.icon-box {
+		margin-bottom: 24rpx;
+		text-align: center;
+		display: flex;
+		justify-content: center;
+	}
+
+	.mask {
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		background-color: transparent;
+		z-index: 10000;
+		top: 0;
+		left: 0;
+	}
+}
+</style>