guo 2 years ago
parent
commit
f1a89facd6

+ 1 - 1
pages.json

@@ -200,7 +200,7 @@
 			"path": "pages/user/addCar/cailist",
 			"style": {
 				"navigationBarTitleText": "我的车库",
-				"navigationBarBackgroundColor": "#FFFFFF"
+				"enablePullDownRefresh": false
 			}
 		}
 		

+ 43 - 34
pages/user/addCar/addCar.vue

@@ -10,30 +10,41 @@
 					@tap="plateShow=true" v-model.trim="plateNo" />
 				<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow=false" />
 
-
-			</view>
+			
+			</view>
+			<view class="line"></view>
+			
+			<view class="mesView">
+				<view class="leftTitle">VIN</view>
+				<input class="vinInput selectColor" type="text" v-model="vin" placeholder="请输入"
+					placeholder-style="color:#999999" />
+				<view class="kmStr"></view>
+			</view>
+			<view class="line"></view>
 
 			<view class="mesView" @click="goCarModel()">
 				<view class="leftTitle">车型</view>
 				<view class="carModBtn noSelectColor" v-if="!carModelInfo.value">请选择车型</view>
 				<view class="carModBtn selectColor carMod" v-else>{{carModelInfo.value}}</view>
-				<image src="../../static/img/rightArrow.png" class="rightArrow"></image>
-			</view>
-
+				<image src="../../../static/img/rightArrow.png" class="rightArrow"></image>
+			</view>
+			<view class="line"></view>
+			
+			<view class="mesView">
+				<view class="leftTitle">行驶里程</view>
+				<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
+					placeholder-style="color:#999999" />
+				<view class="kmStr">km</view>
+			</view>
+			<view class="line"></view>
+			
 			<view class="mesView">
-				<view class="leftTitle">购车时间</view>
+				<view class="leftTitle">注册登记时间</view>
 				<picker class="timeBtn" @change="bindChange" mode="date" :end="currentdate" :value="time">
 					<view class="uni-input selectColor" v-if="time">{{time}}</view>
-					<view class="uni-input noSelectColor" v-else>请选择您的购车时间</view>
+					<view class="uni-input noSelectColor" v-else>请选择</view>
 				</picker>
-				<image src="../../static/img/rightArrow.png" class="rightArrow"></image>
-			</view>
-
-			<view class="mesView">
-				<view class="leftTitle">行驶里程</view>
-				<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
-					placeholder-style="color:#999999" />
-				<view class="kmStr">km</view>
+				<image src="../../../static/img/rightArrow.png" class="rightArrow"></image>
 			</view>
 
 
@@ -41,28 +52,18 @@
 
 
 		<view class="bottomView">
-			<view class="saveCar" @click="saveCar()">
-				<image src="../../static/img/icon_tianjiacheliang.png" mode=""
-					style="width: 44rpx; height: 36rpx; margin-right: 10rpx;"></image>
-				<view>保存爱车</view>
-			</view>
-		</view>
-		<view>
-			<w-picker :visible.sync="visible" mode="selector" value="2" default-type="value"
-				:default-props="defaultProps" :options="sbPlate" @confirm="onConfirm($event,'selector')"
-				@cancel="onCancel" ref="selector"></w-picker>
+			<view class="saveCar" @click="saveCar()">保存</view>
 		</view>
+		
 
 	</view>
 </template>
 
 <script>
 	import plateInput from "@/components/uni-plate-input/uni-plate-input.vue"
