stellar-ui-v2 1.35.3

package/components/ste-badge/README.md

@@ -0,0 +1,171 @@
+# Badge 徽标
+
+在右上角展示徽标数字或小红点。
+
+---$
+
+### 代码演示
+- 以下代码公共样式
+```css
+.avator {
+	height: 80rpx;
+	width: 80rpx;
+	border-radius: 8rpx;
+	background-color: #f2f3f5;
+}
+```
+
+#### 徽标内容
+通过`content`属性，设置子元素的右上角的徽标
+```html
+<ste-badge content="1">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="99+">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="hot">
+	<view class="avator"></view>
+</ste-badge>
+```
+
+#### 小红点
+通过`showDot`属性，设置是否显示小红点
+
+```html
+<ste-badge showDot>
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge showDot background="rgb(25, 137, 250)">
+	<view class="avator"></view>
+</ste-badge>
+```
+
+#### 背景
+通过`background`属性，设置徽标内容的背景
+- 支持纯色、渐变色、背景图
+
+```html
+<ste-badge content="1" background="rgb(25, 137, 250)">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="99+" background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge background="https://img95.699pic.com/xsj/0a/5y/dc.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast">
+	<view class="avator"></view>
+</ste-badge>
+```
+
+
+#### 徽标位置
+通过`position`属性，设置徽标的位置
+
+```html
+<ste-badge content="1">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="topLeft">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomLeft">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomRight">
+	<view class="avator"></view>
+</ste-badge>
+```
+
+#### 偏移
+当设置了`offsetX`或`offsetY`值时，徽标会基于当前设置徽标位置(`position`)往中心点进行偏移
+
+```html
+<ste-badge content="1" :offsetX="5" :offsetY="5">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="topLeft" :offsetX="5" :offsetY="5">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomLeft" :offsetX="5" :offsetY="5">
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomRight" :offsetX="5" :offsetY="5">
+	<view class="avator"></view>
+</ste-badge>
+```
+
+#### 为0时是否显示徽标
+当`content`为`Number`类型时并且值等于`0`时，默认不会显示，如果`showZero`为`true`，则会显示
+```html
+<ste-badge :content="0" showZero>
+	<view class="avator"></view>
+</ste-badge>
+```
+
+#### 最大值
+当`content`为`Number`类型时并且值大于`max`时，会显示`{{max}}+`，`max`默认值为`99`
+
+```html
+<ste-badge :content="100" >
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge :content="99">
+	<view class="avator"></view>
+</ste-badge>
+```
+
+#### 自定义内容
+通过`content`插槽，自定义徽标的内容
+```html
+<ste-badge>
+	<template slot="content">
+		<ste-icon code="&#xe676;" size="18"></ste-icon>
+	</template>
+	<view class="avator"></view>
+</ste-badge>
+<ste-badge>
+	<template slot="content">
+		<ste-icon code="&#xe67b;" size="12"></ste-icon>
+	</template>
+	<view class="avator"></view>
+</ste-badge>
+
+<style>
+.child {
+	height: 80rpx;
+	width: 80rpx;
+	border-radius: 8rpx;
+	background-color: #f2f3f5;
+}
+</style>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数					| 说明																																										| 类型							| 默认值			| 可选值																																			| 支持版本		|
+| ---						| ---																																										| ---							| ---				| ---																																				| ---				|
+| `content`			| 徽标内容																																								| `Number/String`	| -					| -																																					| -					|
+| `background`	| 背景																																										| `String`				| `#ee0a24`	| -																																					| -					|
+| `showDot`			| 是否展示为小红点																																				| `Boolean`				| `true`		| -																																					| -					|
+| `position`		| 徽标位置																																								| `String`				| `topRight`| topRight：上右<br/>topLeft：上左<br/>bottomLeft：下左<br/>bottomRight：下右	| -					|
+| `offsetX`			| x轴偏移量																																							| `Number/String`	| `auto`		| -																																					| -					|
+| `offsetY`			| y轴偏移量																																							| `Number/String`	| `auto`		| -																																					| -					|
+| `showZero`		| 当 content 为数字 0 或字符串 '0' 时，是否展示徽标																				| `Boolean`				| `true`		| -																																					| -					|
+| `max`					| 最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效，当 content 为数字 0 时不处理	| `Number`				| `99`			| 0：当 content 为数字 0 时不处理<br/>{{Number}}：超过最大值会显示 {max}+			| `v1.1.5`	|
+| `showBorder`	| 是否显示边框																																						| `Boolean`				| `false`		| -																																					| `v1.9.0`	|
+| `borderColor`	| 边框颜色																																								| `String`				| `#fff`		| -																																					| `v1.9.0`	|
+| `zIndex`			| 层级																																										| `Number`				| `2`				| -																																					| `v1.9.0`	|
+| `isInline`		| display属性是否为inline-block																													| `Boolean`				| `false`		| -																																					| `v1.10.0`	|
+| `rootStyle`		| 组件root节点内联样式																																		| `Object`				| `{}`			| -																																					| `v1.13.0`	|
+
+#### 组件插槽(Slots)
+
+|名称	|说明			|支持版本	|
+|---	|---			|---		|
+|default|默认插槽		|-			|
+|content|自定义徽标内容	|-			|
+
+---$
+{{fuyuwei}}

