@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-nav-bar/uni-nav-bar.vue

@@ -1,244 +0,0 @@
-<template>
-	<view class="uni-navbar">
-		<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }" class="uni-navbar__content">
-			<status-bar v-if="statusBar" />
-			<view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
-				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
-					<view class="uni-navbar__content_view" v-if="leftIcon.length">
-						<uni-icons :color="color" :type="leftIcon" size="24" />
-					</view>
-					<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length">
-						<text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
-					</view>
-					<slot name="left" />
-				</view>
-				<view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle">
-					<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
-						<text class="uni-nav-bar-text" :style="{color: color }">{{ title }}</text>
-					</view>
-					<!-- 标题插槽 -->
-					<slot />
-				</view>
-				<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
-					<view class="uni-navbar__content_view" v-if="rightIcon.length">
-						<uni-icons :color="color" :type="rightIcon" size="24" />
-					</view>
-					<!-- 优先显示图标 -->
-					<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
-						<text class="uni-nav-bar-right-text">{{ rightText }}</text>
-					</view>
-					<slot name="right" />
-				</view>
-			</view>
-		</view>
-		<view class="uni-navbar__placeholder" v-if="fixed">
-			<status-bar v-if="statusBar" />
-			<view class="uni-navbar__placeholder-view" />
-		</view>
-	</view>
-</template>
-
-<script>
-	import statusBar from "./uni-status-bar.vue";
-
-	/**
-	 * NavBar 自定义导航栏
-	 * @description 导航栏组件，主要用于头部导航
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
-	 * @property {String} title 标题文字
-	 * @property {String} leftText 左侧按钮文本
-	 * @property {String} rightText 右侧按钮文本
-	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
-	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
-	 * @property {String} color 图标和文字颜色
-	 * @property {String} backgroundColor 导航栏背景颜色
-	 * @property {Boolean} fixed = [true|false] 是否固定顶部
-	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
-	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
-	 * @event {Function} clickLeft 左侧按钮点击时触发
-	 * @event {Function} clickRight 右侧按钮点击时触发
-	 * @event {Function} clickTitle 中间标题点击时触发
-	 */
-	export default {
-		name: "UniNavBar",
-		components: {
-			statusBar
-		},
-		emits: ['clickLeft', 'clickRight', 'clickTitle'],
-		props: {
-			title: {
-				type: String,
-				default: ""
-			},
-			leftText: {
-				type: String,
-				default: ""
-			},
-			rightText: {
-				type: String,
-				default: ""
-			},
-			leftIcon: {
-				type: String,
-				default: ""
-			},
-			rightIcon: {
-				type: String,
-				default: ""
-			},
-			fixed: {
-				type: [Boolean, String],
-				default: false
-			},
-			color: {
-				type: String,
-				default: "#000000"
-			},
-			backgroundColor: {
-				type: String,
-				default: "#FFFFFF"
-			},
-			statusBar: {
-				type: [Boolean, String],
-				default: false
-			},
-			shadow: {
-				type: [Boolean, String],
-				default: false
-			},
-			border: {
-				type: [Boolean, String],
-				default: true
-			}
-		},
-		mounted() {
-			if (uni.report && this.title !== '') {
-				uni.report('title', this.title)
-			}
-		},
-		methods: {
-			onClickLeft() {
-				this.$emit("clickLeft");
-			},
-			onClickRight() {
-				this.$emit("clickRight");
-			},
-			onClickTitle() {
-				this.$emit("clickTitle");
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	.uni-nav-bar-text {
-		/* #ifdef APP-PLUS */
-		font-size: 34rpx;
-		/* #endif */
-		/* #ifndef APP-PLUS */
-		font-size: 16px;
-		/* #endif */
-	}
-
-	.uni-nav-bar-right-text {
-		font-size: 14px;
-	}
-
-	.uni-navbar__content {
-		position: relative;
-		background-color: #ffffff;
-		overflow: hidden;
-	}
-
-	.uni-navbar__content_view {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		flex-direction: row;
-	}
-
-	.uni-navbar__header {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		height: 44px;
-		line-height: 44px;
-		font-size: 16px;
-	}
-
-	.uni-navbar__header-btns {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-wrap: nowrap;
-		width: 120rpx;
-		padding: 0 6px;
-		justify-content: center;
-		align-items: center;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-navbar__header-btns-left {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		width: 150rpx;
-		justify-content: flex-start;
-	}
-
-	.uni-navbar__header-btns-right {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		width: 150rpx;
-		padding-right: 30rpx;
-		justify-content: flex-end;
-	}
-
-	.uni-navbar__header-container {
-		flex: 1;
-	}
-
-	.uni-navbar__header-container-inner {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		align-items: center;
-		justify-content: center;
-		font-size: 14px;
-	}
-
-	.uni-navbar__placeholder-view {
-		height: 44px;
-	}
-
-	.uni-navbar--fixed {
-		position: fixed;
-		z-index: 998;
-		/* #ifdef H5 */
-		left: var(--window-left);
-		right: var(--window-right);
-		/* #endif */
-		/* #ifndef H5 */
-		left: 0;
-		right: 0;
-		/* #endif */
-	}
-
-	.uni-navbar--shadow {
-		/* #ifndef APP-NVUE */
-		box-shadow: 0 1px 6px #ccc;
-		/* #endif */
-	}
-
-	.uni-navbar--border {
-		border-bottom-width: 1rpx;
-		border-bottom-style: solid;
-		border-bottom-color: #e5e5e5;
-	}
-</style>

package/ui-cv/cv-notice-bar/uni-notice-bar.vue

@@ -1,394 +0,0 @@
-<template>
-	<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
-		<!-- #ifdef MP-ALIPAY -->
-		<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" @click="close">
-			<uni-icons type="closeempty" :color="color" size="12" />
-		</view>
-		<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
-			<uni-icons type="sound" :color="color" size="14" />
-		</view>
-		<!-- #endif -->
-		<!-- #ifndef MP-ALIPAY -->
-		<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" type="closeempty" :color="color" size="12" @click="close" />
-		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color" size="14" />
-		<!-- #endif -->
-		<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
-			<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
-				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}" :style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
-			</view>
-		</view>
-		<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point" @click="clickMore">
-			<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
-			<uni-icons type="arrowright" :color="moreColor" size="14" />
-		</view>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const dom = weex.requireModule('dom');
-	const animation = weex.requireModule('animation');
-	// #endif
-
-	/**
-	 * NoticeBar 自定义导航栏
-	 * @description 通告栏组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
-	 * @property {Number} speed 文字滚动的速度，默认100px/秒
-	 * @property {String} text 显示文字
-	 * @property {String} backgroundColor 背景颜色
-	 * @property {String} color 文字颜色
-	 * @property {String} moreColor 查看更多文字的颜色
-	 * @property {String} moreText 设置“查看更多”的文本
-	 * @property {Boolean} single = [true|false] 是否单行
-	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
-	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
-	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
-	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
-	 * @event {Function} click 点击 NoticeBar 触发事件
-	 * @event {Function} close 关闭 NoticeBar 触发事件
-	 * @event {Function} getmore 点击”查看更多“时触发事件
-	 */
-
-	export default {
-		name: 'UniNoticeBar',
-		emits: ['click', 'getmore', 'close'],
-		props: {
-			text: {
-				type: String,
-				default: ''
-			},
-			moreText: {
-				type: String,
-				default: ''
-			},
-			backgroundColor: {
-				type: String,
-				default: '#fffbe8'
-			},
-			speed: {
-				// 默认1s滚动100px
-				type: Number,
-				default: 100
-			},
-			color: {
-				type: String,
-				default: '#de8c17'
-			},
-			moreColor: {
-				type: String,
-				default: '#999999'
-			},
-			single: {
-				// 是否单行
-				type: [Boolean, String],
-				default: false
-			},
-			scrollable: {
-				// 是否滚动，添加后控制单行效果取消
-				type: [Boolean, String],
-				default: false
-			},
-			showIcon: {
-				// 是否显示左侧icon
-				type: [Boolean, String],
-				default: false
-			},
-			showGetMore: {
-				// 是否显示右侧查看更多
-				type: [Boolean, String],
-				default: false
-			},
-			showClose: {
-				// 是否显示左侧关闭按钮
-				type: [Boolean, String],
-				default: false
-			}
-		},
-		data() {
-			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
-			const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
-			return {
-				textWidth: 0,
-				boxWidth: 0,
-				wrapWidth: '',
-				webviewHide: false,
-				// #ifdef APP-NVUE
-				stopAnimation: false,
-				// #endif
-				elId: elId,
-				elIdBox: elIdBox,
-				show: true,
-				animationDuration: 'none',
-				animationPlayState: 'paused',
-				animationDelay: '0s'
-			}
-		},
-		mounted() {
-			// #ifdef APP-PLUS
-			var pages = getCurrentPages();
-			var page = pages[pages.length - 1];
-			var currentWebview = page.$getAppWebview();
-			currentWebview.addEventListener('hide', () => {
-				this.webviewHide = true
-			})
-			currentWebview.addEventListener('show', () => {
-				this.webviewHide = false
-			})
-			// #endif
-			this.$nextTick(() => {
-				this.initSize()
-			})
-		},
-		// #ifdef APP-NVUE
-		beforeDestroy() {
-			this.stopAnimation = true
-		},
-		// #endif
-		methods: {
-			initSize() {
-				if (this.scrollable) {
-					// #ifndef APP-NVUE
-					let query = [],
-						boxWidth = 0,
-						textWidth = 0;
-					let textQuery = new Promise((resolve, reject) => {
-						uni.createSelectorQuery()
-							// #ifndef MP-ALIPAY
-							.in(this)
-							// #endif
-							.select(`#${this.elId}`)
-							.boundingClientRect()
-							.exec(ret => {
-								this.textWidth = ret[0].width
-								resolve()
-							})
-					})
-					let boxQuery = new Promise((resolve, reject) => {
-						uni.createSelectorQuery()
-							// #ifndef MP-ALIPAY
-							.in(this)
-							// #endif
-							.select(`#${this.elIdBox}`)
-							.boundingClientRect()
-							.exec(ret => {
-								this.boxWidth = ret[0].width
-								resolve()
-							})
-					})
-					query.push(textQuery)
-					query.push(boxQuery)
-					Promise.all(query).then(() => {
-						this.animationDuration = `${this.textWidth / this.speed}s`
-						this.animationDelay = `-${this.boxWidth / this.speed}s`
-						setTimeout(() => {
-							this.animationPlayState = 'running'
-						}, 1000)
-					})
-					// #endif
-					// #ifdef APP-NVUE
-					dom.getComponentRect(this.$refs['animationEle'], (res) => {
-						let winWidth = uni.getSystemInfoSync().windowWidth
-						this.textWidth = res.size.width
-						animation.transition(this.$refs['animationEle'], {
-							styles: {
-								transform: `translateX(-${winWidth}px)`
-							},
-							duration: 0,
-							timingFunction: 'linear',
-							delay: 0
-						}, () => {
-							if (!this.stopAnimation) {
-								animation.transition(this.$refs['animationEle'], {
-									styles: {
-										transform: `translateX(-${this.textWidth}px)`
-									},
-									timingFunction: 'linear',
-									duration: (this.textWidth - winWidth) / this.speed * 1000,
-									delay: 1000
-								}, () => {
-									if (!this.stopAnimation) {
-										this.loopAnimation()
-									}
-								});
-							}
-						});
-					})
-					// #endif
-				}
-				// #ifdef APP-NVUE
-				if (!this.scrollable && (this.single || this.moreText)) {
-					dom.getComponentRect(this.$refs['textBox'], (res) => {
-						this.wrapWidth = res.size.width
-					})
-				}
-				// #endif
-			},
-			loopAnimation() {
-				// #ifdef APP-NVUE
-				animation.transition(this.$refs['animationEle'], {
-					styles: {
-						transform: `translateX(0px)`
-					},
-					duration: 0
-				}, () => {
-					if (!this.stopAnimation) {
-						animation.transition(this.$refs['animationEle'], {
-							styles: {
-								transform: `translateX(-${this.textWidth}px)`
-							},
-							duration: this.textWidth / this.speed * 1000,
-							timingFunction: 'linear',
-							delay: 0
-						}, () => {
-							if (!this.stopAnimation) {
-								this.loopAnimation()
-							}
-						});
-					}
-				});
-				// #endif
-			},
-			clickMore() {
-				this.$emit('getmore')
-			},
-			close() {
-				this.show = false;
-				this.$emit('close')
-			},
-			onClick() {
-				this.$emit('click')
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-noticebar {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		padding: 6px 12px;
-		margin-bottom: 10px;
-	}
-
-	.uni-cursor-point {
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-noticebar-close {
-		margin-right: 5px;
-	}
-
-	.uni-noticebar-icon {
-		margin-right: 5px;
-	}
-
-	.uni-noticebar__content-wrapper {
-		flex: 1;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	.uni-noticebar__content-wrapper--single {
-		/* #ifndef APP-NVUE */
-		line-height: 18px;
-		/* #endif */
-	}
-
-	.uni-noticebar__content-wrapper--single,
-	.uni-noticebar__content-wrapper--scrollable {
-		flex-direction: row;
-	}
-
-	/* #ifndef APP-NVUE */
-	.uni-noticebar__content-wrapper--scrollable {
-		position: relative;
-		height: 18px;
-	}
-
-	/* #endif */
-	.uni-noticebar__content--scrollable {
-		/* #ifdef APP-NVUE */
-		flex: 0;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		flex: 1;
-		display: block;
-		overflow: hidden;
-		/* #endif */
-	}
-
-	.uni-noticebar__content--single {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		flex: none;
-		width: 100%;
-		justify-content: center;
-		/* #endif */
-	}
-
-	.uni-noticebar__content-text {
-		font-size: 14px;
-		line-height: 18px;
-		/* #ifndef APP-NVUE */
-		word-break: break-all;
-		/* #endif */
-	}
-
-	.uni-noticebar__content-text--single {
-		/* #ifdef APP-NVUE */
-		lines: 1;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		display: block;
-		width: 100%;
-		white-space: nowrap;
-		/* #endif */
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.uni-noticebar__content-text--scrollable {
-		/* #ifdef APP-NVUE */
-		lines: 1;
-		padding-left: 750rpx;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		position: absolute;
-		display: block;
-		height: 18px;
-		line-height: 18px;
-		white-space: nowrap;
-		padding-left: 100%;
-		animation: notice 10s 0s linear infinite both;
-		animation-play-state: paused;
-		/* #endif */
-	}
-
-	.uni-noticebar__more {
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		/* #endif */
-		flex-direction: row;
-		flex-wrap: nowrap;
-		align-items: center;
-		padding-left: 5px;
-	}
-
-	.uni-noticebar__more-text {
-		font-size: 14px;
-	}
-
-	@keyframes notice {
-		100% {
-			transform: translate3d(-100%, 0, 0);
-		}
-	}
-</style>