-	import wPicker from "@/components/w-picker/w-picker.vue";
 	export default {
 		components: {
-			plateInput,
-			wPicker
+			plateInput
 		},
 
 		data() {
@@ -270,7 +271,7 @@
 			},
 
 			addTMemberCar() {
-				this.$http('worldKeepCar/worldHome/addTMemberCar', {
+				this.$http('opencarInfoOwner/addCarOwner', {
 					plateNumber: this.plateNo,
 					milage: this.mileage,
 					brand: this.carModelInfo.carModelInfo.brand,
@@ -387,7 +388,7 @@
 
 	.leftTitle {
 		margin: 28rpx;
-		width: 120rpx;
+		width: 180rpx;
 		font-size: 28rpx;
 		color: #666666;
 	}
@@ -444,6 +445,10 @@
 	.mileageInput {
 		width: 20%;
 		font-size: 28rpx;
+	}
+	.vinInput{
+		width: 60%;
+		font-size: 28rpx;
 	}
 
 	.kmStr {
@@ -464,7 +469,7 @@
 
 	.saveCar {
 
-		background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
+		background-color: #D53533;
 		margin: 23rpx 30rpx;
 		height: 74rpx;
 
@@ -473,8 +478,12 @@
 		font-size: 30rpx;
 		font-weight: bold;
 
-		align-items: center;
-		display: flex;
-		justify-content: center;
+		text-align: center;
+		line-height: 74rpx;
+	}
+	.line{
+		margin: 1rpx 28rpx;
+		background-color: #EEEEEE;
+		height: 1rpx;
 	}
 </style>

+ 21 - 16
pages/user/addCar/cailist.vue

@@ -24,7 +24,7 @@
 			</view>
 		</view>
 		<view v-if="carList==''&&loding" class="nodataBox">
-			<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
+			<image src="../../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
 			<view class="noTxt">暂无数据</view>
 		</view>
 
@@ -32,8 +32,8 @@
 
 		<view class="bottomView">
 			<view class="saveCar" @click="addBtn">
-				<image src="../../static/img/icon_tianjiacheliang.png" mode=""
-					style="width: 44rpx; height: 36rpx; margin-right: 10rpx;"></image>
+				<!-- <image src="../../../static/img/icon_tianjiacheliang.png" mode=""
+					style="width: 44rpx; height: 36rpx; margin-right: 10rpx;"></image> -->
 				<view>添加爱车</view>
 			</view>
 		</view>
@@ -76,19 +76,24 @@
 					this.loding = true;
 				})
 			},
-			addBtn() {
-				var length = this.carList.length
-				if (length > 4) {
-					uni.showToast({
-						title: '库最多放五辆车,如果想添加,请先删除',
-						icon: 'none',
-						duration: 3000
-					});
-				} else {
-					uni.navigateTo({
-						url: 'addCar'
-					})
-				}
+			addBtn() {
+				uni.navigateTo({
+					url: 'addCar'
+				})
+				
+				
+				// var length = this.carList.length
+				// if (length > 4) {
+				// 	uni.showToast({
+				// 		title: '库最多放五辆车,如果想添加,请先删除',
+				// 		icon: 'none',
+				// 		duration: 3000
+				// 	});
+				// } else {
+				// 	uni.navigateTo({
+				// 		url: 'addCar'
+				// 	})
+				// }
 
 			},
 			editCar(id) {

+ 9 - 9
pages/user/addCar/carModel.vue

@@ -6,7 +6,7 @@
 			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
 			<view class="zdyNavCont">
 				<view class="zdyNavContLeft">
-					<image src="../../static/img/baiheiback.png" mode="" class="baiheibackImg" @click="gofhj"></image>
+					<image src="../../../static/img/baiheiback.png" mode="" class="baiheibackImg" @click="gofhj"></image>
 					<!-- <image src="../../static/img/chahao.png" mode="" class="gaunbiIMg" @click="goback"></image> -->
 				</view>
 				<view class="zdyNavContTitle">自主选车</view>
@@ -359,12 +359,12 @@ export default {
 			uni.showLoading({
 				title: '加载中'
 			})
-			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
 			  brand:this.brand,
 			  manufactor:this.manufactor,
 			  carSeries:this.carSeries,
 			  displacement:this.displacement
-			 },'GET').then(res => {
+			 },'POST').then(res => {
 				uni.hideLoading();
 				this.carGroupList=res.data.carGroupList
 			})
@@ -373,11 +373,11 @@ export default {
 			uni.showLoading({
 				title: '加载中'
 			})
-			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
 			  brand:this.brand,
 			  manufactor:this.manufactor,
 			  carSeries:this.carSeries
-			 },'GET').then(res => {
+			 },'POST').then(res => {
 				uni.hideLoading();
 				this.displacementList=res.data.displacementList
 			})
@@ -386,9 +386,9 @@ export default {
 			uni.showLoading({
 				title: '加载中'
 			})
-			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
 			  
-			 },'GET').then(res => {
+			 },'POST').then(res => {
 				uni.hideLoading();
 				this.carModelList=res.data.brands
 			})
@@ -417,9 +417,9 @@ export default {
 			uni.showLoading({
 				title: '加载中'
 			})
-			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
 			  brand:this.brand
-			 },'GET').then(res => {
+			 },'POST').then(res => {
 				uni.hideLoading();
 				this.carSeriesList=res.data.carSeriesList
 			})

BIN
static/img/baiheiback.png


+ 45 - 45
uni_modules/uni-popup/components/uni-popup-dialog/keypress.js

@@ -1,45 +1,45 @@
-// #ifdef H5
-export default {
-  name: 'Keypress',
-  props: {
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    const keyNames = {
-      esc: ['Esc', 'Escape'],
-      tab: 'Tab',
-      enter: 'Enter',
-      space: [' ', 'Spacebar'],
-      up: ['Up', 'ArrowUp'],
-      left: ['Left', 'ArrowLeft'],
-      right: ['Right', 'ArrowRight'],
-      down: ['Down', 'ArrowDown'],
-      delete: ['Backspace', 'Delete', 'Del']
-    }
-    const listener = ($event) => {
-      if (this.disable) {
-        return
-      }
-      const keyName = Object.keys(keyNames).find(key => {
-        const keyName = $event.key
-        const value = keyNames[key]
-        return value === keyName || (Array.isArray(value) && value.includes(keyName))
-      })
-      if (keyName) {
-        // 避免和其他按键事件冲突
-        setTimeout(() => {
-          this.$emit(keyName, {})
-        }, 0)
-      }
-    }
-    document.addEventListener('keyup', listener)
-    this.$once('hook:beforeDestroy', () => {
-      document.removeEventListener('keyup', listener)
-    })
-  },
-	render: () => {}
-}
-// #endif
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif

+ 263 - 263
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue

@@ -1,89 +1,89 @@
-<template>
-	<view class="uni-popup-dialog">
-		<view class="uni-dialog-title">
-			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
-		</view>
-		<view v-if="mode === 'base'" class="uni-dialog-content">
-			<slot>
-				<text class="uni-dialog-content-text">{{content}}</text>
-			</slot>
-		</view>
-		<view v-else class="uni-dialog-content">
-			<slot>
-				<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
-			</slot>
-		</view>
-		<view class="uni-dialog-button-group">
-			<view class="uni-dialog-button" @click="closeDialog">
-				<text class="uni-dialog-button-text">{{closeText}}</text>
-			</view>
-			<view class="uni-dialog-button uni-border-left" @click="onOk">
-				<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
-			</view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	import popup from '../uni-popup/popup.js'
-	import {
-	initVueI18n
-	} from '@dcloudio/uni-i18n'
-	import messages from '../uni-popup/i18n/index.js'
-	const {	t } = initVueI18n(messages)
-	/**
-	 * PopUp 弹出层-对话框样式
-	 * @description 弹出层-对话框样式
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} value input 模式下的默认值
-	 * @property {String} placeholder input 模式下输入提示
-	 * @property {String} type = [success|warning|info|error] 主题样式
-	 *  @value success 成功
-	 * 	@value warning 提示
-	 * 	@value info 消息
-	 * 	@value error 错误
-	 * @property {String} mode = [base|input] 模式、
-	 * 	@value base 基础对话框
-	 * 	@value input 可输入对话框
-	 * @property {String} content 对话框内容
-	 * @property {Boolean} beforeClose 是否拦截取消事件
-	 * @event {Function} confirm 点击确认按钮触发
-	 * @event {Function} close 点击取消按钮触发
-	 */
-
-	export default {
-		name: "uniPopupDialog",
-		mixins: [popup],
-		emits:['confirm','close'],
-		props: {
-			value: {
-				type: [String, Number],
-				default: ''
-			},
-			placeholder: {
-				type: [String, Number],
-				default: ''
-			},
-			type: {
-				type: String,
-				default: 'error'
-			},
-			mode: {
-				type: String,
-				default: 'base'
-			},
-			title: {
-				type: String,
-				default: ''
-			},
-			content: {
-				type: String,
-				default: ''
-			},
-			beforeClose: {
-				type: Boolean,
-				default: false
+<template>
+	<view class="uni-popup-dialog">
+		<view class="uni-dialog-title">
+			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
+		</view>
+		<view v-if="mode === 'base'" class="uni-dialog-content">
+			<slot>
+				<text class="uni-dialog-content-text">{{content}}</text>
+			</slot>
+		</view>
+		<view v-else class="uni-dialog-content">
+			<slot>
+				<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
+			</slot>
+		</view>
+		<view class="uni-dialog-button-group">
+			<view class="uni-dialog-button" @click="closeDialog">
+				<text class="uni-dialog-button-text">{{closeText}}</text>
+			</view>
+			<view class="uni-dialog-button uni-border-left" @click="onOk">
+				<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	import {
+	initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from '../uni-popup/i18n/index.js'
+	const {	t } = initVueI18n(messages)
+	/**
+	 * PopUp 弹出层-对话框样式
+	 * @description 弹出层-对话框样式
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} value input 模式下的默认值
+	 * @property {String} placeholder input 模式下输入提示
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} mode = [base|input] 模式、
+	 * 	@value base 基础对话框
+	 * 	@value input 可输入对话框
+	 * @property {String} content 对话框内容
+	 * @property {Boolean} beforeClose 是否拦截取消事件
+	 * @event {Function} confirm 点击确认按钮触发
+	 * @event {Function} close 点击取消按钮触发
+	 */
+
+	export default {
+		name: "uniPopupDialog",
+		mixins: [popup],
+		emits:['confirm','close'],
+		props: {
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			placeholder: {
+				type: [String, Number],
+				default: ''
+			},
+			type: {
+				type: String,
+				default: 'error'
+			},
+			mode: {
+				type: String,
+				default: 'base'
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			content: {
+				type: String,
+				default: ''
+			},
+			beforeClose: {
+				type: Boolean,
+				default: false
 			},
 			cancelText:{
 				type: String,
@@ -92,180 +92,180 @@
 			confirmText:{
 				type: String,
 				default: ''
-			}
-		},
-		data() {
-			return {
-				dialogType: 'error',
-				focus: false,
-				val: ""
-			}
-		},
-		computed: {
-			okText() {
-				return this.confirmText || t("uni-popup.ok")
-			},
-			closeText() {
-				return this.cancelText || t("uni-popup.cancel")
-			},
-			placeholderText() {
-				return this.placeholder || t("uni-popup.placeholder")
-			},
-			titleText() {
-				return this.title || t("uni-popup.title")
-			}
-		},
-		watch: {
-			type(val) {
-				this.dialogType = val
-			},
-			mode(val) {
-				if (val === 'input') {
-					this.dialogType = 'info'
-				}
-			},
-			value(val) {
-				this.val = val
-			}
-		},
-		created() {
-			// 对话框遮罩不可点击
-			this.popup.disableMask()
-			// this.popup.closeMask()
-			if (this.mode === 'input') {
-				this.dialogType = 'info'
-				this.val = this.value
-			} else {
-				this.dialogType = this.type
-			}
-		},
-		mounted() {
-			this.focus = true
-		},
-		methods: {
-			/**
-			 * 点击确认按钮
-			 */
-			onOk() {
-				if (this.mode === 'input'){
-					this.$emit('confirm', this.val)
-				}else{
-					this.$emit('confirm')
-				}
-				if(this.beforeClose) return
-				this.popup.close()
-			},
-			/**
-			 * 点击取消按钮
-			 */
-			closeDialog() {
-				this.$emit('close')
-				if(this.beforeClose) return
-				this.popup.close()
-			},
-			close(){
-				this.popup.close()
-			}
-		}
-	}
-</script>
-
-<style lang="scss" >
-	.uni-popup-dialog {
-		width: 300px;
-		border-radius: 11px;
-		background-color: #fff;
-	}
-
-	.uni-dialog-title {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		padding-top: 25px;
-	}
-
-	.uni-dialog-title-text {
-		font-size: 16px;
-		font-weight: 500;
-	}
-
-	.uni-dialog-content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		padding: 20px;
-	}
-
-	.uni-dialog-content-text {
-		font-size: 14px;
-		color: #6C6C6C;
-	}
-
-	.uni-dialog-button-group {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		border-top-color: #f5f5f5;
-		border-top-style: solid;
-		border-top-width: 1px;
-	}
-
-	.uni-dialog-button {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 45px;
-	}
-
-	.uni-border-left {
-		border-left-color: #f0f0f0;
-		border-left-style: solid;
-		border-left-width: 1px;
-	}
-
-	.uni-dialog-button-text {
-		font-size: 16px;
-		color: #333;
-	}
-
-	.uni-button-color {
-		color: #007aff;
-	}
-
-	.uni-dialog-input {
-		flex: 1;
-		font-size: 14px;
-		border: 1px #eee solid;
-		height: 40px;
-		padding: 0 10px;
-		border-radius: 5px;
-		color: #555;
-	}
-
-	.uni-popup__success {
-		color: #4cd964;
-	}
-
-	.uni-popup__warn {
-		color: #f0ad4e;
-	}
-
-	.uni-popup__error {
-		color: #dd524d;
-	}
-
-	.uni-popup__info {
-		color: #909399;
-	}
-</style>
+			}
+		},
+		data() {
+			return {
+				dialogType: 'error',
+				focus: false,
+				val: ""
+			}
+		},
+		computed: {
+			okText() {
+				return this.confirmText || t("uni-popup.ok")
+			},
+			closeText() {
+				return this.cancelText || t("uni-popup.cancel")
+			},
+			placeholderText() {
+				return this.placeholder || t("uni-popup.placeholder")
+			},
+			titleText() {
+				return this.title || t("uni-popup.title")
+			}
+		},
+		watch: {
+			type(val) {
+				this.dialogType = val
+			},
+			mode(val) {
+				if (val === 'input') {
+					this.dialogType = 'info'
+				}
+			},
+			value(val) {
+				this.val = val
+			}
+		},
+		created() {
+			// 对话框遮罩不可点击
+			this.popup.disableMask()
+			// this.popup.closeMask()
+			if (this.mode === 'input') {
+				this.dialogType = 'info'
+				this.val = this.value
+			} else {
+				this.dialogType = this.type
+			}
+		},
+		mounted() {
+			this.focus = true
+		},
+		methods: {
+			/**
+			 * 点击确认按钮
+			 */
+			onOk() {
+				if (this.mode === 'input'){
+					this.$emit('confirm', this.val)
+				}else{
+					this.$emit('confirm')
+				}
+				if(this.beforeClose) return
+				this.popup.close()
+			},
+			/**
+			 * 点击取消按钮
+			 */
+			closeDialog() {
+				this.$emit('close')
+				if(this.beforeClose) return
+				this.popup.close()
+			},
+			close(){
+				this.popup.close()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-popup-dialog {
+		width: 300px;
+		border-radius: 11px;
+		background-color: #fff;
+	}
+
+	.uni-dialog-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 25px;
+	}
+
+	.uni-dialog-title-text {
+		font-size: 16px;
+		font-weight: 500;
+	}
+
+	.uni-dialog-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+
+	.uni-dialog-content-text {
+		font-size: 14px;
+		color: #6C6C6C;
+	}
+
+	.uni-dialog-button-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		border-top-color: #f5f5f5;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-dialog-button {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 45px;
+	}
+
+	.uni-border-left {
+		border-left-color: #f0f0f0;
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
+
+	.uni-dialog-button-text {
+		font-size: 16px;
+		color: #333;
+	}
+
+	.uni-button-color {
+		color: #007aff;
+	}
+
+	.uni-dialog-input {
+		flex: 1;
+		font-size: 14px;
+		border: 1px #eee solid;
+		height: 40px;
+		padding: 0 10px;
+		border-radius: 5px;
+		color: #555;
+	}
+
+	.uni-popup__success {
+		color: #4cd964;
+	}
+
+	.uni-popup__warn {
+		color: #f0ad4e;
+	}
+
+	.uni-popup__error {
+		color: #dd524d;
+	}
+
+	.uni-popup__info {
+		color: #909399;
+	}
+</style>

+ 143 - 143
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue

@@ -1,143 +1,143 @@
-<template>
-	<view class="uni-popup-message">
-		<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
-			<slot>
-				<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script>
-	import popup from '../uni-popup/popup.js'
-	/**
-	 * PopUp 弹出层-消息提示
-	 * @description 弹出层-消息提示
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} type = [success|warning|info|error] 主题样式
-	 *  @value success 成功
-	 * 	@value warning 提示
-	 * 	@value info 消息
-	 * 	@value error 错误
-	 * @property {String} message 消息提示文字
-	 * @property {String} duration 显示时间,设置为 0 则不会自动关闭
-	 */
-
-	export default {
-		name: 'uniPopupMessage',
-		mixins:[popup],
-		props: {
-			/**
-			 * 主题 success/warning/info/error	  默认 success
-			 */
-			type: {
-				type: String,
-				default: 'success'
-			},
-			/**
-			 * 消息文字
-			 */
-			message: {
-				type: String,
-				default: ''
-			},
-			/**
-			 * 显示时间,设置为 0 则不会自动关闭
-			 */
-			duration: {
-				type: Number,
-				default: 3000
-			},
-			maskShow:{
-				type:Boolean,
-				default:false
-			}
-		},
-		data() {
-			return {}
-		},
-		created() {
-			this.popup.maskShow = this.maskShow
-			this.popup.messageChild = this
-		},
-		methods: {
-			timerClose(){
-				if(this.duration === 0) return
-				clearTimeout(this.timer) 
-				this.timer = setTimeout(()=>{
-					this.popup.close()
-				},this.duration)
-			}
-		}
-	}
-</script>
-<style lang="scss" >
-	.uni-popup-message {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-	}
-
-	.uni-popup-message__box {
-		background-color: #e1f3d8;
-		padding: 10px 15px;
-		border-color: #eee;
-		border-style: solid;
-		border-width: 1px;
-		flex: 1;
-	}
-
-	@media screen and (min-width: 500px) {
-		.fixforpc-width {
-			margin-top: 20px;
-			border-radius: 4px;
-			flex: none;
-			min-width: 380px;
-			/* #ifndef APP-NVUE */
-			max-width: 50%;
-			/* #endif */
-			/* #ifdef APP-NVUE */
-			max-width: 500px;
-			/* #endif */
-		}
-	}
-
-	.uni-popup-message-text {
-		font-size: 14px;
-		padding: 0;
-	}
-
-	.uni-popup__success {
-		background-color: #e1f3d8;
-	}
-
-	.uni-popup__success-text {
-		color: #67C23A;
-	}
-
-	.uni-popup__warn {
-		background-color: #faecd8;
-	}
-
-	.uni-popup__warn-text {
-		color: #E6A23C;
-	}
-
-	.uni-popup__error {
-		background-color: #fde2e2;
-	}
-
-	.uni-popup__error-text {
-		color: #F56C6C;
-	}
-
-	.uni-popup__info {
-		background-color: #F2F6FC;
-	}
-
-	.uni-popup__info-text {
-		color: #909399;
-	}
-</style>
+<template>
+	<view class="uni-popup-message">
+		<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
+			<slot>
+				<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	/**
+	 * PopUp 弹出层-消息提示
+	 * @description 弹出层-消息提示
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} message 消息提示文字
+	 * @property {String} duration 显示时间,设置为 0 则不会自动关闭
+	 */
+
+	export default {
+		name: 'uniPopupMessage',
+		mixins:[popup],
+		props: {
+			/**
+			 * 主题 success/warning/info/error	  默认 success
+			 */
+			type: {
+				type: String,
+				default: 'success'
+			},
+			/**
+			 * 消息文字
+			 */
+			message: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 显示时间,设置为 0 则不会自动关闭
+			 */
+			duration: {
+				type: Number,
+				default: 3000
+			},
+			maskShow:{
+				type:Boolean,
+				default:false
+			}
+		},
+		data() {
+			return {}
+		},
+		created() {
+			this.popup.maskShow = this.maskShow
+			this.popup.messageChild = this
+		},
+		methods: {
+			timerClose(){
+				if(this.duration === 0) return
+				clearTimeout(this.timer) 
+				this.timer = setTimeout(()=>{
+					this.popup.close()
+				},this.duration)
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-popup-message {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.uni-popup-message__box {
+		background-color: #e1f3d8;
+		padding: 10px 15px;
+		border-color: #eee;
+		border-style: solid;
+		border-width: 1px;
+		flex: 1;
+	}
+
+	@media screen and (min-width: 500px) {
+		.fixforpc-width {
+			margin-top: 20px;
+			border-radius: 4px;
+			flex: none;
+			min-width: 380px;
+			/* #ifndef APP-NVUE */
+			max-width: 50%;
+			/* #endif */
+			/* #ifdef APP-NVUE */
+			max-width: 500px;
+			/* #endif */
+		}
+	}
+
+	.uni-popup-message-text {
+		font-size: 14px;
+		padding: 0;
+	}
+
+	.uni-popup__success {
+		background-color: #e1f3d8;
+	}
+
+	.uni-popup__success-text {
+		color: #67C23A;
+	}
+
+	.uni-popup__warn {
+		background-color: #faecd8;
+	}
+
+	.uni-popup__warn-text {
+		color: #E6A23C;
+	}
+
+	.uni-popup__error {
+		background-color: #fde2e2;
+	}
+
+	.uni-popup__error-text {
+		color: #F56C6C;
+	}
+
+	.uni-popup__info {
+		background-color: #F2F6FC;
+	}
+
+	.uni-popup__info-text {
+		color: #909399;
+	}
+</style>

+ 187 - 187
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue

@@ -1,187 +1,187 @@
-<template>
-	<view class="uni-popup-share">
-		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
-		<view class="uni-share-content">
-			<view class="uni-share-content-box">
-				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
-					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
-					<text class="uni-share-text">{{item.text}}</text>
-				</view>
-
-			</view>
-		</view>
-		<view class="uni-share-button-box">
-			<button class="uni-share-button" @click="close">{{cancelText}}</button>
-		</view>
-	</view>
-</template>
-
-<script>
-	import popup from '../uni-popup/popup.js'
-	import {
-	initVueI18n
-	} from '@dcloudio/uni-i18n'
-	import messages from '../uni-popup/i18n/index.js'
-	const {	t	} = initVueI18n(messages)
-	export default {
-		name: 'UniPopupShare',
-		mixins:[popup],
-		emits:['select'],
-		props: {
-			title: {
-				type: String,
-				default: ''
-			},
-			beforeClose: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				bottomData: [{
-						text: '微信',
-						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
-						name: 'wx'
-					},
-					{
-						text: '支付宝',
-						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
-						name: 'wx'
-					},
-					{
-						text: 'QQ',
-						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
-						name: 'qq'
-					},
-					{
-						text: '新浪',
-						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
-						name: 'sina'
-					},
-					// {
-					// 	text: '百度',
-					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
-					// 	name: 'copy'
-					// },
-					// {
-					// 	text: '其他',
-					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
-					// 	name: 'more'
-					// }
-				]
-			}
-		},
-		created() {},
-		computed: {
-			cancelText() {
-				return t("uni-popup.cancel")
-			},
-		shareTitleText() {
-				return this.title || t("uni-popup.shareTitle")
-			}
-		},
-		methods: {
-			/**
-			 * 选择内容
-			 */
-			select(item, index) {
-				this.$emit('select', {
-					item,
-					index
-				})
-				this.close()
-
-			},
-			/**
-			 * 关闭窗口
-			 */
-			close() {
-				if(this.beforeClose) return
-				this.popup.close()
-			}
-		}
-	}
-</script>
-<style lang="scss" >
-	.uni-popup-share {
-		background-color: #fff;
-		border-top-left-radius: 11px;
-		border-top-right-radius: 11px;
-	}
-	.uni-share-title {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		height: 40px;
-	}
-	.uni-share-title-text {
-		font-size: 14px;
-		color: #666;
-	}
-	.uni-share-content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		padding-top: 10px;
-	}
-
-	.uni-share-content-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex-wrap: wrap;
-		width: 360px;
-	}
-
-	.uni-share-content-item {
-		width: 90px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		padding: 10px 0;
-		align-items: center;
-	}
-
-	.uni-share-content-item:active {
-		background-color: #f5f5f5;
-	}
-
-	.uni-share-image {
-		width: 30px;
-		height: 30px;
-	}
-
-	.uni-share-text {
-		margin-top: 10px;
-		font-size: 14px;
-		color: #3B4144;
-	}
-
-	.uni-share-button-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		padding: 10px 15px;
-	}
-
-	.uni-share-button {
-		flex: 1;
-		border-radius: 50px;
-		color: #666;
-		font-size: 16px;
-	}
-
-	.uni-share-button::after {
-		border-radius: 50px;
-	}
-</style>
+<template>
+	<view class="uni-popup-share">
+		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
+		<view class="uni-share-content">
+			<view class="uni-share-content-box">
+				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
+					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+					<text class="uni-share-text">{{item.text}}</text>
+				</view>
+
+			</view>
+		</view>
+		<view class="uni-share-button-box">
+			<button class="uni-share-button" @click="close">{{cancelText}}</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	import {
+	initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from '../uni-popup/i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+	export default {
+		name: 'UniPopupShare',
+		mixins:[popup],
+		emits:['select'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			beforeClose: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				bottomData: [{
+						text: '微信',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
+						name: 'wx'
+					},
+					{
+						text: '支付宝',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
+						name: 'wx'
+					},
+					{
+						text: 'QQ',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
+						name: 'qq'
+					},
+					{
+						text: '新浪',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
+						name: 'sina'
+					},
+					// {
+					// 	text: '百度',
+					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
+					// 	name: 'copy'
+					// },
+					// {
+					// 	text: '其他',
+					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
+					// 	name: 'more'
+					// }
+				]
+			}
+		},
+		created() {},
+		computed: {
+			cancelText() {
+				return t("uni-popup.cancel")
+			},
+		shareTitleText() {
+				return this.title || t("uni-popup.shareTitle")
+			}
+		},
+		methods: {
+			/**
+			 * 选择内容
+			 */
+			select(item, index) {
+				this.$emit('select', {
+					item,
+					index
+				})
+				this.close()
+
+			},
+			/**
+			 * 关闭窗口
+			 */
+			close() {
+				if(this.beforeClose) return
+				this.popup.close()
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-popup-share {
+		background-color: #fff;
+		border-top-left-radius: 11px;
+		border-top-right-radius: 11px;
+	}
+	.uni-share-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		height: 40px;
+	}
+	.uni-share-title-text {
+		font-size: 14px;
+		color: #666;
+	}
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 10px;
+	}
+
+	.uni-share-content-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 360px;
+	}
+
+	.uni-share-content-item {
+		width: 90px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		padding: 10px 0;
+		align-items: center;
+	}
+
+	.uni-share-content-item:active {
+		background-color: #f5f5f5;
+	}
+
+	.uni-share-image {
+		width: 30px;
+		height: 30px;
+	}
+
+	.uni-share-text {
+		margin-top: 10px;
+		font-size: 14px;
+		color: #3B4144;
+	}
+
+	.uni-share-button-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		padding: 10px 15px;
+	}
+
+	.uni-share-button {
+		flex: 1;
+		border-radius: 50px;
+		color: #666;
+		font-size: 16px;
+	}
+
+	.uni-share-button::after {
+		border-radius: 50px;
+	}
+</style>

+ 3 - 3
uni_modules/uni-popup/components/uni-popup/i18n/en.json

@@ -1,6 +1,6 @@
-{
-	"uni-popup.cancel": "cancel",
-	"uni-popup.ok": "ok",
+{
+	"uni-popup.cancel": "cancel",
+	"uni-popup.ok": "ok",
 	"uni-popup.placeholder": "pleace enter",
 	"uni-popup.title": "Hint",
 	"uni-popup.shareTitle": "Share to"

+ 7 - 7
uni_modules/uni-popup/components/uni-popup/i18n/index.js

@@ -1,8 +1,8 @@
-import en from './en.json'
-import zhHans from './zh-Hans.json'
-import zhHant from './zh-Hant.json'
-export default {
-	en,
-	'zh-Hans': zhHans,
-	'zh-Hant': zhHant
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
 }

+ 3 - 3
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json

@@ -1,7 +1,7 @@
-{
-	"uni-popup.cancel": "取消",
+{
+	"uni-popup.cancel": "取消",
 	"uni-popup.ok": "确定",
 	"uni-popup.placeholder": "请输入",
 		"uni-popup.title": "提示",
-		"uni-popup.shareTitle": "分享到"
+		"uni-popup.shareTitle": "分享到"
 }

+ 3 - 3
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json

@@ -1,7 +1,7 @@
-{
-	"uni-popup.cancel": "取消",
+{
+	"uni-popup.cancel": "取消",
 	"uni-popup.ok": "確定",
 	"uni-popup.placeholder": "請輸入",
 	"uni-popup.title": "提示",
-	"uni-popup.shareTitle": "分享到"
+	"uni-popup.shareTitle": "分享到"
 }

+ 45 - 45
uni_modules/uni-popup/components/uni-popup/keypress.js

@@ -1,45 +1,45 @@
-// #ifdef H5
-export default {
-  name: 'Keypress',
-  props: {
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    const keyNames = {
-      esc: ['Esc', 'Escape'],
-      tab: 'Tab',
-      enter: 'Enter',
-      space: [' ', 'Spacebar'],
-      up: ['Up', 'ArrowUp'],
-      left: ['Left', 'ArrowLeft'],
-      right: ['Right', 'ArrowRight'],
-      down: ['Down', 'ArrowDown'],
-      delete: ['Backspace', 'Delete', 'Del']
-    }
-    const listener = ($event) => {
-      if (this.disable) {
-        return
-      }
-      const keyName = Object.keys(keyNames).find(key => {
-        const keyName = $event.key
-        const value = keyNames[key]
-        return value === keyName || (Array.isArray(value) && value.includes(keyName))
-      })
-      if (keyName) {
-        // 避免和其他按键事件冲突
-        setTimeout(() => {
-          this.$emit(keyName, {})
-        }, 0)
-      }
-    }
-    document.addEventListener('keyup', listener)
-    // this.$once('hook:beforeDestroy', () => {
-    //   document.removeEventListener('keyup', listener)
-    // })
-  },
-	render: () => {}
-}
-// #endif
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif

+ 7 - 7
uni_modules/uni-popup/components/uni-popup/popup.js

@@ -1,9 +1,9 @@
 
-export default {
-	data() {
-		return {
-			
-		}
+export default {
+	data() {
+		return {
+			
+		}
 	},
 	created(){
 		this.popup = this.getParent()
@@ -22,5 +22,5 @@ export default {
 			}
 			return parent;
 		},
-	}
-}
+	}
+}

+ 473 - 473
uni_modules/uni-popup/components/uni-popup/uni-popup.vue

@@ -1,474 +1,474 @@
-<template>
-	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
-		<view @touchstart="touchstart">
-			<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
-				:duration="duration" :show="showTrans" @click="onTap" />
-			<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
-				:show="showTrans" @click="onTap">
-				<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
-					<slot />
-				</view>
-			</uni-transition>
-		</view>
-		<!-- #ifdef H5 -->
-		<keypress v-if="maskShow" @esc="onTap" />
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	// #ifdef H5
-	import keypress from './keypress.js'
-	// #endif
-
-	/**
-	 * PopUp 弹出层
-	 * @description 弹出层组件,为了解决遮罩弹层的问题
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
-	 * 	@value top 顶部弹出
-	 * 	@value center 中间弹出
-	 * 	@value bottom 底部弹出
-	 * 	@value left		左侧弹出
-	 * 	@value right  右侧弹出
-	 * 	@value message 消息提示
-	 * 	@value dialog 对话框
-	 * 	@value share 底部分享示例
-	 * @property {Boolean} animation = [true|false] 是否开启动画
-	 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
-	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
-	 * @property {String}  backgroundColor 主窗口背景色
-	 * @property {String}  maskBackgroundColor 蒙版颜色
-	 * @property {Boolean} safeArea		   是否适配底部安全区
-	 * @event {Function} change 打开关闭弹窗触发,e={show: false}
-	 * @event {Function} maskClick 点击遮罩触发
-	 */
-
-	export default {
-		name: 'uniPopup',
-		components: {
-			// #ifdef H5
-			keypress
-			// #endif
-		},
-		emits: ['change', 'maskClick'],
-		props: {
-			// 开启动画
-			animation: {
-				type: Boolean,
-				default: true
-			},
-			// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
-			// message: 消息提示 ; dialog : 对话框
-			type: {
-				type: String,
-				default: 'center'
-			},
-			// maskClick
-			isMaskClick: {
-				type: Boolean,
-				default: null
-			},
-			// TODO 2 个版本后废弃属性 ,使用 isMaskClick
-			maskClick: {
-				type: Boolean,
-				default: null
-			},
-			backgroundColor: {
-				type: String,
-				default: 'none'
-			},
-			safeArea: {
-				type: Boolean,
-				default: true
-			},
-			maskBackgroundColor: {
-				type: String,
-				default: 'rgba(0, 0, 0, 0.4)'
-			},
-		},
-
-		watch: {
-			/**
-			 * 监听type类型
-			 */
-			type: {
-				handler: function(type) {
-					if (!this.config[type]) return
-					this[this.config[type]](true)
-				},
-				immediate: true
-			},
-			isDesktop: {
-				handler: function(newVal) {
-					if (!this.config[newVal]) return
-					this[this.config[this.type]](true)
-				},
-				immediate: true
-			},
-			/**
-			 * 监听遮罩是否可点击
-			 * @param {Object} val
-			 */
-			maskClick: {
-				handler: function(val) {
-					this.mkclick = val
-				},
-				immediate: true
-			},
-			isMaskClick: {
-				handler: function(val) {
-					this.mkclick = val
-				},
-				immediate: true
-			},
-			// H5 下禁止底部滚动
-			showPopup(show) {
-				// #ifdef H5
-				// fix by mehaotian 处理 h5 滚动穿透的问题
-				document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
-				// #endif
-			}
-		},
-		data() {
-			return {
-				duration: 300,
-				ani: [],
-				showPopup: false,
-				showTrans: false,
-				popupWidth: 0,
-				popupHeight: 0,
-				config: {
-					top: 'top',
-					bottom: 'bottom',
-					center: 'center',
-					left: 'left',
-					right: 'right',
-					message: 'top',
-					dialog: 'center',
-					share: 'bottom'
-				},
-				maskClass: {
-					position: 'fixed',
-					bottom: 0,
-					top: 0,
-					left: 0,
-					right: 0,
-					backgroundColor: 'rgba(0, 0, 0, 0.4)'
-				},
-				transClass: {
-					position: 'fixed',
-					left: 0,
-					right: 0
-				},
-				maskShow: true,
-				mkclick: true,
-				popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
-			}
-		},
-		computed: {
-			isDesktop() {
-				return this.popupWidth >= 500 && this.popupHeight >= 500
-			},
-			bg() {
-				if (this.backgroundColor === '' || this.backgroundColor === 'none') {
-					return 'transparent'
-				}
-				return this.backgroundColor
-			}
-		},
-		mounted() {
-			const fixSize = () => {
-				const {
-					windowWidth,
-					windowHeight,
-					windowTop,
-					safeArea,
-					screenHeight,
-					safeAreaInsets
-				} = uni.getSystemInfoSync()
-				this.popupWidth = windowWidth
-				this.popupHeight = windowHeight + (windowTop || 0)
-				// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复
-				if (safeArea && this.safeArea) {
-					// #ifdef MP-WEIXIN
-					this.safeAreaInsets = screenHeight - safeArea.bottom
-					// #endif
-					// #ifndef MP-WEIXIN
-					this.safeAreaInsets = safeAreaInsets.bottom
-					// #endif
-				} else {
-					this.safeAreaInsets = 0
-				}
-			}
-			fixSize()
-			// #ifdef H5
-			// window.addEventListener('resize', fixSize)
-			// this.$once('hook:beforeDestroy', () => {
-			// 	window.removeEventListener('resize', fixSize)
-			// })
-			// #endif
-		},
-		// #ifndef VUE3
-		// TODO vue2
-		destroyed() {
-			this.setH5Visible()
-		},
-		// #endif
-		// #ifdef VUE3
-		// TODO vue3
-		unmounted() {
-			this.setH5Visible()
-		},
-		// #endif
-		created() {
-			// this.mkclick =  this.isMaskClick || this.maskClick
-			if (this.isMaskClick === null && this.maskClick === null) {
-				this.mkclick = true
-			} else {
-				this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
-			}
-			if (this.animation) {
-				this.duration = 300
-			} else {
-				this.duration = 0
-			}
-			// TODO 处理 message 组件生命周期异常的问题
-			this.messageChild = null
-			// TODO 解决头条冒泡的问题
-			this.clearPropagation = false
-			this.maskClass.backgroundColor = this.maskBackgroundColor
-		},
-		methods: {
-			setH5Visible() {
-				// #ifdef H5
-				// fix by mehaotian 处理 h5 滚动穿透的问题
-				document.getElementsByTagName('body')[0].style.overflow = 'visible'
-				// #endif
-			},
-			/**
-			 * 公用方法,不显示遮罩层
-			 */
-			closeMask() {
-				this.maskShow = false
-			},
-			/**
-			 * 公用方法,遮罩层禁止点击
-			 */
-			disableMask() {
-				this.mkclick = false
-			},
-			// TODO nvue 取消冒泡
-			clear(e) {
-				// #ifndef APP-NVUE
-				e.stopPropagation()
-				// #endif
-				this.clearPropagation = true
-			},
-
-			open(direction) {
-				// fix by mehaotian 处理快速打开关闭的情况
-				if (this.showPopup) {
-					clearTimeout(this.timer)
-					this.showPopup = false
-				}
-				let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
-				if (!(direction && innerType.indexOf(direction) !== -1)) {
-					direction = this.type
-				}
-				if (!this.config[direction]) {
-					console.error('缺少类型:', direction)
-					return
-				}
-				this[this.config[direction]]()
-				this.$emit('change', {
-					show: true,
-					type: direction
-				})
-			},
-			close(type) {
-				this.showTrans = false
-				this.$emit('change', {
-					show: false,
-					type: this.type
-				})
-				clearTimeout(this.timer)
-				// // 自定义关闭事件
-				// this.customOpen && this.customClose()
-				this.timer = setTimeout(() => {
-					this.showPopup = false
-				}, 300)
-			},
-			// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
-			touchstart() {
-				this.clearPropagation = false
-			},
-
-			onTap() {
-				if (this.clearPropagation) {
-					// fix by mehaotian 兼容 nvue
-					this.clearPropagation = false
-					return
-				}
-				this.$emit('maskClick')
-				if (!this.mkclick) return
-				this.close()
-			},
-			/**
-			 * 顶部弹出样式处理
-			 */
-			top(type) {
-				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
-				this.ani = ['slide-top']
-				this.transClass = {
-					position: 'fixed',
-					left: 0,
-					right: 0,
-					backgroundColor: this.bg
-				}
-				// TODO 兼容 type 属性 ,后续会废弃
-				if (type) return
-				this.showPopup = true
-				this.showTrans = true
-				this.$nextTick(() => {
-					if (this.messageChild && this.type === 'message') {
-						this.messageChild.timerClose()
-					}
-				})
-			},
-			/**
-			 * 底部弹出样式处理
-			 */
-			bottom(type) {
-				this.popupstyle = 'bottom'
-				this.ani = ['slide-bottom']
-				this.transClass = {
-					position: 'fixed',
-					left: 0,
-					right: 0,
-					bottom: 0,
-					paddingBottom: this.safeAreaInsets + 'px',
-					backgroundColor: this.bg
-				}
-				// TODO 兼容 type 属性 ,后续会废弃
-				if (type) return
-				this.showPopup = true
-				this.showTrans = true
-			},
-			/**
-			 * 中间弹出样式处理
-			 */
-			center(type) {
-				this.popupstyle = 'center'
-				this.ani = ['zoom-out', 'fade']
-				this.transClass = {
-					position: 'fixed',
-					/* #ifndef APP-NVUE */
-					display: 'flex',
-					flexDirection: 'column',
-					/* #endif */
-					bottom: 0,
-					left: 0,
-					right: 0,
-					top: 0,
-					justifyContent: 'center',
-					alignItems: 'center'
-				}
-				// TODO 兼容 type 属性 ,后续会废弃
-				if (type) return
-				this.showPopup = true
-				this.showTrans = true
-			},
-			left(type) {
-				this.popupstyle = 'left'
-				this.ani = ['slide-left']
-				this.transClass = {
-					position: 'fixed',
-					left: 0,
-					bottom: 0,
-					top: 0,
-					backgroundColor: this.bg,
-					/* #ifndef APP-NVUE */
-					display: 'flex',
-					flexDirection: 'column'
-					/* #endif */
-				}
-				// TODO 兼容 type 属性 ,后续会废弃
-				if (type) return
-				this.showPopup = true
-				this.showTrans = true
-			},
-			right(type) {
-				this.popupstyle = 'right'
-				this.ani = ['slide-right']
-				this.transClass = {
-					position: 'fixed',
-					bottom: 0,
-					right: 0,
-					top: 0,
-					backgroundColor: this.bg,
-					/* #ifndef APP-NVUE */
-					display: 'flex',
-					flexDirection: 'column'
-					/* #endif */
-				}
-				// TODO 兼容 type 属性 ,后续会废弃
-				if (type) return
-				this.showPopup = true
-				this.showTrans = true
-			}
-		}
-	}
-</script>
-<style lang="scss">
-	.uni-popup {
-		position: fixed;
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-
-		/* #endif */
-		&.top,
-		&.left,
-		&.right {
-			/* #ifdef H5 */
-			top: var(--window-top);
-			/* #endif */
-			/* #ifndef H5 */
-			top: 0;
-			/* #endif */
-		}
-
-		.uni-popup__wrapper {
-			/* #ifndef APP-NVUE */
-			display: block;
-			/* #endif */
-			position: relative;
-
-			/* iphonex 等安全区设置,底部安全区适配 */
-			/* #ifndef APP-NVUE */
-			// padding-bottom: constant(safe-area-inset-bottom);
-			// padding-bottom: env(safe-area-inset-bottom);
-			/* #endif */
-			&.left,
-			&.right {
-				/* #ifdef H5 */
-				padding-top: var(--window-top);
-				/* #endif */
-				/* #ifndef H5 */
-				padding-top: 0;
-				/* #endif */
-				flex: 1;
-			}
-		}
-	}
-
-	.fixforpc-z-index {
-		/* #ifndef APP-NVUE */
-		z-index: 999;
-		/* #endif */
-	}
-
-	.fixforpc-top {
-		top: 0;
-	}
+<template>
+	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
+		<view @touchstart="touchstart">
+			<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
+				:duration="duration" :show="showTrans" @click="onTap" />
+			<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
+				:show="showTrans" @click="onTap">
+				<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
+					<slot />
+				</view>
+			</uni-transition>
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress v-if="maskShow" @esc="onTap" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+
+	/**
+	 * PopUp 弹出层
+	 * @description 弹出层组件,为了解决遮罩弹层的问题
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
+	 * 	@value top 顶部弹出
+	 * 	@value center 中间弹出
+	 * 	@value bottom 底部弹出
+	 * 	@value left		左侧弹出
+	 * 	@value right  右侧弹出
+	 * 	@value message 消息提示
+	 * 	@value dialog 对话框
+	 * 	@value share 底部分享示例
+	 * @property {Boolean} animation = [true|false] 是否开启动画
+	 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
+	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
+	 * @property {String}  backgroundColor 主窗口背景色
+	 * @property {String}  maskBackgroundColor 蒙版颜色
+	 * @property {Boolean} safeArea		   是否适配底部安全区
+	 * @event {Function} change 打开关闭弹窗触发,e={show: false}
+	 * @event {Function} maskClick 点击遮罩触发
+	 */
+
+	export default {
+		name: 'uniPopup',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits: ['change', 'maskClick'],
+		props: {
+			// 开启动画
+			animation: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
+			// message: 消息提示 ; dialog : 对话框
+			type: {
+				type: String,
+				default: 'center'
+			},
+			// maskClick
+			isMaskClick: {
+				type: Boolean,
+				default: null
+			},
+			// TODO 2 个版本后废弃属性 ,使用 isMaskClick
+			maskClick: {
+				type: Boolean,
+				default: null
+			},
+			backgroundColor: {
+				type: String,
+				default: 'none'
+			},
+			safeArea: {
+				type: Boolean,
+				default: true
+			},
+			maskBackgroundColor: {
+				type: String,
+				default: 'rgba(0, 0, 0, 0.4)'
+			},
+		},
+
+		watch: {
+			/**
+			 * 监听type类型
+			 */
+			type: {
+				handler: function(type) {
+					if (!this.config[type]) return
+					this[this.config[type]](true)
+				},
+				immediate: true
+			},
+			isDesktop: {
+				handler: function(newVal) {
+					if (!this.config[newVal]) return
+					this[this.config[this.type]](true)
+				},
+				immediate: true
+			},
+			/**
+			 * 监听遮罩是否可点击
+			 * @param {Object} val
+			 */
+			maskClick: {
+				handler: function(val) {
+					this.mkclick = val
+				},
+				immediate: true
+			},
+			isMaskClick: {
+				handler: function(val) {
+					this.mkclick = val
+				},
+				immediate: true
+			},
+			// H5 下禁止底部滚动
+			showPopup(show) {
+				// #ifdef H5
+				// fix by mehaotian 处理 h5 滚动穿透的问题
+				document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
+				// #endif
+			}
+		},
+		data() {
+			return {
+				duration: 300,
+				ani: [],
+				showPopup: false,
+				showTrans: false,
+				popupWidth: 0,
+				popupHeight: 0,
+				config: {
+					top: 'top',
+					bottom: 'bottom',
+					center: 'center',
+					left: 'left',
+					right: 'right',
+					message: 'top',
+					dialog: 'center',
+					share: 'bottom'
+				},
+				maskClass: {
+					position: 'fixed',
+					bottom: 0,
+					top: 0,
+					left: 0,
+					right: 0,
+					backgroundColor: 'rgba(0, 0, 0, 0.4)'
+				},
+				transClass: {
+					position: 'fixed',
+					left: 0,
+					right: 0
+				},
+				maskShow: true,
+				mkclick: true,
+				popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
+			}
+		},
+		computed: {
+			isDesktop() {
+				return this.popupWidth >= 500 && this.popupHeight >= 500
+			},
+			bg() {
+				if (this.backgroundColor === '' || this.backgroundColor === 'none') {
+					return 'transparent'
+				}
+				return this.backgroundColor
+			}
+		},
+		mounted() {
+			const fixSize = () => {
+				const {
+					windowWidth,
+					windowHeight,
+					windowTop,
+					safeArea,
+					screenHeight,
+					safeAreaInsets
+				} = uni.getSystemInfoSync()
+				this.popupWidth = windowWidth
+				this.popupHeight = windowHeight + (windowTop || 0)
+				// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复
+				if (safeArea && this.safeArea) {
+					// #ifdef MP-WEIXIN
+					this.safeAreaInsets = screenHeight - safeArea.bottom
+					// #endif
+					// #ifndef MP-WEIXIN
+					this.safeAreaInsets = safeAreaInsets.bottom
+					// #endif
+				} else {
+					this.safeAreaInsets = 0
+				}
+			}
+			fixSize()
+			// #ifdef H5
+			// window.addEventListener('resize', fixSize)
+			// this.$once('hook:beforeDestroy', () => {
+			// 	window.removeEventListener('resize', fixSize)
+			// })
+			// #endif
+		},
+		// #ifndef VUE3
+		// TODO vue2
+		destroyed() {
+			this.setH5Visible()
+		},
+		// #endif
+		// #ifdef VUE3
+		// TODO vue3
+		unmounted() {
+			this.setH5Visible()
+		},
+		// #endif
+		created() {
+			// this.mkclick =  this.isMaskClick || this.maskClick
+			if (this.isMaskClick === null && this.maskClick === null) {
+				this.mkclick = true
+			} else {
+				this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
+			}
+			if (this.animation) {
+				this.duration = 300
+			} else {
+				this.duration = 0
+			}
+			// TODO 处理 message 组件生命周期异常的问题
+			this.messageChild = null
+			// TODO 解决头条冒泡的问题
+			this.clearPropagation = false
+			this.maskClass.backgroundColor = this.maskBackgroundColor
+		},
+		methods: {
+			setH5Visible() {
+				// #ifdef H5
+				// fix by mehaotian 处理 h5 滚动穿透的问题
+				document.getElementsByTagName('body')[0].style.overflow = 'visible'
+				// #endif
+			},
+			/**
+			 * 公用方法,不显示遮罩层
+			 */
+			closeMask() {
+				this.maskShow = false
+			},
+			/**
+			 * 公用方法,遮罩层禁止点击
+			 */
+			disableMask() {
+				this.mkclick = false
+			},
+			// TODO nvue 取消冒泡
+			clear(e) {
+				// #ifndef APP-NVUE
+				e.stopPropagation()
+				// #endif
+				this.clearPropagation = true
+			},
+
+			open(direction) {
+				// fix by mehaotian 处理快速打开关闭的情况
+				if (this.showPopup) {
+					clearTimeout(this.timer)
+					this.showPopup = false
+				}
+				let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
+				if (!(direction && innerType.indexOf(direction) !== -1)) {
+					direction = this.type
+				}
+				if (!this.config[direction]) {
+					console.error('缺少类型:', direction)
+					return
+				}
+				this[this.config[direction]]()
+				this.$emit('change', {
+					show: true,
+					type: direction
+				})
+			},
+			close(type) {
+				this.showTrans = false
+				this.$emit('change', {
+					show: false,
+					type: this.type
+				})
+				clearTimeout(this.timer)
+				// // 自定义关闭事件
+				// this.customOpen && this.customClose()
+				this.timer = setTimeout(() => {
+					this.showPopup = false
+				}, 300)
+			},
+			// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
+			touchstart() {
+				this.clearPropagation = false
+			},
+
+			onTap() {
+				if (this.clearPropagation) {
+					// fix by mehaotian 兼容 nvue
+					this.clearPropagation = false
+					return
+				}
+				this.$emit('maskClick')
+				if (!this.mkclick) return
+				this.close()
+			},
+			/**
+			 * 顶部弹出样式处理
+			 */
+			top(type) {
+				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
+				this.ani = ['slide-top']
+				this.transClass = {
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					backgroundColor: this.bg
+				}
+				// TODO 兼容 type 属性 ,后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+				this.$nextTick(() => {
+					if (this.messageChild && this.type === 'message') {
+						this.messageChild.timerClose()
+					}
+				})
+			},
+			/**
+			 * 底部弹出样式处理
+			 */
+			bottom(type) {
+				this.popupstyle = 'bottom'
+				this.ani = ['slide-bottom']
+				this.transClass = {
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					bottom: 0,
+					paddingBottom: this.safeAreaInsets + 'px',
+					backgroundColor: this.bg
+				}
+				// TODO 兼容 type 属性 ,后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			},
+			/**
+			 * 中间弹出样式处理
+			 */
+			center(type) {
+				this.popupstyle = 'center'
+				this.ani = ['zoom-out', 'fade']
+				this.transClass = {
+					position: 'fixed',
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					flexDirection: 'column',
+					/* #endif */
+					bottom: 0,
+					left: 0,
+					right: 0,
+					top: 0,
+					justifyContent: 'center',
+					alignItems: 'center'
+				}
+				// TODO 兼容 type 属性 ,后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			},
+			left(type) {
+				this.popupstyle = 'left'
+				this.ani = ['slide-left']
+				this.transClass = {
+					position: 'fixed',
+					left: 0,
+					bottom: 0,
+					top: 0,
+					backgroundColor: this.bg,
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					flexDirection: 'column'
+					/* #endif */
+				}
+				// TODO 兼容 type 属性 ,后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			},
+			right(type) {
+				this.popupstyle = 'right'
+				this.ani = ['slide-right']
+				this.transClass = {
+					position: 'fixed',
+					bottom: 0,
+					right: 0,
+					top: 0,
+					backgroundColor: this.bg,
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					flexDirection: 'column'
+					/* #endif */
+				}
+				// TODO 兼容 type 属性 ,后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.uni-popup {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+
+		/* #endif */
+		&.top,
+		&.left,
+		&.right {
+			/* #ifdef H5 */
+			top: var(--window-top);
+			/* #endif */
+			/* #ifndef H5 */
+			top: 0;
+			/* #endif */
+		}
+
+		.uni-popup__wrapper {
+			/* #ifndef APP-NVUE */
+			display: block;
+			/* #endif */
+			position: relative;
+
+			/* iphonex 等安全区设置,底部安全区适配 */
+			/* #ifndef APP-NVUE */
+			// padding-bottom: constant(safe-area-inset-bottom);
+			// padding-bottom: env(safe-area-inset-bottom);
+			/* #endif */
+			&.left,
+			&.right {
+				/* #ifdef H5 */
+				padding-top: var(--window-top);
+				/* #endif */
+				/* #ifndef H5 */
+				padding-top: 0;
+				/* #endif */
+				flex: 1;
+			}
+		}
+	}
+
+	.fixforpc-z-index {
+		/* #ifndef APP-NVUE */
+		z-index: 999;
+		/* #endif */
+	}
+
+	.fixforpc-top {
+		top: 0;
+	}
 </style>

+ 15 - 15
uni_modules/uni-transition/changelog.md

@@ -3,18 +3,18 @@
 ## 1.3.0(2021-11-19)
 - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
 - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
-## 1.2.1(2021-09-27)
-- 修复 init 方法不生效的 Bug
-## 1.2.0(2021-07-30)
-- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
-## 1.1.1(2021-05-12)
-- 新增 示例地址
-- 修复 示例项目缺少组件的 Bug
-## 1.1.0(2021-04-22)
-- 新增 通过方法自定义动画
-- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
-- 优化 动画触发逻辑,使动画更流畅
-- 优化 支持单独的动画类型
-- 优化 文档示例
-## 1.0.2(2021-02-05)
-- 调整为 uni_modules 目录规范
+## 1.2.1(2021-09-27)
+- 修复 init 方法不生效的 Bug
+## 1.2.0(2021-07-30)
+- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.1(2021-05-12)
+- 新增 示例地址
+- 修复 示例项目缺少组件的 Bug
+## 1.1.0(2021-04-22)
+- 新增 通过方法自定义动画
+- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
+- 优化 动画触发逻辑,使动画更流畅
+- 优化 支持单独的动画类型
+- 优化 文档示例
+## 1.0.2(2021-02-05)
+- 调整为 uni_modules 目录规范

+ 111 - 111
uni_modules/uni-transition/components/uni-transition/createAnimation.js

@@ -1,128 +1,128 @@
-// const defaultOption = {
-// 	duration: 300,
-// 	timingFunction: 'linear',
-// 	delay: 0,
-// 	transformOrigin: '50% 50% 0'
-// }
-// #ifdef APP-NVUE
-const nvueAnimation = uni.requireNativePlugin('animation')
-// #endif
-class MPAnimation {
-	constructor(options, _this) {
-		this.options = options
-		this.animation = uni.createAnimation(options)
-		this.currentStepAnimates = {}
-		this.next = 0
-		this.$ = _this
-
-	}
-
-	_nvuePushAnimates(type, args) {
-		let aniObj = this.currentStepAnimates[this.next]
-		let styles = {}
-		if (!aniObj) {
-			styles = {
-				styles: {},
-				config: {}
-			}
-		} else {
-			styles = aniObj
-		}
-		if (animateTypes1.includes(type)) {
-			if (!styles.styles.transform) {
-				styles.styles.transform = ''
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		this.animation = uni.createAnimation(options)
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
 			}
 			let unit = ''
 			if(type === 'rotate'){
 				unit = 'deg'
-			}
-			styles.styles.transform += `${type}(${args+unit}) `
-		} else {
-			styles.styles[type] = `${args}`
-		}
-		this.currentStepAnimates[this.next] = styles
-	}
-	_animateRun(styles = {}, config = {}) {
-		let ref = this.$.$refs['ani'].ref
-		if (!ref) return
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
 		return new Promise((resolve, reject) => {
-			nvueAnimation.transition(ref, {
-				styles,
-				...config
-			}, res => {
-				resolve()
-			})
-		})
-	}
-
-	_nvueNextAnimate(animates, step = 0, fn) {
-		let obj = animates[step]
-		if (obj) {
-			let {
-				styles,
-				config
-			} = obj
-			this._animateRun(styles, config).then(() => {
-				step += 1
-				this._nvueNextAnimate(animates, step, fn)
-			})
-		} else {
-			this.currentStepAnimates = {}
-			typeof fn === 'function' && fn()
-			this.isEnd = true
-		}
-	}
-
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
 	step(config = {}) {
 		// #ifndef APP-NVUE
-		this.animation.step(config)
-		// #endif
-		// #ifdef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
 		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
 		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
-		this.next++
-		// #endif
-		return this
-	}
-
-	run(fn) {
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
 		// #ifndef APP-NVUE
-		this.$.animationData = this.animation.export()
+		this.$.animationData = this.animation.export()
 		this.$.timer = setTimeout(() => {
-			typeof fn === 'function' && fn()
-		}, this.$.durationTime)
-		// #endif
-		// #ifdef APP-NVUE
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
 		this.isEnd = false
 		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
-		if(!ref) return
-		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
-		this.next = 0
-		// #endif
-	}
-}
-
-
-const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
-	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
-	'translateZ'
-]
-const animateTypes2 = ['opacity', 'backgroundColor']
-const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
-animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
-	MPAnimation.prototype[type] = function(...args) {
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
 		// #ifndef APP-NVUE
 		this.animation[type](...args)
-		// #endif
-		// #ifdef APP-NVUE
-		this._nvuePushAnimates(type, args)
-		// #endif
-		return this
-	}
-})
-
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
 export function createAnimation(option, _this) {
-	if(!_this) return
-	clearTimeout(_this.timer)
-	return new MPAnimation(option, _this)
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
 }

+ 265 - 265
uni_modules/uni-transition/components/uni-transition/uni-transition.vue

@@ -1,277 +1,277 @@
-<template>
-	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
-</template>
-
-<script>
-import { createAnimation } from './createAnimation'
-
-/**
- * Transition 过渡动画
- * @description 简单过渡动画组件
- * @tutorial https://ext.dcloud.net.cn/plugin?id=985
- * @property {Boolean} show = [false|true] 控制组件显示或隐藏
- * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
- *  @value fade 渐隐渐出过渡
- *  @value slide-top 由上至下过渡
- *  @value slide-right 由右至左过渡
- *  @value slide-bottom 由下至上过渡
- *  @value slide-left 由左至右过渡
- *  @value zoom-in 由小到大过渡
- *  @value zoom-out 由大到小过渡
- * @property {Number} duration 过渡动画持续时间
- * @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
- */
-export default {
-	name: 'uniTransition',
-	emits:['click','change'],
-	props: {
-		show: {
-			type: Boolean,
-			default: false
-		},
-		modeClass: {
-			type: [Array, String],
-			default() {
-				return 'fade'
-			}
-		},
-		duration: {
-			type: Number,
-			default: 300
-		},
-		styles: {
-			type: Object,
-			default() {
-				return {}
-			}
+<template>
+	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+</template>
+
+<script>
+import { createAnimation } from './createAnimation'
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
+ */
+export default {
+	name: 'uniTransition',
+	emits:['click','change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {}
+			}
 		},
 		customClass:{
 			type: String,
 			default: ''
-		}
-	},
-	data() {
-		return {
-			isShow: false,
-			transform: '',
-			opacity: 1,
-			animationData: {},
-			durationTime: 300,
-			config: {}
-		}
-	},
-	watch: {
-		show: {
-			handler(newVal) {
-				if (newVal) {
-					this.open()
-				} else {
-					// 避免上来就执行 close,导致动画错乱
-					if (this.isShow) {
-						this.close()
-					}
-				}
-			},
-			immediate: true
-		}
-	},
-	computed: {
-		// 生成样式数据
-		stylesObject() {
-			let styles = {
-				...this.styles,
-				'transition-duration': this.duration / 1000 + 's'
-			}
-			let transform = ''
-			for (let i in styles) {
-				let line = this.toLine(i)
-				transform += line + ':' + styles[i] + ';'
-			}
-			return transform
-		},
-		// 初始化动画条件
-		transformStyles() {
-			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
-		}
-	},
-	created() {
-		// 动画默认配置
-		this.config = {
-			duration: this.duration,
-			timingFunction: 'ease',
-			transformOrigin: '50% 50%',
-			delay: 0
-		}
-		this.durationTime = this.duration
-	},
-	methods: {
-		/**
-		 *  ref 触发 初始化动画
-		 */
-		init(obj = {}) {
-			if (obj.duration) {
-				this.durationTime = obj.duration
-			}
-			this.animation = createAnimation(Object.assign(this.config, obj),this)
-		},
-		/**
-		 * 点击组件触发回调
-		 */
-		onClick() {
-			this.$emit('click', {
-				detail: this.isShow
-			})
-		},
-		/**
-		 * ref 触发 动画分组
-		 * @param {Object} obj
-		 */
-		step(obj, config = {}) {
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		}
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open()
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close()
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			}
+			let transform = ''
+			for (let i in styles) {
+				let line = this.toLine(i)
+				transform += line + ':' + styles[i] + ';'
+			}
+			return transform
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		}
+		this.durationTime = this.duration
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj),this)
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
 			if (!this.animation) return
-			for (let i in obj) {
+			for (let i in obj) {
 				try {
 					if(typeof obj[i] === 'object'){
 						this.animation[i](...obj[i])
 					}else{
 						this.animation[i](obj[i])
-					}
-				} catch (e) {
-					console.error(`方法 ${i} 不存在`)
-				}
-			}
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`)
+				}
+			}
 			this.animation.step(config)
-			return this
-		},
-		/**
-		 *  ref 触发 执行动画
-		 */
-		run(fn) {
-			if (!this.animation) return
-			this.animation.run(fn)
-		},
-		// 开始过度动画
-		open() {
-			clearTimeout(this.timer)
-			this.transform = ''
-			this.isShow = true
-			let { opacity, transform } = this.styleInit(false)
-			if (typeof opacity !== 'undefined') {
-				this.opacity = opacity
-			}
-			this.transform = transform
-			// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
-			this.$nextTick(() => {
-				// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
-				this.timer = setTimeout(() => {
-					this.animation = createAnimation(this.config, this)
-					this.tranfromInit(false).step()
-					this.animation.run()
-					this.$emit('change', {
-						detail: this.isShow
-					})
-				}, 20)
-			})
-		},
-		// 关闭过度动画
-		close(type) {
-			if (!this.animation) return
-			this.tranfromInit(true)
-				.step()
-				.run(() => {
-					this.isShow = false
-					this.animationData = null
-					this.animation = null
-					let { opacity, transform } = this.styleInit(false)
-					this.opacity = opacity || 1
-					this.transform = transform
-					this.$emit('change', {
-						detail: this.isShow
-					})
-				})
-		},
-		// 处理动画开始前的默认样式
-		styleInit(type) {
-			let styles = {
-				transform: ''
-			}
-			let buildStyle = (type, mode) => {
-				if (mode === 'fade') {
-					styles.opacity = this.animationType(type)[mode]
-				} else {
-					styles.transform += this.animationType(type)[mode] + ' '
-				}
-			}
-			if (typeof this.modeClass === 'string') {
-				buildStyle(type, this.modeClass)
-			} else {
-				this.modeClass.forEach(mode => {
-					buildStyle(type, mode)
-				})
-			}
-			return styles
-		},
-		// 处理内置组合动画
-		tranfromInit(type) {
-			let buildTranfrom = (type, mode) => {
-				let aniNum = null
-				if (mode === 'fade') {
-					aniNum = type ? 0 : 1
-				} else {
-					aniNum = type ? '-100%' : '0'
-					if (mode === 'zoom-in') {
-						aniNum = type ? 0.8 : 1
-					}
-					if (mode === 'zoom-out') {
-						aniNum = type ? 1.2 : 1
-					}
-					if (mode === 'slide-right') {
-						aniNum = type ? '100%' : '0'
-					}
-					if (mode === 'slide-bottom') {
-						aniNum = type ? '100%' : '0'
-					}
-				}
-				this.animation[this.animationMode()[mode]](aniNum)
-			}
-			if (typeof this.modeClass === 'string') {
-				buildTranfrom(type, this.modeClass)
-			} else {
-				this.modeClass.forEach(mode => {
-					buildTranfrom(type, mode)
-				})
-			}
-
-			return this.animation
-		},
-		animationType(type) {
-			return {
-				fade: type ? 1 : 0,
-				'slide-top': `translateY(${type ? '0' : '-100%'})`,
-				'slide-right': `translateX(${type ? '0' : '100%'})`,
-				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
-				'slide-left': `translateX(${type ? '0' : '-100%'})`,
-				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
-				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
-			}
-		},
-		// 内置动画类型与实际动画对应字典
-		animationMode() {
-			return {
-				fade: 'opacity',
-				'slide-top': 'translateY',
-				'slide-right': 'translateX',
-				'slide-bottom': 'translateY',
-				'slide-left': 'translateX',
-				'zoom-in': 'scale',
-				'zoom-out': 'scale'
-			}
-		},
-		// 驼峰转中横线
-		toLine(name) {
-			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
-		}
-	}
-}
-</script>
-
+			return this
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return
+			this.animation.run(fn)
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer)
+			this.transform = ''
+			this.isShow = true
+			let { opacity, transform } = this.styleInit(false)
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity
+			}
+			this.transform = transform
+			// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this)
+					this.tranfromInit(false).step()
+					this.animation.run()
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				}, 20)
+			})
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false
+					this.animationData = null
+					this.animation = null
+					let { opacity, transform } = this.styleInit(false)
+					this.opacity = opacity || 1
+					this.transform = transform
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			}
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode]
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' '
+				}
+			}
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode)
+				})
+			}
+			return styles
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1
+				} else {
+					aniNum = type ? '-100%' : '0'
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0'
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0'
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum)
+			}
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode)
+				})
+			}
+
+			return this.animation
+		},
+		animationType(type) {
+			return {
+				fade: type ? 1 : 0,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			}
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			}
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+		}
+	}
+}
+</script>
+
 <style></style>

+ 86 - 86
uni_modules/uni-transition/package.json

@@ -1,87 +1,87 @@
-{
-  "id": "uni-transition",
-  "displayName": "uni-transition 过渡动画",
-  "version": "1.3.1",
-  "description": "元素的简单过渡动画",
-  "keywords": [
-    "uni-ui",
-    "uniui",
-    "动画",
-    "过渡",
-    "过渡动画"
-],
-  "repository": "https://github.com/dcloudio/uni-ui",
-  "engines": {
-    "HBuilderX": ""
-  },
-  "directories": {
-    "example": "../../temps/example_temps"
-  },
-  "dcloudext": {
-    "category": [
-      "前端组件",
-      "通用组件"
-    ],
-    "sale": {
-      "regular": {
-        "price": "0.00"
-      },
-      "sourcecode": {
-        "price": "0.00"
-      }
-    },
-    "contact": {
-      "qq": ""
-    },
-    "declaration": {
-      "ads": "无",
-      "data": "无",
-      "permissions": "无"
-    },
-    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
-  },
-  "uni_modules": {
-    "dependencies": ["uni-scss"],
-    "encrypt": [],
-    "platforms": {
-      "cloud": {
-        "tcb": "y",
-        "aliyun": "y"
-      },
-      "client": {
-        "App": {
-          "app-vue": "y",
-          "app-nvue": "y"
-        },
-        "H5-mobile": {
-          "Safari": "y",
-          "Android Browser": "y",
-          "微信浏览器(Android)": "y",
-          "QQ浏览器(Android)": "y"
-        },
-        "H5-pc": {
-          "Chrome": "y",
-          "IE": "y",
-          "Edge": "y",
-          "Firefox": "y",
-          "Safari": "y"
-        },
-        "小程序": {
-          "微信": "y",
-          "阿里": "y",
-          "百度": "y",
-          "字节跳动": "y",
-          "QQ": "y"
-        },
-        "快应用": {
-          "华为": "u",
-          "联盟": "u"
-        },
-        "Vue": {
-            "vue2": "y",
-            "vue3": "y"
-        }
-      }
-    }
-  }
+{
+  "id": "uni-transition",
+  "displayName": "uni-transition 过渡动画",
+  "version": "1.3.1",
+  "description": "元素的简单过渡动画",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "动画",
+    "过渡",
+    "过渡动画"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
 }

+ 10 - 10
uni_modules/uni-transition/readme.md

@@ -1,11 +1,11 @@
-
-
-## Transition 过渡动画
-> **组件名:uni-transition**
-> 代码块: `uTransition`
-
-
-元素过渡动画
-
-### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
+
+
+## Transition 过渡动画
+> **组件名:uni-transition**
+> 代码块: `uTransition`
+
+
+元素过渡动画
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
 #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839