stellar-ui-v2 1.35.3

package/components/ste-notice-bar/README.md

@@ -0,0 +1,129 @@
+# NoticeBar 公告栏
+
+用于循环播放展示一组消息通知。
+
+---$
+
+### 代码演示
+JavaScript后面的演示代码中涉及到的变量和方法都使用本javasaript代码
+```javascript
+export default {
+	data() {
+		return {
+			list: ['第一条:1111111111111111111111111111', '第二条:2222222222222222222222', '第三条:3333333333333'],
+			list2: ['第一条:111', '第二条:222', '第三条:333', '第四条:444'],
+		};
+	},
+	mounted() {},
+};
+```
+
+#### 基础用法
+通过`list`数组参数设置需要滚动的内容,水平滚动。
+```
+<ste-notice-bar :list="list"></ste-notice-bar>
+```
+
+#### 自定义样式
+- 通过 `color` 属性设置文字颜色，默认为 `#000000`。 
+- 通过 `background` 属性设置背景，默认为 `#ffffff`。 
+- 通过 `width` 属性设置宽度，默认为 `100%`，继承父属性。 
+```
+<ste-notice-bar :list="list" background="#FBF8DC" color="red" :width="400"></ste-notice-bar>
+```
+
+#### 垂直滚动
+通过`direction`设置滚动的方向，`across`：水平，`vertical`：垂直 水平滚动、默认`across`。
+```
+<ste-notice-bar :list="list" direction="vertical"></ste-notice-bar>
+```
+
+#### 滚动速率
+通过`acrossSpeed`设置水平方向的滚动速率 `(px/s)`。
+```
+<ste-notice-bar :list="list" :acrossSpeed="10"></ste-notice-bar>
+```
+
+#### 滚动的速度
+通过`verticalSpeed`设置垂直方向的滚动的速度`（ms）`。
+```
+<ste-notice-bar :list="list2" direction="vertical" :verticalSpeed="2000"></ste-notice-bar>
+```
+
+#### 延时滚动
+通过`delay`设置延时`（ms）`。
+```
+<ste-notice-bar :list="list" :delay="10000"></ste-notice-bar>
+<ste-notice-bar :list="list2" direction="vertical" delay="10000"></ste-notice-bar>
+```
+
+#### 停留时间
+通过`standTime`设置每次滚动前停留多少毫秒(竖向滚动时有效)`（ms）`。
+```
+<ste-notice-bar :list="list2" direction="vertical" :standTime="5000"></ste-notice-bar>
+```
+
+#### 是否可以滚动
+通过`scrollable`设置公共栏是否可以滚动，默认`true`。
+```
+<ste-notice-bar :list="list" :scrollable="false"></ste-notice-bar>
+<ste-notice-bar :list="list2" direction="vertical" :scrollable="false"></ste-notice-bar>
+```
+
+#### 取消按钮
+通过`closeMode`设置是否启用关闭模式，默认`false`。
+```
+<ste-notice-bar :list="list" closeMode></ste-notice-bar>
+```
+
+#### 插槽
+通过`leftIcon`设置左边图标的插槽。
+通过`rightIcon`设置右边图标的插槽。
+```
+<ste-notice-bar :list="list">
+	<template #leftIcon>
+		<ste-icon color="#000000" code="&#xe682;" size="32"></ste-icon>
+	</template>
+	<template #rightIcon>
+		<ste-icon color="#000000" code="&#xe696;" size="32"></ste-icon>
+	</template>
+</ste-notice-bar>
+```
+
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数				| 说明								| 类型				| 默认值		| 可选值												| 支持版本	|
+| ---				| ---								| ---				| ---		| ---												| ---		|
+| `list`			| 滚动数据列表						| `Array`			| `[]`		| -													| -			|
+| `direction`		| 滚动的方向							| `String`			| `across`	| `across`：水平<br/>`vertical`：垂直					| -			|
+| `closeMode`		| 是否启用关闭模式					| `Boolean`			| `false`	| -													| -			|
+| `color`			| 文字颜色							| `String`			| `#000000`	| -													| -			|
+| `background`		| 背景								| `String`			| `#ffffff`	| -													| -			|
+| `width`			| 宽度								| `String\Number`	| `100%`	| `"100%"`：填满<br/>`{{Number}}`：自定义宽度 单位rpx	| -			|
+| `acrossSpeed`		| 滚动速率 (px/s)					| `Number`			| `50`		| -													| -			|
+| `verticalSpeed`	| 滚动的速度（ms）					| `Number`			| `500`		| -													| -			|
+| `delay`			| 延时（ms）							| `Number`			| `1000`	| -													| -			|
+| `standTime`		| 每次滚动前停留多少毫秒(竖向滚动时有效)	| `Number`			| `1000`	| -													| -			|
+| `scrollable`		| 是否可以滚动						| `Boolean`			| `true`	| -													| -			|
+
+#### 组件事件(Events)
+
+|事件名		|说明							|	事件参数			|支持版本	|
+|---		|---							|---				|---		|
+| `click`	| 内容区域点击回调事件				|`index`:结束后的序值	|			|
+| `close`	| 关闭模式下点击右侧关闭按钮时触发	|`event`			|			|
+| `end`		| 滚动结束时触发					|`index`:结束后的序值	|			|
+
+#### 组件插槽(Slots)
+
+|插槽名		|说明			|插槽参数	|支持版本	|
+|---		|---			|---		|---		|
+|`leftIcon`	|左边图标的插槽	|-			|			|
+|`rightIcon`|右边图标的插槽	|-			|			|
+
+
+---$
+{{qinpengfei}}

