digitalMen/node_modules/uview-ui/components/u-toolbar/u-toolbar.vue

<template>
	<view class="u-toolbar" @touchmove.stop.prevent="noop" v-if="show">
		<view class="u-toolbar__cancel__wrapper" hover-class="u-hover-class">
			<text v-if="!showIcon" class="u-toolbar__wrapper__cancel" @tap="cancel" :style="{
					color: cancelColor
				}">{{ cancelText }}</text>

			<image class="closeBtn" v-else src="/static/images/closeBtn.png" mode="" @tap="cancel"></image>
		</view>
		<text class="u-toolbar__title u-line-1" v-if="title">{{ title }}</text>
		<view class="u-toolbar__confirm__wrapper" hover-class="u-hover-class">
			<text v-if="!showIcon" class="u-toolbar__wrapper__confirm" @tap="confirm" :style="{
				color: confirmColor
			}">{{ confirmText }}</text>

			<image class="confirmBtn" v-else src="/static/images/selected.png" mode="" @tap="confirm"></image>
		</view>
	</view>
</template>

<script>
	import props from './props.js';
	/**
	 * Toolbar 工具条
	 * @description 
	 * @tutorial https://www.uviewui.com/components/toolbar.html
	 * @property {Boolean}	show			是否展示工具条（默认 true ）
	 * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
	 * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
	 * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
	 * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
	 * @property {String}	title			标题文字
	 * @event {Function} 
	 * @example 
	 */
	export default {
		name: 'u-toolbar',
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		methods: {
			// 点击取消按钮
			cancel() {
				this.$emit('cancel')
			},
			// 点击确定按钮
			confirm() {
				this.$emit('confirm')
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";

	.closeBtn {
		width: 30rpx;
		height: 30rpx;
		margin-left: 15px;
		margin-right: 15px;
	}

	.confirmBtn {
		width: 38rpx;
		height: 30rpx;
		margin-left: 15px;
		margin-right: 15px;
	}

	.u-toolbar {
		height: 42px;
		@include flex;
		justify-content: space-between;
		align-items: center;

		&__wrapper {
			&__cancel {
				color: $u-tips-color;
				font-size: 15px;
				padding: 0 15px;
			}
		}

		&__title {
			color: $u-main-color;
			padding: 0 60rpx;
			font-size: 16px;
			flex: 1;
			text-align: center;
		}

		&__wrapper {
			&__confirm {
				color: $u-primary;
				font-size: 15px;
				padding: 0 15px;
			}
		}
	}
</style>