package/components/ste-badge/ste-badge.vue

@@ -0,0 +1,238 @@
+<template>
+	<view class="ste-badge-root" :style="[rootStyle, { display: isInline ? 'inline-block' : 'block' }]">
+		<view
+			class="ste-badge-content"
+			:style="[cmpContentStyle]"
+			:class="'ste-badge-' + position"
+			v-if="showDot || cmpShowContent || $slots.content"
+		>
+			<view v-if="showDot" class="dot-box" />
+			<view
+				v-else
+				class="content-box"
+				:class="{ 'no-padding': $slots.content || (content && (content.length == 1 || content < 10)) }"
+			>
+				<slot name="content">
+					<view class="ste-badge-content-text">{{ cmpContent }}</view>
+				</slot>
+			</view>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-badge 徽标
+ * @description 徽标组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-badge
+ * @property {Number|String} content 徽标内容
+ * @property {String} background 背景 默认 #ee0a24
+ * @property {Boolean} showDot 是否展示为小红点 默认 false
+ * @property {Number|String} offsetX 根据徽标位置,设置x轴偏移量 默认 auto
+ * @property {Number|String} offsetY 根据徽标位置,设置y轴偏移量 默认 auto
+ * @property {Boolean} showZero 当 content 为数字 0，是否展示徽标，默认 false
+ * @property {String} position 徽标位置 默认 topRight
+ * @value topRight 上右 {String}
+ * @value topLeft 上左 {String}
+ * @value bottomLeft 下左 {String}
+ * @value bottomRight 下右 {String}
+ * @property {Number} max 徽标最大显示值 默认 99
+ * @property {Boolean} showBorder 是否显示边框 默认 false
+ * @property {String} borderColor 边框颜色
+ * @property {Number} zIndex 层级 默认 2
+ * @property {Boolean} isInline display属性是否为inline-block 默认 false
+ */
+
+export default {
+	group: '基础组件',
+	title: 'Badge 徽标',
+	name: 'ste-badge',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		content: {
+			type: [String, Number, Boolean, null],
+			default: '',
+		},
+		background: {
+			type: [String, null],
+			default: '#ee0a24',
+		},
+		showDot: {
+			type: [Boolean, null],
+			default: false,
+		},
+		offsetX: {
+			type: [String, Number, null],
+			default: 'auto',
+		},
+		offsetY: {
+			type: [String, Number, null],
+			default: 'auto',
+		},
+		showZero: {
+			type: [Boolean, null],
+			default: false,
+		},
+		position: {
+			type: [String, null],
+			default: 'topRight',
+		},
+		max: {
+			type: [Number, null],
+			default: 99,
+		},
+		showBorder: {
+			type: [Boolean, null],
+			default: false,
+		},
+		borderColor: {
+			type: [String, null],
+			default: '#fff',
+		},
+		zIndex: {
+			type: [Number, null],
+			default: 2,
+		},
+		isInline: {
+			type: [Boolean, null],
+			default: false,
+		},
+		rootStyle: {
+			type: [Object, null],
+			default: () => ({}),
+		},
+	},
+	computed: {
+		cmpContentStyle() {
+			let style = {};
+			if (this.background) {
+				style = { backgroundColor: 'transparent', ...utils.bg2style(this.background) };
+			}
+			if (this.offsetX != 'auto' || this.offsetY != 'auto' || this.offsetX == 0 || this.offsetY == 0) {
+				style.transform = 'translate(0,0)';
+
+				switch (this.position) {
+					case 'topLeft':
+						style.left = utils.addUnit(this.offsetX);
+						style.top = utils.addUnit(this.offsetY);
+						break;
+					case 'bottomLeft':
+						style.left = utils.addUnit(this.offsetX);
+						style.bottom = utils.addUnit(this.offsetY);
+						break;
+					case 'bottomRight':
+						style.right = utils.addUnit(this.offsetX);
+						style.bottom = utils.addUnit(this.offsetY);
+						break;
+					default:
+						style.right = utils.addUnit(this.offsetX);
+						style.top = utils.addUnit(this.offsetY);
+						break;
+				}
+			}
+			if (this.showBorder) {
+				style.border = 'solid 1px ' + this.borderColor;
+			}
+			style['z-index'] = this.zIndex;
+
+			return style;
+		},
+		cmpShowContent() {
+			return this.showZero ? true : this.content && this.content != '0';
+		},
+		cmpContent() {
+			if (utils.isNumber(this.content) && this.content > this.max) {
+				return `${this.max}+`;
+			} else {
+				return String(this.content);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$default-size: 28rpx;
+.ste-badge-root {
+	position: relative;
+
+	.ste-badge-content {
+		display: inline-block;
+		position: absolute;
+		font-size: 24rpx;
+		color: #ffffff;
+		background-color: #ee0a24;
+		border-radius: 99999rpx;
+		width: fit-content;
+		background-size: cover;
+
+		.content-box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: $default-size;
+			max-height: $default-size;
+			min-height: $default-size;
+			width: auto;
+			min-width: $default-size;
+			overflow: hidden;
+
+			padding: 0 8rpx;
+			line-height: 0;
+
+			&.no-padding {
+				padding: 0;
+			}
+		}
+
+		.dot-box {
+			height: 12rpx;
+			width: 12rpx;
+		}
+
+		&-text {
+			font-size: 22rpx;
+			color: #ffffff;
+			line-height: $default-size;
+			vertical-align: middle;
+			position: relative;
+			// #ifdef  H5
+			top: -0.5rpx;
+			// #endif
+			// #ifdef  MP-WEIXIN
+			// top: -0.5rpx;
+			// #endif
+			// #ifdef  MP-ALIPAY
+			// top: 0.5rpx;
+			// #endif
+		}
+	}
+
+	.ste-badge- {
+		&topRight {
+			top: 0;
+			right: 0;
+			transform: translate(50%, -50%);
+		}
+		&topLeft {
+			top: 0;
+			left: 0;
+			transform: translate(-50%, -50%);
+		}
+		&bottomLeft {
+			bottom: 0;
+			left: 0;
+			transform: translate(-50%, 50%);
+		}
+		&bottomRight {
+			bottom: 0;
+			right: 0;
+			transform: translate(50%, 50%);
+		}
+	}
+}
+</style>

package/components/ste-barcode/README.md

@@ -0,0 +1,36 @@
+# Barcode 条形码
+能够将数字和字母转换生成条形码的组件，支持自定义配色
+
+---$
+
+### 代码演示
+#### 基础使用
+```html
+<ste-barcode content="123456abc123" />
+```
+
+#### 自定义颜色
+```html
+<ste-barcode content="123456abc123" foreground="#c11" background="#dad" />
+```
+
+
+
+---$
+### API
+#### Props
+| 参数			| 说明					| 类型		| 默认值	| 可选值	| 支持版本	|
+| ---			| ---					| ---		| ---	| ---	| ---		|
+| `content`		| 条形码内容				| `String`	| -		| -		| `v1.35.4`    			|
+| `width`		| 条形码宽度，单位`px`		| `Number`	| 300	| -		| `v1.35.4`    			|
+| `height`		| 条形码高度，单位`px`		| `Number`	| 100	| -		| `v1.35.4`    			|
+| `background`	| 背景色					| `String`	| `#fff`| -		| `v1.35.4`    			|
+| `foreground`	| 前景色(条形码画笔颜色)	| `String`	| `#000`| -		| `v1.35.4`    			|
+
+#### Events
+|事件名			|说明								|事件参数	|支持版本		|
+| ---			| ---								| ---	| ---		|
+| `loadImage`	| `加载完成后返回条形码对应的图片数据`	| `src`	| `v1.35.4`	|
+
+---$
+{{fuyuwei}}