stellar-ui-v2 1.35.3

package/components/ste-message-box/README.md

@@ -0,0 +1,217 @@
+# MessageBox 弹框
+
+模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
+
+---$
+### 使用方法
+1. 安装 `ste-vue-inset-loader` 插件
+```
+npm install ste-vue-inset-loader --save-dev
+```
+2. 配置 `pages.json` 信息
+```
+"insetLoader": {
+	"config": {
+		"msgBox": "<root-portal><ste-message-box id='steMessageBox'></ste-message-box></root-portal>"
+	},
+	// 全局配置  
+	"label": ["msgBox"],
+	"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 useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
+let steMsgBox = useSteMsgBox();
+export default {
+	methods: {
+		showMsgBox: steMsgBox.showMsgBox,
+		hideMsgBox: steMsgBox.hideMsgBox
+	},
+};
+
+```
+6. js文件中使用
+```
+import useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
+let steMsgBox = useSteMsgBox();
+steMsgBox.showMsgBox();
+```
+
+### 代码演示
+#### 基础使用
+可在标题(`title`)和内容(`content`)中使用`\n`来实现换行
+```
+this.showMsgBox({
+	title: '确认删除订单吗？',
+});
+```
+
+#### 带图标
+- 内置三种图标类型：`info`、`success`、`error`
+- 当显示图标时，内容(`content`)会失效，只显示标题(`title`)
+```
+msgBoxIcon1() {
+	this.showMsgBox({
+		title: '提示',
+		icon: 'info',
+	});
+},
+msgBoxIcon2() {
+	this.showMsgBox({
+		title: '提示',
+		icon: 'success',
+	});
+},
+msgBoxIcon3() {
+	this.showMsgBox({
+		title: '提示',
+		icon: 'error',
+	});
+},
+```
+
+#### 自定义按钮
+```
+msgBoxBtn1() {
+	this.showMsgBox({
+		title: '提示',
+		content: '确认删除订单吗？',
+		cancelText: '算了',
+		confirmText: '删吧',
+	});
+},
+msgBoxBtn2() {
+	this.showMsgBox({
+		title: '提示',
+		content: '确认删除订单吗？',
+		cancelColor: '#e1e',
+		confirmColor: '#a8ae1e',
+	});
+},
+msgBoxBtn3() {
+	this.showMsgBox({
+		title: '提示',
+		content: '确认删除订单吗？',
+		showCancel: false,
+	});
+},
+```
+
+#### 显示输入框
+当显示输入框时，内容(`content`)将不显示
+```
+msgBoxInput() {
+	this.showMsgBox({
+		title: '提示',
+		content: '确认删除订单吗？',
+		editable: true,
+		placeholderText: '请输入',
+	});
+},
+```
+
+#### 插槽
+如果提供的弹框内容不满足需求，可以使用插槽自定义弹框内容。
+可以通过指定唯一标识`selector`的方式，在一个页面中使用多个`ste-message-box`，`useSteMsgBox(selector)`会返回一个指定了selector的组件实例。
+```
+<ste-button @click="customClick">插槽</ste-button>
+<ste-message-box selector="myMsgBox">
+	<view style="display: flex; justify-content: center; padding-bottom: 20rpx;width: 504rpx">
+		<ste-rate v-model="rate"></ste-rate>
+	</view>
+</ste-message-box>
+<script>
+import useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
+const msgBox = useSteMsgBox('myMsgBox');
+export default {
+	data() {
+		return {
+			rate: 0,
+		}
+	},
+	methods: {
+		customClick() {
+			msgBox.showMsgBox({
+				title: '评分',
+			});
+		},
+	}
+}
+</script>
+
+```
+
+#### 回调事件
+```
+msgBoxCallback1() {
+	this.showMsgBox({
+		title: '提示',
+		cancel: () => {
+			this.showToast({
+				title: '点击了取消',
+			});
+		},
+	});
+},
+msgBoxCallback2() {
+	this.showMsgBox({
+		title: '提示',
+		confirm: () => {
+			this.showToast({
+				title: '点击了确认',
+			});
+		},
+	});
+},
+msgBoxCallback3() {
+	this.showMsgBox({
+		title: '提示',
+		complete: () => {
+			this.showToast({
+				title: '弹框完成',
+			});
+		},
+	});
+},
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数				| 说明											| 类型		| 默认值		| 可选值	| 支持版本	|
+| ---				| ---											| ---		| ---		| ---	| ---		|
+| `title`			| 提示的标题										| `String`	| -			| -		| -			|
+| `content`			| 提示的内容										| `String`	| -			| -		| -			|
+| `icon`			| 提示区域显示图标，此时content会失效				| `String`	| -			| -		| -			|
+| `showCancel`		| 是否显示取消按钮								| `Boolean`	| `true`	| -		| -			|
+| `cancelText`		| 提示的内容										| `String`	| `取消`		| -		| -			|
+| `cancelColor`		| 取消按钮的文字颜色								| `String`	| `#333333`	| -		| -			|
+| `confirmText`		| 确认按钮的文字，最多 4 个字符					| `String`	| `确认`		| -		| -			|
+| `confirmColor`	| 确认按钮的文字颜色								| `String`	| `#0090FF`	| -		| -			|
+| `editable`		| 是否显示输入框									| `Boolean`	| `false`	| -		| -			|
+| `placeholderText`	| 显示输入框时的提示文本							| `String`	| -			| -		| -			|
+| `confirm`			| 点击确认的回调函数								| `Function`| `null`	| -		| -			|
+| `cancel`			| 点击取消的回调函数								| `Function`| `null`	| -		| -			|
+| `complete`		| 弹框关闭的回调函数（无论是确认关闭还是取消关闭）	| `Function`| `null`	| -		| -			|
+
+
+---$
+{{fuyuwei}}

