@gmcb/uv-ui 0.2.26

package/components/uv-back-top/props.js

@@ -0,0 +1,58 @@
+export default {
+	props: {
+		// 返回顶部的形状，circle-圆形，square-方形
+		mode: {
+			type: String,
+			default: 'circle'
+		},
+		// 自定义图标
+		icon: {
+			type: String,
+			default: 'arrow-upward'
+		},
+		// 提示文字
+		text: {
+			type: String,
+			default: ''
+		},
+		// 返回顶部滚动时间
+		duration: {
+			type: [String, Number],
+			default: 100
+		},
+		// 滚动距离
+		scrollTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 距离顶部多少距离显示，单位px
+		top: {
+			type: [String, Number],
+			default: 400
+		},
+		// 返回顶部按钮到底部的距离，单位px
+		bottom: {
+			type: [String, Number],
+			default: 100
+		},
+		// 返回顶部按钮到右边的距离，单位px
+		right: {
+			type: [String, Number],
+			default: 20
+		},
+		// 层级
+		zIndex: {
+			type: [String, Number],
+			default: 9
+		},
+		// 图标的样式，对象形式
+		iconStyle: {
+			type: Object,
+			default: () => ({
+				color: '#909399',
+				fontSize: '19px'
+			})
+		},
+		...uni.$uv?.props?.backtop
+	}
+}

package/components/uv-back-top/uv-back-top.vue

