create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-modal/u-modal.vue

@@ -0,0 +1,265 @@
+<template>
+	<u-popup
+		mode="center"
+		:zoom="zoom"
+		:show="show"
+		:class="[customClass]"
+		:customStyle="{
+			borderRadius: '6px', 
+			overflow: 'hidden',
+			marginTop: `-${addUnit(negativeTop)}`
+		}"
+		:closeOnClickOverlay="closeOnClickOverlay"
+		:safeAreaInsetBottom="false"
+		:duration="duration"
+		@click="clickHandler"
+	>
+		<view
+			class="u-modal"
+			:style="{
+				width: addUnit(width),
+			}"
+		>
+			<view
+				class="u-modal__title"
+				v-if="title"
+			>{{ title }}</view>
+			<view
+				class="u-modal__content"
+				:style="contentStyleCpu"
+			>
+				<slot>
+					<text class="u-modal__content__text" :style="{textAlign: contentTextAlign}">
+						{{ content }}
+					</text>
+				</slot>
+			</view>
+			<view
+				class="u-modal__button-group--confirm-button"
+				v-if="$slots.confirmButton"
+			>
+				<slot name="confirmButton"></slot>
+			</view>
+			<template v-else>
+				<u-line></u-line>
+				<view
+					class="u-modal__button-group"
+					:style="{
+						flexDirection: buttonReverse ? 'row-reverse' : 'row'
+					}"
+				>
+					<view
+						class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
+						:hover-stay-time="150"
+						hover-class="u-modal__button-group__wrapper--hover"
+						:class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
+						v-if="showCancelButton"
+						@tap="cancelHandler"
+					>
+						<text
+							class="u-modal__button-group__wrapper__text"
+							:style="{
+								color: cancelColor
+							}"
+						>{{ cancelText }}</text>
+					</view>
+					<u-line
+						direction="column"
+						v-if="showConfirmButton && showCancelButton"
+					></u-line>
+					<view
+						class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
+						:hover-stay-time="150"
+						hover-class="u-modal__button-group__wrapper--hover"
+						:class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
+						v-if="showConfirmButton"
+						@tap="confirmHandler"
+					>
+						<u-loading-icon v-if="loading"></u-loading-icon>
+						<text
+							v-else
+							class="u-modal__button-group__wrapper__text"
+							:style="{
+								color: confirmColor
+							}"
+						>{{ confirmText }}</text>
+					</view>
+				</view>
+			</template>
+		</view>
+		<template #bottom>
+			<slot name="popupBottom"></slot>
+		</template>
+	</u-popup>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit } from '../../libs/function/index';
+	/**
+	 * Modal 模态框
+	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+	 * @tutorial https://ijry.github.io/uview-plus/components/modul.html
+	 * @property {Boolean}			show				是否显示模态框，请赋值给show （默认 false ）
+	 * @property {String}			title				标题内容
+	 * @property {String}			content				模态框内容，如传入slot内容，则此参数无效
+	 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
+	 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
+	 * @property {Boolean}			showConfirmButton	是否显示确认按钮 （默认 true ）
+	 * @property {Boolean}			showCancelButton	是否显示取消按钮 （默认 false ）
+	 * @property {String}			confirmColor		确认按钮的颜色 （默认 '#2979ff' ）
+	 * @property {String}			cancelColor			取消按钮的颜色 （默认 '#606266' ）
+	 * @property {Boolean}			buttonReverse		对调确认和取消的位置 （默认 false ）
+	 * @property {Boolean}			zoom				是否开启缩放模式 （默认 true ）
+	 * @property {Boolean}			asyncClose			是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭Modal （默认 false ）
+	 * @property {String | Number}	negativeTop			往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
+	 * @property {String | Number}	width				modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
+	 * @property {String}			confirmButtonShape	确认按钮的样式,如设置，将不会显示取消按钮
+	 * @property {Number}			duration			弹窗动画过度时间 （默认 400 ）
+	 * @event {Function} confirm	点击确认按钮时触发
+	 * @event {Function} cancel		点击取消按钮时触发
+	 * @event {Function} close		点击遮罩关闭出发，closeOnClickOverlay为true有效
+	 * @example <u-modal :show="show" />
+	 */
+	export default {
+		name: 'u-modal',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				loading: false
+			}
+		},
+		watch: {
+			show(n) {
+				// 为了避免第一次打开modal，又使用了异步关闭的loading
+				// 第二次打开modal时，loading依然存在的情况
+				if (n && this.loading) this.loading = false
+			}
+		},
+		emits: ["confirm", "cancel", "close", "update:show", 'cancelOnAsync'],
+		computed: {
+			contentStyleCpu() {
+				let style = this.contentStyle;
+				style.paddingTop = `${this.title ? 12 : 25}px`
+				return style;
+			}
+		},
+		methods: {
+			addUnit,
+			// 点击确定按钮
+			confirmHandler() {
+				// 如果配置了异步关闭，将按钮值为loading状态
+				if (this.asyncClose) {
+					this.loading = true;
+				} else {
+					this.$emit('update:show', false)
+				}
+				this.$emit('confirm')
+			},
+			// 点击取消按钮
+			cancelHandler() {
+				// 如果点击了确定按钮，确定按钮正在请求接口执行异步操作，那么限制不能取消。
+				if (this.asyncClose && this.loading) {
+					if (this.asyncCloseTip) {
+						uni.showToast({
+							title: this.asyncCloseTip,
+							icon: 'none'
+						});
+					}
+					this.$emit('cancelOnAsync')
+				} else {
+					// 如果配置了取消时异步关闭
+					if (!this.asyncCancelClose) {
+						this.$emit('update:show', false)
+					}
+				}
+				this.$emit('cancel')
+			},
+			// 点击遮罩
+			// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
+			// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
+			// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
+			// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
+			clickHandler() {
+				if (this.closeOnClickOverlay) {
+					this.$emit('update:show', false)
+					this.$emit('close')
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$u-modal-border-radius: 6px;
+
+	.u-modal {
+		width: 650rpx;
+		border-radius: $u-modal-border-radius;
+		overflow: hidden;
+
+		&__title {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			font-size: 16px;
+			font-weight: bold;
+			color: $u-content-color;
+			text-align: center;
+			padding-top: 25px;
+		}
+
+		&__content {
+			padding: 12px 25px 25px 25px;
+			@include flex;
+			justify-content: center;
+
+			&__text {
+				font-size: 15px;
+				color: $u-content-color;
+				flex: 1;
+			}
+		}
+
+		&__button-group {
+			@include flex;
+
+			&--confirm-button {
+				flex-direction: column;
+				padding: 0px 25px 15px 25px;
+			}
+
+			&__wrapper {
+				flex: 1;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				height: 48px;
+				
+				&--confirm,
+				&--only-cancel {
+					border-bottom-right-radius: $u-modal-border-radius;
+				}
+				
+				&--cancel,
+				&--only-confirm {
+					border-bottom-left-radius: $u-modal-border-radius;
+				}
+
+				&--hover {
+					background-color: $u-bg-color;
+				}
+
+				&__text {
+					color: $u-content-color;
+					font-size: 16px;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-navbar/navbar.js

@@ -0,0 +1,33 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:16:18
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/navbar.js
+ */
+import color from '../../libs/config/color'
+export default {
+    // navbar 组件
+    navbar: {
+        safeAreaInsetTop: true,
+        placeholder: false,
+        fixed: true,
+        border: false,
+        leftIcon: 'arrow-left',
+        leftText: '',
+        rightText: '',
+        rightIcon: '',
+        title: '',
+        titleColor: '',
+        bgColor: '#ffffff',
+        titleWidth: '400rpx',
+        height: '44px',
+		leftIconSize: 20,
+		leftIconColor: color.mainColor,
+		autoBack: false,
+		titleStyle: ''
+    }
+
+}

package/template/src/uni_modules/uview-plus/components/u-navbar/props.js

@@ -0,0 +1,97 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+	props: {
+		// 是否开启顶部安全区适配
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: () => defProps.navbar.safeAreaInsetTop
+		},
+		// 固定在顶部时，是否生成一个等高元素，以防止塌陷
+		placeholder: {
+			type: Boolean,
+			default: () => defProps.navbar.placeholder
+		},
+		// 是否固定在顶部
+		fixed: {
+			type: Boolean,
+			default: () => defProps.navbar.fixed
+		},
+		// 是否显示下边框
+		border: {
+			type: Boolean,
+			default: () => defProps.navbar.border
+		},
+		// 左边的图标
+		leftIcon: {
+			type: String,
+			default: () => defProps.navbar.leftIcon
+		},
+		// 左边的提示文字
+		leftText: {
+			type: String,
+			default: () => defProps.navbar.leftText
+		},
+		// 左右的提示文字
+		rightText: {
+			type: String,
+			default: () => defProps.navbar.rightText
+		},
+		// 右边的图标
+		rightIcon: {
+			type: String,
+			default: () => defProps.navbar.rightIcon
+		},
+		// 标题
+		title: {
+			type: [String, Number],
+			default: () => defProps.navbar.title
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: () => defProps.navbar.titleColor
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: () => defProps.navbar.bgColor
+		},
+        // 状态栏背景颜色 不写会使用背景颜色bgColor
+        statusBarBgColor: {
+            type: String,
+            default: () => ''
+        },
+		// 标题的宽度
+		titleWidth: {
+			type: [String, Number],
+			default: () => defProps.navbar.titleWidth
+		},
+		// 导航栏高度
+		height: {
+			type: [String, Number],
+			default: () => defProps.navbar.height
+		},
+		// 左侧返回图标的大小
+		leftIconSize: {
+			type: [String, Number],
+			default: () => defProps.navbar.leftIconSize
+		},
+		// 左侧返回图标的颜色
+		leftIconColor: {
+			type: String,
+			default: () => defProps.navbar.leftIconColor
+		},
+		// 点击左侧区域(返回图标)，是否自动返回上一页
+		autoBack: {
+			type: Boolean,
+			default: () => defProps.navbar.autoBack
+		},
+		// 标题的样式，对象或字符串
+		titleStyle: {
+			type: [String, Object],
+			default: () => defProps.navbar.titleStyle
+		}
+	}
+})

package/template/src/uni_modules/uview-plus/components/u-navbar/u-navbar.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="u-navbar" :class="[customClass]">
+		<view
+			class="u-navbar__placeholder"
+			v-if="fixed && placeholder"
+			:style="{
+				height: addUnit(getPx(height) + getWindowInfo().statusBarHeight,'px'),
+			}"
+		></view>
+		<view :class="[fixed && 'u-navbar--fixed']">
+			<u-status-bar
+				v-if="safeAreaInsetTop"
+				:bgColor="statusBarBgColor ? statusBarBgColor : bgColor"
+			></u-status-bar>
+			<view
+				class="u-navbar__content"
+				:class="[border && 'u-border-bottom']"
+				:style="{
+					height: addUnit(height),
+					backgroundColor: bgColor,
+				}"
+			>
+				<view
+					class="u-navbar__content__left"
+					hover-class="u-navbar__content__left--hover"
+					hover-start-time="150"
+					@tap="leftClick"
+				>
+					<slot name="left">
+						<u-icon
+							v-if="leftIcon"
+							:name="leftIcon"
+							:size="leftIconSize"
+							:color="leftIconColor"
+						></u-icon>
+						<text
+							v-if="leftText"
+							:style="{
+								color: leftIconColor
+							}"
+							class="u-navbar__content__left__text"
+						>{{ leftText }}</text>
+					</slot>
+				</view>
+				<slot name="center">
+					<text
+						class="u-line-1 u-navbar__content__title"
+						:style="[{
+							width: addUnit(titleWidth),
+							color: titleColor,
+						}, addStyle(titleStyle)]"
+					>{{ title }}</text>
+				</slot>
+				<view
+					class="u-navbar__content__right"
+					v-if="$slots.right || rightIcon || rightText"
+					@tap="rightClick"
+				>
+					<slot name="right">
+						<u-icon
+							v-if="rightIcon"
+							:name="rightIcon"
+							size="20"
+						></u-icon>
+						<text
+							v-if="rightText"
+							class="u-navbar__content__right__text"
+						>{{ rightText }}</text>
+					</slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import config  from '../../libs/config/config';
+	import { addUnit, addStyle, getPx, getWindowInfo } from '../../libs/function/index';
+	/**
+	 * Navbar 自定义导航栏
+	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
+	 * @tutorial https://ijry.github.io/uview-plus/components/navbar.html
+	 * @property {Boolean}			safeAreaInsetTop	是否开启顶部安全区适配  （默认 true ）
+	 * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
+	 * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
+	 * @property {Boolean}			border				导航栏底部是否显示下边框 （默认 false ）
+	 * @property {String}			leftIcon			左边返回图标的名称，只能为uview-pls自带的图标 （默认 'arrow-left' ）
+	 * @property {String}			leftText			左边的提示文字
+	 * @property {String}			rightText			右边的提示文字
+	 * @property {String}			rightIcon			右边返回图标的名称，只能为uview-plus自带的图标
+	 * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
+	 * @property {String}			titleColor			文字颜色 （默认 '' ）
+	 * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
+	 * @property {String}			statusBarBgColor	状态栏背景颜色 不写同导航栏背景设置
+	 * @property {String | Number}	titleWidth			导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
+	 * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
+	 * @property {String | Number}	leftIconSize		左侧返回图标的大小（默认 20px ）
+	 * @property {String | Number}	leftIconColor		左侧返回图标的颜色（默认 #303133 ）
+	 * @property {Boolean}	        autoBack			点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
+	 * @property {Object | String}	titleStyle			标题的样式，对象或字符串
+	 * @event {Function} leftClick		点击左侧区域
+	 * @event {Function} rightClick		点击右侧区域
+	 * @example <u-navbar title="剑未配妥，出门已是江湖" left-text="返回" right-text="帮助" @click-left="onClickBack" @click-right="onClickRight"></u-navbar>
+	 */
+	export default {
+		name: 'u-navbar',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+			}
+		},
+		emits: ["leftClick", "rightClick"],
+		methods: {
+			addStyle,
+			addUnit,
+			getWindowInfo,
+			getPx,
+			// 点击左侧区域
+			leftClick() {
+				// 如果配置了autoBack，自动返回上一页
+				this.$emit('leftClick')
+				if (config.interceptor.navbarLeftClick != null) {
+					config.interceptor.navbarLeftClick()
+				} else {
+					if(this.autoBack) {
+						uni.navigateBack()
+					}
+				}
+			},
+			// 点击右侧区域
+			rightClick() {
+				this.$emit('rightClick')
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-navbar {
+
+		&--fixed {
+			position: fixed;
+			left: 0;
+			right: 0;
+			top: 0;
+			z-index: 11;
+		}
+
+		&__content {
+			@include flex(row);
+			align-items: center;
+			height: 44px;
+			background-color: #9acafc;
+			position: relative;
+			justify-content: center;
+
+			&__left,
+			&__right {
+				padding: 0 13px;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				@include flex(row);
+				align-items: center;
+			}
+
+			&__left {
+				left: 0;
+
+				&--hover {
+					opacity: 0.7;
+				}
+
+				&__text {
+					font-size: 15px;
+					margin-left: 3px;
+				}
+			}
+
+			&__title {
+				text-align: center;
+				font-size: 16px;
+				color: $u-main-color;
+			}
+
+			&__right {
+				right: 0;
+
+				&__text {
+					font-size: 15px;
+					margin-left: 3px;
+				}
+			}
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-navbar-mini/props.js

@@ -0,0 +1,51 @@
+import { defineMixin } from '../../libs/vue'
+
+export const props = defineMixin({
+	props: {
+		// 是否开启顶部安全区适配
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: () => true
+		},
+		// 是否固定在顶部
+		fixed: {
+			type: Boolean,
+			default: () => true
+		},
+		// 左边的图标
+		leftIcon: {
+			type: String,
+			default: 'arrow-leftward'
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: () => 'rgba(0,0,0,.15)'
+		},
+		// 导航栏高度
+		height: {
+			type: [String, Number],
+			default: () => '32px'
+		},
+		// 图标的大小
+		iconSize: {
+			type: [String, Number],
+			default: '20px'
+		},
+		// 图标的颜色
+		iconColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 点击左侧区域(返回图标)，是否自动返回上一页
+		autoBack: {
+			type: Boolean,
+			default: () => true
+		},
+		// 首页路径
+		homeUrl: {
+			type: [String],
+			default: ''
+		}
+	}
+})