emis-app/components/buns-edit-sheet/buns-edit-sheet.vue

<template>
	<tpx-dialog :show="show" :title="title" @onClose="handleCloseModal()" rootStyle="min-height:auto;"
		:contentStyle="contentStyle"
	>
		<view :style="cptStyle">
			<tpx-layout>
				<template v-slot:body>
					<view v-if="contShow" class="pl-30 pr-30">
						<slot :value="submitVals"></slot>
					</view>
				</template>
				
				<template v-slot:footer>
					<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
						<u-button @click="handleSubmitValue()" type="primary" size="large" shape="circle" 
							custom-style="height:80rpx;font-size: 30rpx;"
						>确认</u-button>
					</view>
				</template>
			</tpx-layout>
		</view>
	</tpx-dialog>
</template>

<script>
	
	export default {
		computed:{
			cptStyle(){
				let sty = `position: relative;height: calc(${this.percentHeight}vh);`
				return sty
			}
		},
		components: { },
		watch: {
			show(v){
				if(v) {
					this.submitVals = JSON.parse(JSON.stringify(this.value))
				}
				setTimeout(()=> {
					// 防止 弹框内容组件不更新、有缓存
					this.contShow = v
				}, 350)
			}
		},
		props: {
			title: {
				default () {
					return ''
				}
			},
			contentStyle: {
				default () {
					return 'padding:0;'
				}
			},
			percentHeight: {
				default () {
					return 60
				}
			},
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return {
					}
				}
			},
			okCloseModal: {
				default () {
					return true
				}
			},
			sureCheckFun: {
				default () {
					return null
				}
			},
		},
		data() {
			return {
				contShow: false,
				submitVals: {}
			}
		},
		created() {

		},
		onHide() {
		},
		unmounted() {
		},

		methods: {
			handleCloseModal() {
				this.$emit('update:show', false)
				this.$emit('onClose')
			},
			async handleSubmitValue() {
				const val = this.submitVals
				if(this.sureCheckFun) {
					let bl = await this.sureCheckFun(val)
					if(!bl){
						return false
					}
				}
				this.$emit('onSure', val)
				this.$emit('update:value', val)
				this.okCloseModal && this.handleCloseModal()
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		padding: 10rpx 0 30rpx 0;
	}
	.jsfm-item{
		margin-top: 30rpx;
	}
	
</style>