@@ -0,0 +1,116 @@
+<template>
+	<uv-transition mode="fade" :customStyle="backTopStyle" :show="show">
+		<slot>
+			<view class="uv-back-top" :style="[contentStyle]" @click="backToTop">
+				<uv-icon :name="icon" :custom-style="iconStyle"></uv-icon>
+				<text v-if="text" class="uv-back-top__text">{{text}}</text>
+			</view>
+		</slot>
+	</uv-transition>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom')
+	// #endif
+	/**
+	 * backTop 返回顶部
+	 * @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+	 * @tutorial https://www.uvui.cn/components/backTop.html
+	 * @property {String}			mode  		返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
+	 * @property {String} 			icon 		自定义图标 （默认 'arrow-upward' ） 见官方文档示例
+	 * @property {String} 			text 		提示文字 
+	 * @property {String | Number}  duration	返回顶部滚动时间 （默认 100）
+	 * @property {String | Number}  scrollTop	滚动距离 （默认 0 ）
+	 * @property {String | Number}  top  		距离顶部多少距离显示，单位px （默认 400 ）
+	 * @property {String | Number}  bottom  	返回顶部按钮到底部的距离，单位px （默认 100 ）
+	 * @property {String | Number}  right  		返回顶部按钮到右边的距离，单位px （默认 20 ）
+	 * @property {String | Number}  zIndex 		层级   （默认 9 ）
+	 * @property {Object<Object>}  	iconStyle 	图标的样式，对象形式   （默认 {color: '#909399',fontSize: '19px'}）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @example <uv-back-top :scrollTop="scrollTop"></uv-back-top>
+	 */
+	export default {
+		name: 'uv-back-top',
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			backTopStyle() {
+				// 动画组件样式
+				const style = {
+					bottom: this.$uv.addUnit(this.bottom),
+					right: this.$uv.addUnit(this.right),
+					width: '40px',
+					height: '40px',
+					position: 'fixed',
+					zIndex: 10,
+				}
+				return style
+			},
+			show() {
+				return this.$uv.getPx(this.scrollTop) > this.$uv.getPx(this.top)
+			},
+			contentStyle() {
+				const style = {}
+				let radius = 0
+				// 是否圆形
+				if (this.mode === 'circle') {
+					radius = '100px'
+				} else {
+					radius = '4px'
+				}
+				// 为了兼容安卓nvue，只能这么分开写
+				style.borderTopLeftRadius = radius
+				style.borderTopRightRadius = radius
+				style.borderBottomLeftRadius = radius
+				style.borderBottomRightRadius = radius
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			backToTop() {
+				// #ifdef APP-NVUE
+				if (!this.$parent.$refs['uv-back-top']) {
+					this.$uv.error(`nvue页面需要给页面最外层元素设置"ref='uv-back-top'`)
+				}
+				dom.scrollToElement(this.$parent.$refs['uv-back-top'], {
+					offset: 0
+				})
+				// #endif
+
+				// #ifndef APP-NVUE
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: this.duration
+				});
+				// #endif
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	$uv-back-top-flex: 1 !default;
+	$uv-back-top-height: 100% !default;
+	$uv-back-top-background-color: #E1E1E1 !default;
+	$uv-back-top-tips-font-size: 12px !default;
+	.uv-back-top {
+		@include flex;
+		flex-direction: column;
+		align-items: center;
+		flex: $uv-back-top-flex;
+		height: $uv-back-top-height;
+		justify-content: center;
+		background-color: $uv-back-top-background-color;
+		&__tips {
+			font-size: $uv-back-top-tips-font-size;
+			transform: scale(0.8);
+		}
+	}
+</style>

package/components/uv-badge/props.js

@@ -0,0 +1,73 @@
+export default {
+	props: {
+		// 是否显示圆点
+		isDot: {
+			type: Boolean,
+			default: false
+		},
+		// 显示的内容
+		value: {
+			type: [Number, String],
+			default: ''
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 最大值，超过最大值会显示 '{max}+'
+		max: {
+			type: [Number, String],
+			default: 999
+		},
+		// 主题类型，error|warning|success|primary
+		type: {
+			type: [String,undefined,null],
+			default: 'error'
+		},
+		// 当数值为 0 时，是否展示 Badge
+		showZero: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色，优先级比type高，如设置，type参数会失效
+		bgColor: {
+			type: [String, null],
+			default: null
+		},
+		// 字体颜色
+		color: {
+			type: [String, null],
+			default: null
+		},
+		// 徽标形状，circle-四角均为圆角，horn-左下角为直角
+		shape: {
+			type: [String,undefined,null],
+			default: 'circle'
+		},
+		// 设置数字的显示方式，overflow|ellipsis|limit
+		// overflow会根据max字段判断，超出显示`${max}+`
+		// ellipsis会根据max判断，超出显示`${max}...`
+		// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
+		numberType: {
+			type: [String,undefined,null],
+			default: 'overflow'
+		},
+		// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+		offset: {
+			type: Array,
+			default: () => []
+		},
+		// 是否反转背景和字体颜色
+		inverted: {
+			type: Boolean,
+			default: false
+		},
+		// 是否绝对定位
+		absolute: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.badge
+	}
+}

package/components/uv-badge/uv-badge.vue

@@ -0,0 +1,176 @@
+<template>
+	<text
+		v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
+		:class="[isDot ? 'uv-badge--dot' : 'uv-badge--not-dot', inverted && 'uv-badge--inverted', shape === 'horn' && 'uv-badge--horn', `uv-badge--${propsType}${inverted ? '--inverted' : ''}`]"
+		:style="[$uv.addStyle(customStyle), badgeStyle]"
+		class="uv-badge"
+	>{{ isDot ? '' :showValue }}</text>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * badge 徽标数
+	 * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+	 * @tutorial https://www.uvui.cn/components/badge.html
+	 * 
+	 * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
+	 * @property {String | Number} 	value 		显示的内容
+	 * @property {Boolean} 			show 		是否显示 （默认 true ）
+	 * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
+	 * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
+	 * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
+	 * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
+	 * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
+	 * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
+	 * @property {Array}} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+	 * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
+	 * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <uv-badge :type="type" :count="count"></uv-badge>
+	 */
+	export default {
+		name: 'uv-badge',
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			// 是否将badge中心与父组件右上角重合
+			boxStyle() {
+				let style = {};
+				return style;
+			},
+			// 整个组件的样式
+			badgeStyle() {
+				const style = {}
+				if(this.color) {
+					style.color = this.color
+				}
+				if (this.bgColor && !this.inverted) {
+					style.backgroundColor = this.bgColor
+				}
+				if (this.absolute) {
+					style.position = 'absolute'
+					// 如果有设置offset参数
+					if(this.offset.length) {
+						// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+						const top = this.offset[0]
+						const right = this.offset[1] || top
+						style.top = this.$uv.addUnit(top)
+						style.right = this.$uv.addUnit(right)
+					}
+				}
+				return style
+			},
+			showValue() {
+				switch (this.numberType) {
+					case "overflow":
+						return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
+						break;
+					case "ellipsis":
+						return Number(this.value) > Number(this.max) ? "..." : this.value
+						break;
+					case "limit":
+						return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
+							Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
+								1e3 * 100) / 100 + "k" : this.value
+						break;
+					default:
+						return Number(this.value)
+				}
+			},
+			propsType(){
+				return this.type || 'error'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-badge-primary: $uv-primary !default;
+	$uv-badge-error: $uv-error !default;
+	$uv-badge-success: $uv-success !default;
+	$uv-badge-info: $uv-info !default;
+	$uv-badge-warning: $uv-warning !default;
+	$uv-badge-dot-radius: 100px !default;
+	$uv-badge-dot-size: 8px !default;
+	$uv-badge-dot-right: 4px !default;
+	$uv-badge-dot-top: 0 !default;
+	$uv-badge-text-font-size: 11px !default;
+	$uv-badge-text-right: 10px !default;
+	$uv-badge-text-padding: 2px 5px !default;
+	$uv-badge-text-align: center !default;
+	$uv-badge-text-color: #FFFFFF !default;
+
+	.uv-badge {
+		border-top-right-radius: $uv-badge-dot-radius;
+		border-top-left-radius: $uv-badge-dot-radius;
+		border-bottom-left-radius: $uv-badge-dot-radius;
+		border-bottom-right-radius: $uv-badge-dot-radius;
+		@include flex;
+		line-height: $uv-badge-text-font-size;
+		text-align: $uv-badge-text-align;
+		font-size: $uv-badge-text-font-size;
+		color: $uv-badge-text-color;
+
+		&--dot {
+			height: $uv-badge-dot-size;
+			width: $uv-badge-dot-size;
+		}
+		
+		&--inverted {
+			font-size: 13px;
+		}
+		
+		&--not-dot {
+			padding: $uv-badge-text-padding;
+		}
+
+		&--horn {
+			border-bottom-left-radius: 0;
+		}
+
+		&--primary {
+			background-color: $uv-badge-primary;
+		}
+		
+		&--primary--inverted {
+			color: $uv-badge-primary;
+		}
+
+		&--error {
+			background-color: $uv-badge-error;
+		}
+		
+		&--error--inverted {
+			color: $uv-badge-error;
+		}
+
+		&--success {
+			background-color: $uv-badge-success;
+		}
+		
+		&--success--inverted {
+			color: $uv-badge-success;
+		}
+
+		&--info {
+			background-color: $uv-badge-info;
+		}
+		
+		&--info--inverted {
+			color: $uv-badge-info;
+		}
+
+		&--warning {
+			background-color: $uv-badge-warning;
+		}
+		
+		&--warning--inverted {
+			color: $uv-badge-warning;
+		}
+	}
+</style>

package/components/uv-button/nvue.scss

@@ -0,0 +1,46 @@
+$uv-button-active-opacity:0.75 !default;
+$uv-button-loading-text-margin-left:4px !default;
+$uv-button-text-color: #FFFFFF !default;
+$uv-button-text-plain-error-color:$uv-error !default;
+$uv-button-text-plain-warning-color:$uv-warning !default;
+$uv-button-text-plain-success-color:$uv-success !default;
+$uv-button-text-plain-info-color:$uv-info !default;
+$uv-button-text-plain-primary-color:$uv-primary !default;
+.uv-button {
+	&--active {
+		opacity: $uv-button-active-opacity;
+	}
+	
+	&--active--plain {
+		background-color: rgb(217, 217, 217);
+	}
+	
+	&__loading-text {
+		margin-left:$uv-button-loading-text-margin-left;
+	}
+	
+	&__text,
+	&__loading-text {
+		color:$uv-button-text-color;
+	}
+	
+	&__text--plain--error {
+		color:$uv-button-text-plain-error-color;
+	}
+	
+	&__text--plain--warning {
+		color:$uv-button-text-plain-warning-color;
+	}
+	
+	&__text--plain--success{
+		color:$uv-button-text-plain-success-color;
+	}
+	
+	&__text--plain--info {
+		color:$uv-button-text-plain-info-color;
+	}
+	
+	&__text--plain--primary {
+		color:$uv-button-text-plain-primary-color;
+	}
+}

package/components/uv-button/props.js

@@ -0,0 +1,163 @@
+export default {
+	props: {
+		// 是否细边框
+		hairline: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮的预置样式，info，primary，error，warning，success
+		type: {
+			type: String,
+			default: 'info'
+		},
+		// 按钮尺寸，large，normal，small，mini
+		size: {
+			type: String,
+			default: 'normal'
+		},
+		// 按钮形状，circle（两边为半圆），square（带圆角）
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 按钮是否镂空
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁止状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 加载中提示文字
+		loadingText: {
+			type: [String, Number],
+			default: ''
+		},
+		// 加载状态图标类型
+		loadingMode: {
+			type: String,
+			default: 'spinner'
+		},
+		// 加载图标大小
+		loadingSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 开放能力，具体请看uniapp稳定关于button组件部分说明
+		// https://uniapp.dcloud.io/component/button
+		openType: {
+			type: String,
+			default: ''
+		},
+		// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+		// 取值为submit（提交表单），reset（重置表单）
+		formType: {
+			type: String,
+			default: ''
+		},
+		// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+		// 只微信小程序、QQ小程序有效
+		appParameter: {
+			type: String,
+			default: ''
+		},
+		// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+		hoverStopPropagation: {
+			type: Boolean,
+			default: true
+		},
+		// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+		lang: {
+			type: String,
+			default: 'en'
+		},
+		// 会话来源，open-type="contact"时有效。只微信小程序有效
+		sessionFrom: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片标题，open-type="contact"时有效
+		// 默认当前标题，只微信小程序有效
+		sendMessageTitle: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+		// 默认当前分享路径，只微信小程序有效
+		sendMessagePath: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片图片，open-type="contact"时有效
+		// 默认当前页面截图，只微信小程序有效
+		sendMessageImg: {
+			type: String,
+			default: ''
+		},
+		// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+		// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+		showMessageCard: {
+			type: Boolean,
+			default: true
+		},
+		// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+		dataName: {
+			type: String,
+			default: ''
+		},
+		// 节流，一定时间内只能触发一次
+		throttleTime: {
+			type: [String, Number],
+			default: 0
+		},
+		// 按住后多久出现点击态，单位毫秒
+		hoverStartTime: {
+			type: [String, Number],
+			default: 0
+		},
+		// 手指松开后点击态保留时间，单位毫秒
+		hoverStayTime: {
+			type: [String, Number],
+			default: 200
+		},
+		// 按钮文字，之所以通过props传入，是因为slot传入的话
+		// nvue中无法控制文字的样式
+		text: {
+			type: [String, Number],
+			default: ''
+		},
+		// 按钮图标
+		icon: {
+			type: String,
+			default: ''
+		},
+		// 按钮图标大小
+		iconSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// 按钮图标颜色
+		iconColor: {
+			type: String,
+			default: '#000000'
+		},
+		// 按钮颜色，支持传入linear-gradient渐变色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 自定义按钮文本样式
+		customTextStyle: {
+			type: [Object,String],
+			default: ''
+		},
+		...uni.$uv?.props?.button
+	}
+}