Initial commit

uview-plus/components/u-toolbar/props.js

@@ -0,0 +1,41 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否展示工具条
+        show: {
+            type: Boolean,
+            default: () => defProps.toolbar.show
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: () => defProps.toolbar.cancelText
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: () => defProps.toolbar.confirmText
+        },
+        // 取消按钮的颜色
+        cancelColor: {
+            type: String,
+            default: () => defProps.toolbar.cancelColor
+        },
+        // 确认按钮的颜色
+        confirmColor: {
+            type: String,
+            default: () => defProps.toolbar.confirmColor
+        },
+        // 标题文字
+        title: {
+            type: String,
+            default: () => defProps.toolbar.title
+        },
+        // 开启右侧插槽
+        rightSlot: {
+            type: Boolean,
+            default: false
+        }
+    }
+})

uview-plus/components/u-toolbar/toolbar.js

@@ -0,0 +1,21 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:24:55
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/toolbar.js
+ */
+export default {
+    // toolbar 组件
+    toolbar: {
+        show: true,
+        cancelText: '取消',
+        confirmText: '确认',
+        cancelColor: '#909193',
+        confirmColor: '#3c9cff',
+        title: ''
+    }
+
+}

uview-plus/components/u-toolbar/u-toolbar.vue

@@ -0,0 +1,125 @@
+<template>
+	<view
+		class="u-toolbar"
+		@touchmove.stop.prevent="noop"
+		v-if="show"
+	>
+		<view
+			class="u-toolbar__left"
+		>
+			<view
+				class="u-toolbar__cancel__wrapper"
+				hover-class="u-hover-class"
+			>
+				<text
+					class="u-toolbar__wrapper__cancel"
+					@tap="cancel"
+					:style="{
+						color: cancelColor
+					}"
+				>{{ cancelText }}</text>
+			</view>
+		</view>
+		<text
+			class="u-toolbar__title u-line-1"
+			v-if="title"
+		>{{ title }}</text>
+		<view
+			class="u-toolbar__right"
+		>
+			<view
+				v-if="!rightSlot"
+				class="u-toolbar__confirm__wrapper"
+				hover-class="u-hover-class"
+			>
+				<text
+					class="u-toolbar__wrapper__confirm"
+					@tap="confirm"
+					:style="{
+					color: confirmColor
+				}"
+				>{{ confirmText }}</text>
+			</view>
+			<template v-else>
+				<slot name="right">
+				</slot>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * Toolbar 工具条
+	 * @description 
+	 * @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, mixin, props],
+		emits: ["confirm", "cancel"],
+		created() {
+			// console.log(this.$slots)
+		},
+		methods: {
+			// 点击取消按钮
+			cancel() {
+				this.$emit('cancel')
+			},
+			// 点击确定按钮
+			confirm() {
+				this.$emit('confirm')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.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 {
+			&__left,
+			&__right {
+				@include flex;
+			}
+			&__confirm {
+				color: $u-primary;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+	}
+</style>