package/components/ste-message-box/ste-message-box.js

@@ -0,0 +1,72 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+const DEFAULT_KEY = '$steMsgBoxKey';
+const DEFAULT_CONFIG = {
+	title: '',
+	content: '',
+	showCancel: true,
+	icon: '',
+	cancelText: '取消',
+	cancelColor: '#333333',
+	confirmText: '确认',
+	confirmColor: '',
+	editable: false,
+	placeholderText: '',
+	success: null,
+	fail: null,
+	complete: null,
+};
+
+const store = new Vuex.Store({
+	state: {},
+	mutations: {
+		initializeState(state, key) {
+			if (!state[key]) {
+				Vue.set(state, key, {
+					selector: key,
+					openBegin: false,
+					...DEFAULT_CONFIG,
+				});
+			}
+		},
+		setState(state, { key, params }) {
+			Object.assign(state[key], params);
+		},
+		resetState(state, key) {
+			Object.assign(state[key], {
+				openBegin: false,
+			});
+		},
+	},
+});
+
+function useSteMsgBox(key) {
+	key = key ?? DEFAULT_KEY;
+	store.commit('initializeState', key);
+
+	return {
+		showMsgBox(params) {
+			store.commit('setState', {
+				key,
+				params: {
+					...DEFAULT_CONFIG,
+					...params,
+					confirm: params.confirm ?? function () {},
+					cancel: params.cancel ?? function () {},
+					complete: params.complete ?? function () {},
+					openBegin: true,
+				},
+			});
+		},
+		hideMsgBox() {
+			store.commit('resetState', key);
+		},
+		$state: store.state[key],
+		$store: store,
+	};
+}
+
+export default useSteMsgBox;
+export { DEFAULT_KEY };

package/components/ste-message-box/ste-message-box.vue