package/components/ste-notice-bar/ste-notice-bar.vue

@@ -0,0 +1,331 @@
+<template>
+	<view v-if="closeShow" class="ste-notice-bar-root" :style="[cmpStyle]">
+		<view class="msg-box-content" @touchstart="doPause" @touchend="doRun" @mousedown="doPause" @mouseup="doRun">
+			<view class="left">
+				<slot name="leftIcon">
+					<ste-image width="36" height="36" src="https://image.whzb.com/chain/StellarUI/notice-bar/tip.png" />
+				</slot>
+			</view>
+			<view v-if="direction == 'across'" :class="'center ' + id" @click="handleClick">
+				<view :id="id" :class="cardMsgClass" :style="[cmpAcrossStyle]" @animationend="onAnimationEnd">
+					<ste-rich-text :text="list[index]"></ste-rich-text>
+				</view>
+			</view>
+			<view
+				v-else
+				:class="'center vertical ' + cardMsgClass"
+				@click="handleClick"
+				@animationend="onAnimationEnd"
+				:style="[cmpVerticalStyle]"
+			>
+				<view v-for="(item, i) in copyList" :key="i">
+					<ste-rich-text :text="item"></ste-rich-text>
+				</view>
+			</view>
+			<view v-if="$slots.rightIcon || closeMode" class="right-icon">
+				<slot name="rightIcon">
+					<view @click="handleClose">
+						<ste-icon code="&#xe694;" size="32" :color="color"></ste-icon>
+					</view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+
+/**
+ * ste-notice-bar 公告栏
+ * @description 用于循环播放展示一组消息通知。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-notice-bar
+ * @property {Array} list 滚动数据列表，默认 []
+ * @property {String} direction 滚动的方向，默认 across
+ * @value across 水平 {String}
+ * @value vertical 垂直 {String}
+ * @property {Boolean} closeMode 是否启用关闭模式 默认 false
+ * @property {String} color 文字颜色，默认 #000000
+ * @property {String} background 背景，默认 #ffffff
+ * @property {Number|String} width 宽度  默认 100%
+ * @value 100% 填满 {String}
+ * @value  {{Number}} 自定义宽度，单位rpx {Number}
+ * @property {Number} acrossSpeed，滚动速率 (px/s)，默认 50
+ * @property {Number} verticalSpeed，滚动的速度（ms），默认 500
+ * @property {Number} delay 延时（ms），默认 1000
+ * @property {Number} standTime 每次滚动前停留多少毫秒(竖向滚动时有效)（ms），默认 1000
+ * @property {Boolean} scrollable 是否可以滚动 默认 true
+ * @event {Function} click 外层点击事件回调
+ * @event {Function} close 关闭通知栏时触发
+ * @event {Function} end 滚动结束时触发
+ */
+
+export default {
+	group: '展示组件',
+	title: 'NoticeBar 公告栏',
+	name: 'ste-notice-bar',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		list: {
+			type: [Array, null],
+			default: () => [],
+		},
+		direction: {
+			type: [String, null],
+			default: 'across',
+		},
+		closeMode: {
+			type: [Boolean, null],
+			default: false,
+		},
+		color: {
+			type: [String, null],
+			default: '#000000',
+		},
+		background: {
+			type: [String, null],
+			default: '#ffffff',
+		},
+		width: {
+			type: [Number, String, null],
+			default: '100%',
+		},
+		acrossSpeed: {
+			type: [Number, null],
+			default: 50,
+		},
+		verticalSpeed: {
+			type: [Number, null],
+			default: 500,
+		},
+		delay: {
+			type: [Number, null],
+			default: 1000,
+		},
+		standTime: {
+			type: [Number, null],
+			default: 1000,
+		},
+		scrollable: {
+			type: [Boolean, null],
+			default: true,
+		},
+	},
+	data() {
+		return {
+			id: utils.guid(),
+			index: 0,
+			touch: false,
+			firstDone: false,
+			copyList: [],
+			acrossDuration: 0,
+			textTranslate: 0,
+			cardMsgClass: '',
+			h5flag: false,
+			closeShow: true,
+		};
+	},
+	async mounted() {},
+	watch: {
+		list: {
+			handler(val) {
+				this.copyList = utils.deepClone(val);
+				if (val.length && this.scrollable) {
+					this.$nextTick(() => {
+						this.handleAnimation();
+					});
+				}
+			},
+			deep: true,
+			immediate: true,
+		},
+		index: {
+			handler() {
+				this.h5flag = false;
+			},
+			immediate: true,
+		},
+		copyList: {
+			handler() {
+				this.h5flag = false;
+			},
+			immediate: true,
+		},
+	},
+	computed: {
+		cmpStyle() {
+			let style = {};
+			style['width'] = isNaN(Number(this.width)) ? this.width : utils.formatPx(this.width);
+			style['background'] = this.background;
+			style['color'] = this.color;
+			return style;
+		},
+		cmpAcrossStyle() {
+			let style = {};
+			style['animationPlayState'] = this.touch ? 'paused' : 'running';
+			style['animationDuration'] = this.acrossDuration + 'ms';
+			style['animationDelay'] = (this.firstDone ? 0 : this.delay) + 'ms';
+			style['transform'] = `translateX(${this.textTranslate}px)`;
+			return style;
+		},
+		cmpVerticalStyle() {
+			let style = {};
+			style['animationPlayState'] = this.touch ? 'paused' : 'running';
+			style['animationDuration'] = this.verticalSpeed + 'ms';
+			style['animationDelay'] = (this.firstDone ? 0 : this.delay) + 'ms';
+			return style;
+		},
+	},
+	methods: {
+		// 执行滚动动画
+		async handleAnimation() {
+			if (this.direction == 'across') {
+				// 获取滚动消息的长度来计算动画的执行时间
+				let dom = await utils.querySelector('#' + this.id, this);
+				this.acrossDuration = ((dom.width + this.textTranslate) / Number(this.acrossSpeed)) * 1000;
+				this.cardMsgClass = 'across-play-infinite';
+			} else {
+				this.cardMsgClass = 'vertical-play-infinite';
+			}
+		},
+		// 动画结束
+		async onAnimationEnd() {
+			// 解决h5动画初始会触发结束事件
+			// #ifdef H5
+			if (this.h5flag) {
+				// #endif
+				if (this.direction == 'across') {
+					if (!this.textTranslate) {
+						// 获取滚动消息的父级元素的长度实现无缝滚动
+						let dom = await utils.querySelector('.' + this.id, this);
+						this.textTranslate = dom.width;
+					}
+					this.cardMsgClass = '';
+					// h5里 文本内容切换会导致触发动画结束事件，屏蔽切换
+					this.index = this.index + 1 >= this.list.length ? 0 : this.index + 1;
+					this.$nextTick(() => {
+						this.handleAnimation();
+					});
+				} else {
+					this.cardMsgClass = '';
+					// h5里 文本内容切换会导致触发动画结束事件，屏蔽切换
+
+					this.copyList.push(this.copyList.shift());
+
+					this.index = this.index + 1 >= this.list.length ? 0 : this.index + 1;
+					setTimeout(
+						() => {
+							this.handleAnimation();
+						},
+						this.standTime > this.verticalSpeed ? this.standTime : this.verticalSpeed // 下一个动画要在前一个动画后
+					);
+				}
+				this.firstDone = true;
+				this.$emit('end', this.index);
+				// #ifdef H5
+			}
+			if (this.direction == 'across') {
+				this.h5flag = true;
+			} else {
+				setTimeout(
+					() => {
+						this.h5flag = true;
+					},
+					this.verticalSpeed > 20 ? this.verticalSpeed - 20 : 20
+				);
+			}
+			// #endif
+		},
+		// 暂停
+		doPause() {
+			this.touch = true;
+		},
+		// 取消暂停
+		doRun() {
+			this.touch = false;
+		},
+		handleClose(e) {
+			this.closeShow = false;
+			this.$emit('close', e);
+		},
+		handleClick(e) {
+			this.$emit('click', this.index);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-notice-bar-root {
+	width: 100%;
+	height: 68rpx;
+	padding: 16rpx;
+	background: #ffffff;
+	border-radius: 16rpx;
+	display: flex;
+	align-items: center;
+
+	.msg-box-content {
+		display: flex;
+		align-items: center;
+		overflow-x: hidden;
+		justify-content: flex-start;
+		flex: 1;
+		height: 100%;
+	}
+	.left {
+		flex-shrink: 0;
+		margin-right: 16rpx;
+		display: flex;
+		align-items: center;
+		height: 36rpx;
+		line-height: 36rpx;
+	}
+	.center {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+
+		> view {
+			font-size: 24rpx;
+			display: inline-block;
+			width: auto;
+			white-space: nowrap;
+		}
+
+		.across-play-infinite {
+			animation: acrossAnimation linear both running;
+			animation-iteration-count: 1;
+		}
+
+		@keyframes acrossAnimation {
+			100% {
+				transform: translateX(-100%);
+			}
+		}
+	}
+
+	.vertical {
+		flex-direction: column;
+		height: 36rpx;
+		line-height: 36rpx;
+	}
+
+	.vertical-play-infinite {
+		animation: verticalAnimation linear both running;
+		animation-iteration-count: 1;
+	}
+
+	@keyframes verticalAnimation {
+		100% {
+			transform: translateY(-100%);
+		}
+	}
+
+	.right-icon {
+		margin-left: 16rpx;
+	}
+}
+</style>

package/components/ste-number-keyboard/README.md

@@ -0,0 +1,246 @@
+# NumberKeyboard 数字键盘
+
+虚拟数字键盘，用于输入数字、密码或身份证等场景。
+
+---$
+
+### 代码演示
+- 以下是公用scss代码
+```scss
+.test-input {
+	height: 66rpx;
+	line-height: 66rpx;
+	background-color: #f5f5f5;
+	padding: 0 18rpx;
+	font-size: 24rpx;
+	.placeholder {
+		color: #999;
+	}
+}
+```
+
+#### 基础用法
+- 属性`value`: 输入的值，支持`v-model`双向绑定
+- 属性`show`: 是否显示键盘，支持`sync`双向绑定
+```html
+<view class="test-input" @click="show1 = true">
+	<text v-if="value1">{{ value1 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard v-model="value1" :show.sync="show1" />
+
+<script>
+export default{
+	data(){
+		return {
+			value1: '',
+			show1: false
+		}
+	}
+}
+</script>
+```
+#### 隐藏右侧功能键
+- 属性`rightKeys`: 是否显示右侧功能键，默认显示
+```html
+<view class="test-input" @click="show2 = true">
+	<text v-if="value2">{{ value2 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :rightKeys="false" v-model="value2" :show.sync="show2" />
+
+<script>
+export default{
+	data(){
+		return {
+			value2: '',
+			show2: false
+		}
+	}
+}
+</script>
+```
+#### 隐藏清除按钮,value最大长度
+- 属性`showClear`: 是否显示清除按钮，默认显示
+- 属性`maxlength`: 最大`value`长度，默认不限制
+```html
+<view class="test-input" @click="show3 = true">
+	<text v-if="value3">{{ value3 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :showClear="false" v-model="value3" :show.sync="show3" maxlength="6"/>
+
+<script>
+export default{
+	data(){
+		return {
+			value3: '',
+			show3: false
+		}
+	}
+}
+</script>
+```
+#### 自定义按键
+- 属性`customKeys`: 自定义按键列表，建议不超过两个
+```html
+<view class="test-input" @click="show4 = true">
+	<text v-if="value4">{{ value4 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :customKeys="['00', '.']" v-model="value4" :show.sync="show4" />
+
+<script>
+export default{
+	data(){
+		return {
+			value4: '',
+			show4: false
+		}
+	}
+}
+</script>
+```
+
+#### 自定义颜色/字体大小/确定文本
+- 属性`textColor`: 按键文字颜色，默认#333333
+- 属性`textSize`: 按键文字大小，默认48，单位rpx
+- 属性`confirmBg`: 确定按钮背景颜色，默认#0090FF
+- 属性`confirmColor`: 确定按钮文字颜色，默认#FFFFFF
+- 属性`confirmText`: 确定按钮文字，默认"确定"
+```html
+<view class="test-input" @click="show5 = true">
+	<text v-if="value5">{{ value5 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard
+	v-model="value5"
+	:show.sync="show5"
+	textColor="#f00"
+	textSize="40"
+	confirmBg="#f00"
+	confirmColor="#0f0"
+	confirmText="完成"
+/>
+
+<script>
+export default{
+	data(){
+		return {
+			value5: '',
+			show5: false
+		}
+	}
+}
+</script>
+```
+#### 输入前事件（自定义功能）
+- 属性`customKeys`中自定义一些按钮，如"返回"
+	- 需要自定义该按钮功能，可使用`beforeinput`阻止该按钮的默认功能
+- 事件`beforeinput`: 输入前事件
+	- 参数1：即将输入的按钮文本
+	- 参数2：等待执行回调函数
+	- 参数3：继续后续操作函数
+	- 参数4：阻止后续操作函数
+
+```html
+<view class="test-input" @click="show6 = true">
+	<text v-if="value6">{{ value6 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :customKeys="['返回']" v-model="value6" :show.sync="show6" @beforeinput="beforeinput" />
+
+<script>
+export default{
+	data(){
+		return {
+			value6: '',
+			show6: false
+		}
+	},
+	methods:{
+		beforeinput(v, suspend, next, stop) {
+			// 等待后续操作
+			suspend();
+			// 执行自定义操作
+			if (v === '返回') {
+				// 阻止默认后续操作
+				stop();
+				this.showToast({
+					title: '点击了返回',
+					icon: 'none',
+				});
+			} else {
+				// 继续默认后续操作
+				next();
+			}
+		},
+	}
+}
+</script>
+```
+#### 在文档流中展示
+- 属性`mode`: 键盘模式，
+	- 可选值:`popup`在弹窗中展示(默认)
+	- 可选值:`page`在文档流中展示
+
+```html
+<view class="test-input">
+	<text v-if="value7">{{ value7 }}</text>
+	<text v-else class="placeholder">请输入</text>
+</view>
+<view style="padding: 30rpx; background-color: #f5f5f5; margin-top: 12rpx">
+	<ste-number-keyboard mode="page" v-model="value7" />
+</view>
+
+<script>
+export default{
+	data(){
+		return {
+			value7: '',
+		}
+	},
+}
+</script>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数							| 说明																						| 类型								| 默认值			| 可选值																		| 支持版本	|
+| ---								| ---																						| ---								| ---				| ---																			| ---			|
+| `mode`						| 键盘模式																				| `String`					| `popup`		| `popup`弹窗展示<br/>`page`在文档流中展示	| -				|
+| `value`						| 输入值，支持`v-model`双向绑定										| `String`					| -					|	-																				| -				|
+| `maxlength`				| `value`最大长度																| `Number`,`String`	| -					|	-																				| -				|
+| `show`						| 是否显示键盘，支持`.sync`绑定，mode="popup"时生效	| `Boolean`					| `false`		|	-																				| -				|
+| `rightKeys`				| 是否显示右侧功能键															| `Boolean`					| `true`		|	-																				| -				|
+| `randomKeys`			| 按键是否随机排列																| `Boolean`					| `false`		|	-																				| -				|
+| `confirmText`			| 右侧确认按钮文本																| `String`					| `确定`			|	-																				| -				|
+| `confirmDisabled`	| 右侧确认是否禁用																| `Boolean`					| `false`		|	-																				| -				|
+| `customKeys`			| 自定义按键，建议数量不大于2											| `Array<String>`		| `[]`			|	-																				| -				|
+| `showClear`				| 是否显示清空按钮																| `Boolean`					| `true`		|	-																				| -				|
+| `textColor`				| 按键文字颜色																		| `String`					| `#000000`	|	-																				| -				|
+| `textSize`				| 按键文字大小																		| `Number`,`String`	| `48`			|	-																				| -				|
+| `confirmBg`				| 确认按钮背景颜色																| `String`					| `#0090FF`	|	-																				| -				|
+| `confirmColor`		| 确认按钮文字颜色																| `String`					| `#FFFFFF`	|	-																				| -				|
+
+#### 组件事件（Event）
+| 事件名				| 说明																			| 事件参数																																																				|支持版本	|
+|---						|---																			|---																																																						|---			|
+| `change`			| 输入值`value`改变时触发										| `value`:当前的绑定值																																														|-				|
+| `clear`				| 清空按钮点击事件													| -																																																							|-				|
+| `backspace`		| 删除按钮点击事件													| -																																																							|-				|
+| `confirm`			| 确认按钮点击事件													| -																																																							|-				|
+| `click`				| 点击功能键(确认/删除/清除)之外的键盘触发		| -																																																							|-				|
+| `beforeinput`	| 输入之前触发，功能键之外的键盘点击时为输入	| 参数1为当前点击的按钮<br/>参数2为开启等待的回调函数<br/>参数3为执行后续操作的回调函数<br/>参数4为阻止后续执行的回调函数	|-				|
+| `close`				| 关闭弹窗键盘触发													| -																																																							|-				|
+| `open`				| 打开弹窗键盘触发													| -																																																							|-				|
+#### 组件插槽(Slot)
+
+|插槽名		|说明					|插槽参数	|支持版本	|
+|---			|---					|---			|---			|
+| default	| 弹窗标题插槽	|-				|-				|
+
+---$
+{{xuyajun}}