glhcp/business/components/modal/modal.vue

155 lines
4.4 KiB
Vue
Raw Normal View History

2023-08-10 06:59:52 +00:00
<template>
<view>
<u-popup v-model="inputValue" :zIndex="999999" mode="center">
<view class="bg-white popup">
<view class="title">{{title}}</view>
<view class="content line-3" :style="{'height': height}">
<slot></slot>
</view>
<view class="footer flex row-around">
<button v-if="cancelShow" class="btn hollow flex row-center normal" @click="cancel">{{cancelText}}</button>
<button :style="{'width': cancelShow==false?'100%':'220rpx'}" class="btn solid flex row-center normal" @click="confirm">{{confirmText}}</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false
},
cancelShow: {
type: Boolean,
default: true
},
title: {
type: String,
default: '提示'
},
height: {
type: String,
default: '310rpx'
},
confirmText: {
type: String,
default: '确认'
},
cancelText: {
type: String,
default: '取消'
},
},
watch: {
value(val1, val2) {
// 只有value的改变是来自外部的时候才去同步inputVal的值否则会造成循环错误
if (!this.changeFromInner) {
if (this.inputValue == val1) return
this.inputValue = val1;
// 进行this.$nextTick延时
this.$nextTick(function() {
this.changeFromInner = false;
})
}
},
inputValue(val1, v2) {
if(this.isFistVal) return
this.changeFromInner = true;
// 一定时间内清除changeFromInner标记否则内部值改变后
// 外部通过程序修改value值将会无效
this.innerChangeTimer = setTimeout(() => {
this.changeFromInner = false;
}, 150);
this.$emit('input', val1)
}
},
computed: {
// 弹窗Popup显示状态
show: {
get: function() {
return this.value
},
set: function(value) {
this.$emit('input', value)
},
}
},
data() {
return {
inputValue: false,
changeFromInner: false, // 值发生变化,是来自内部还是外部
isFistVal: true
}
},
created() {
this.inputValue = this.value;
this.$nextTick(function() {
this.isFistVal = false
})
},
methods: {
onTrigger() {
},
cancel() {
this.inputValue = false;
this.$emit('cancel')
},
confirm() {
this.inputValue = false;
this.$emit('confirm')
}
}
}
</script>
<style lang="scss" scoped>
.popup {
width: 600rpx;
border-radius: 12rpx;
.title {
padding: 30rpx 0;
font-size: $-font-size-md;
text-align: center;
color: #101010;
font-weight: 500;
}
.content {
width: 600rpx;
word-wrap:break-word;
padding: 0 40rpx;
}
.footer {
padding: 24rpx;
.btn {
width: 220rpx;
height: 68rpx;
border-radius: 8rpx;
font-size: $-font-size-sm;
}
.solid {
color: $-color-white;
background-color: #40AFFA;
}
.hollow {
color: $-color-lighter;
border: 1px solid #DBDBDB;
}
}
}
</style>