@@ -0,0 +1,380 @@
+<template>
+	<view
+		class="ste-message-box-root"
+		:style="[cmpRootStyle]"
+		:class="[cmpRootClass]"
+		:animation="maskAnimationData"
+		v-if="show"
+	>
+		<view class="ste-message-box-content" :animation="animationData">
+			<view class="content-box">
+				<view class="icon-box" v-if="icon">
+					<ste-icon :code="cmpIconCode" color="#999999" size="45"></ste-icon>
+				</view>
+				<view class="ste-message-title">{{ title }}</view>
+				<view class="msg" v-if="!icon">
+					<slot>
+						<view class="text" v-if="!editable">{{ content }}</view>
+						<view v-else class="input-box">
+							<text class="placeholder-text" v-show="showInputPlaceholder">
+								{{ placeholderText }}
+							</text>
+							<input
+								:value="inputValue"
+								class="ste-message-box-input"
+								@input="handleInput"
+								@focus="handleInputFocus"
+								@blur="handleInputBlur"
+							/>
+						</view>
+					</slot>
+				</view>
+			</view>
+			<view class="footer">
+				<view class="cancel text" v-if="showCancel" @click="handleCancel">
+					{{ cancelText }}
+				</view>
+				<view class="confirm text" @click="handleConfirm">
+					{{ confirmText }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import useColor from '../../config/color.js';
+let color = useColor();
+import utils from '../../utils/utils.js';
+import useSteMsgBox, { DEFAULT_KEY } from './ste-message-box.js';
+const DURATION = 200;
+const ANIMATION_PROP = { duration: DURATION, timingFunction: 'ease-out' };
+const ICON_OBJ = {
+	info: '&#xe67d;',
+	success: '&#xe67a;',
+	error: '&#xe67b;',
+};
+/**
+ * ste-message-box 弹框
+ * @description 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-message-box
+ * @property {String} title 提示的标题
+ * @property {String} content 提示的内容
+ * @property {String} icon 提示区域显示图标，此时content会失效
+ * @property {String} cancelText 取消按钮的文字，最多 4 个字符
+ * @property {String} cancelColor 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
+ * @property {String} confirmText 确认按钮的文字，最多 4 个字符
+ * @property {String} confirmColor 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
+ * @property {Boolean} editable 是否显示输入框
+ * @property {String} placeholderText 显示输入框时的提示文本
+ * @event {Function} success 提示打开成功的回调函数
+ * @event {Function} fail 提示打开失败的回调函数
+ * @event {Function} complete 提示结束的回调函数（提示打开、失败都会执行）
+ */
+export default {
+	group: '展示组件',
+	title: 'MessageBox 弹框',
+	name: 'ste-message-box',
+	props: {
+		selector: {
+			type: [String, null],
+			default: DEFAULT_KEY,
+		},
+	},
+	data() {
+		return {
+			title: '确认删除订单？',
+			content: '',
+			icon: '',
+			cancelText: '取消',
+			cancelColor: '#333333',
+			confirmText: '确认',
+			confirmColor: '',
+			showCancel: true,
+			editable: false,
+			placeholderText: '',
+			inputType: '',
+			confirm: null,
+			cancel: null,
+			complete: null,
+			// 内部值
+			pageShow: true,
+			show: false,
+			inputValue: '',
+			animationData: null,
+			maskAnimationData: null,
+			iconObj: {
+				info: '&#xe67d;',
+				success: '&#xe67a;',
+				error: '&#xe67b;',
+			},
+			open: false,
+			tmpMsg: null,
+			showInputPlaceholder: true,
+		};
+	},
+	beforeCreate() {},
+	created() {
+		this.pageShow = true;
+	},
+	destroyed() {
+		this.pageShow = false;
+		this.cmpSteMsgBox.hideMsgBox();
+	},
+	computed: {
+		cmpRootStyle() {
+			let style = {
+				opacity: 0,
+				'--cancel-color': this.cancelColor,
+				'--confirm-color': this.confirmColor ? this.confirmColor : color.getColor().steThemeColor,
+			};
+			return style;
+		},
+		cmpRootClass() {
+			let classArr = [];
+			if (this.icon) {
+				classArr.push('icon-type');
+			}
+			if (!this.content && !this.$slots.default) {
+				classArr.push('no-content');
+			}
+
+			if (this.$slots && this.$slots.default) {
+				classArr.push('slot-type');
+			}
+			return classArr.join(' ');
+		},
+		cmpIconCode() {
+			return ICON_OBJ[this.icon] ? ICON_OBJ[this.icon] : ICON_OBJ.info;
+		},
+		cmpSteMsgBox() {
+			if (!this.tmpMsg) {
+				this.tmpMsg = useSteMsgBox(this.selector);
+			}
+			return this.tmpMsg;
+		},
+		openBegin() {
+			return this.cmpSteMsgBox.$state.openBegin;
+		},
+	},
+	watch: {
+		openBegin: {
+			handler(newVal) {
+				let $state = this.tmpMsg.$state;
+				if (newVal) {
+					this.inputValue = '';
+					this.title = $state.title;
+					this.content = $state.content;
+					this.icon = $state.icon;
+					this.cancelText = $state.cancelText || this.cancelText;
+					this.confirmText = $state.confirmText || this.confirmText;
+					this.confirmColor = $state.confirmColor
+						? $state.confirmColor
+						: this.confirmColor
+						? this.confirmColor
+						: color.getColor().steThemeColor;
+					this.showCancel = $state.showCancel === false ? false : true;
+					this.cancelColor = $state.cancelColor || this.cancelColor;
+					this.editable = $state.editable === false ? false : true;
+					this.placeholderText = $state.placeholderText || this.placeholderText;
+
+					this.confirm = $state.confirm;
+					this.cancel = $state.cancel;
+					this.complete = $state.complete;
+					this.showBox();
+				} else {
+					this.closeBox();
+				}
+			},
+			// immediate: true,
+		},
+	},
+	methods: {
+		async showBox() {
+			this.show = true;
+			await utils.sleep(50);
+			let animation = uni.createAnimation(ANIMATION_PROP);
+			let maskAnimation = uni.createAnimation(ANIMATION_PROP);
+			maskAnimation.opacity(1).step();
+			animation.scale(1).step();
+			this.animationData = animation.export();
+			this.maskAnimationData = maskAnimation.export();
+		},
+		closeBox() {
+			let animation = uni.createAnimation(ANIMATION_PROP);
+			let maskAnimation = uni.createAnimation(ANIMATION_PROP);
+			maskAnimation.opacity(0).step({ duration: DURATION });
+			animation.scale(0).step();
+			this.animationData = animation.export();
+			this.maskAnimationData = maskAnimation.export();
+			setTimeout(() => {
+				this.show = false;
+				this.showInputPlaceholder = true;
+			}, DURATION);
+		},
+		handleInput(e) {
+			this.inputValue = e.detail.value;
+		},
+		handleConfirm() {
+			this.confirm(this.inputValue);
+			this.handleComplete();
+		},
+		handleCancel() {
+			this.cancel(this.inputValue);
+			this.handleComplete();
+		},
+		handleComplete() {
+			this.complete(this.inputValue);
+			this.tmpMsg.hideMsgBox();
+		},
+		// 用input自带占位符时，由于动画原因导致最终显示会有一个下降的效果
+		handleInputFocus() {
+			this.showInputPlaceholder = false;
+		},
+		handleInputBlur() {
+			if (!this.inputValue) {
+				this.showInputPlaceholder = true;
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-message-box-root {
+	height: 100vh;
+	width: 100vw;
+	overflow: hidden;
+	position: fixed;
+	left: 0;
+	top: 0;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	touch-action: none;
+	background-color: rgba(0, 0, 0, 0.6);
+	z-index: 99999;
+
+	&.slot-type {
+		.ste-message-title {
+			padding-bottom: 24rpx !important;
+		}
+
+		.msg {
+			padding: 0 !important;
+		}
+	}
+
+	&.icon-type {
+		.ste-message-title {
+			padding: 24rpx 0 34rpx 0 !important;
+		}
+	}
+
+	&.no-content {
+		.ste-message-title {
+			padding-bottom: 48rpx !important;
+		}
+		.msg {
+			padding: 0 !important;
+		}
+	}
+
+	.ste-message-box-content {
+		background: #ffffff;
+		border-radius: 16rpx;
+		// border: 2rpx solid #eeeeee;
+		min-width: 570rpx;
+		max-width: 610rpx;
+		display: inline-flex;
+		flex-direction: column;
+		transform: scale(0);
+		.content-box {
+			.icon-box {
+				padding-top: 4rpx;
+				height: 80rpx;
+				width: 80rpx;
+				border-radius: 50%;
+				background: #f1f1f1;
+				margin: 32rpx auto 0 auto;
+
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.ste-message-title {
+				width: 100%;
+				padding-top: 48rpx;
+				padding-bottom: 24rpx;
+				font-weight: bold;
+				font-size: 32rpx;
+				text-align: center;
+			}
+
+			.msg {
+				padding: 0 32rpx 48rpx 32rpx;
+				text-align: center;
+				.text {
+					width: 100%;
+					font-size: 28rpx;
+					text-align: center;
+				}
+
+				.input-box {
+					position: relative;
+				}
+
+				.placeholder-text {
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%, -50%);
+					color: #999999;
+				}
+
+				.ste-message-box-input {
+					height: 80rpx;
+					width: 548rpx;
+					background: #f5f5f5;
+					border-radius: 8px 8px 8px 8px;
+					text-align: center;
+					padding: 0 24rpx;
+					font-size: 28rpx;
+				}
+			}
+		}
+		.footer {
+			display: flex;
+			height: 96rpx;
+			> .text {
+				height: 100%;
+				border-top: 2rpx solid #eeeeee;
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-weight: bold;
+				font-size: 32rpx;
+
+				/* #ifdef H5 || WEB */
+				cursor: pointer;
+				/* #endif */
+
+				&.cancel {
+					color: var(--cancel-color);
+				}
+
+				&.confirm {
+					color: var(--confirm-color);
+				}
+
+				& + .text {
+					border-left: 2rpx solid #eeeeee;
+				}
+			}
+		}
+	}
+}
+</style>