6155部分功能
This commit is contained in:
liub
381
components/MessagePopup/MessagePopup.vue
Normal file
381
components/MessagePopup/MessagePopup.vue
Normal file
@ -0,0 +1,381 @@
|
||||
<template>
|
||||
<view class="message-popup" v-if="visible">
|
||||
<view class="popup-mask" @click="handleMaskClick"></view>
|
||||
<view
|
||||
class="popup-content"
|
||||
:style="{
|
||||
backgroundColor: bgColor || getTypeStyle('bgColor'),
|
||||
borderColor: borderColor || getTypeStyle('borderColor'),
|
||||
color: textColor || getTypeStyle('textColor')
|
||||
}"
|
||||
>
|
||||
<view v-if="showHeader&&headerTxt" class="header"
|
||||
|
||||
>{{headerTxt}}</view>
|
||||
|
||||
<view v-if="visibleClose" class="rightClose"
|
||||
:style="{color:textColor || getTypeStyle('textColor')}"
|
||||
@click="closeClick"
|
||||
>x</view>
|
||||
<view v-if="!visiblePrompt">
|
||||
<image
|
||||
v-if="iconUrl"
|
||||
:src="iconUrl"
|
||||
mode="aspectFit"
|
||||
class="popup-icon"
|
||||
:style="{ tintColor: textColor || getTypeStyle('textColor') }"
|
||||
></image>
|
||||
<view class="popup-message">{{ message }}</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else class="popup-prompt">
|
||||
<text class="popup-prompt-title">{{ promptTitle || '请输入信息' }}</text>
|
||||
<input
|
||||
class="popup-prompt-input"
|
||||
:placeholder="promptPlaceholder"
|
||||
:value="modelValue"
|
||||
@input="handleInput"
|
||||
@confirm="handleButtonClick"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="popBtnContent">
|
||||
|
||||
<view
|
||||
class="popup-button-cancel"
|
||||
:style="{display:showCancel?'block':'none'}"
|
||||
@click="handleCancelClick"
|
||||
>{{ buttonCancelText?buttonCancelText:'取消' }}</view>
|
||||
|
||||
<view
|
||||
class="popup-button"
|
||||
:style="{
|
||||
backgroundColor: buttonBgColor || getTypeStyle('buttonBgColor'),
|
||||
color: buttonTextColor || getTypeStyle('buttonTextColor')
|
||||
}"
|
||||
@click="handleButtonClick"
|
||||
>{{ buttonText }}</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MessagePopup',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
visibleClose:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
visiblePrompt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
promptTitle: String,
|
||||
promptPlaceholder: {
|
||||
type: String,
|
||||
default: "请输入"
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
validator: value => ['success', 'error', 'info','custom'].includes(value)
|
||||
},
|
||||
bgColor: String,
|
||||
borderColor: String,
|
||||
textColor: String,
|
||||
buttonBgColor: String,
|
||||
buttonTextColor: String,
|
||||
iconUrl: String,
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
buttonCancelText:{
|
||||
type:String,
|
||||
default:'取消'
|
||||
},
|
||||
showCancel:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
showHeader:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
headerTxt:{
|
||||
type:String,
|
||||
default:""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: this.modelValue
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听外部值变化
|
||||
modelValue(newVal) {
|
||||
this.inputValue = newVal
|
||||
},
|
||||
// 监听模式切换
|
||||
visiblePrompt(newVal) {
|
||||
console.log('[MessagePopup] visiblePrompt changed to:', newVal)
|
||||
// 重置输入值
|
||||
if (newVal) {
|
||||
this.inputValue = this.modelValue
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getTypeStyle(styleType) {
|
||||
const styles = {
|
||||
success: {
|
||||
bgColor: '#f0fff0',
|
||||
borderColor: '#52c41a',
|
||||
textColor: '#389e0d',
|
||||
buttonBgColor: '#52c41a',
|
||||
buttonTextColor: '#FFFFFF'
|
||||
},
|
||||
error: {
|
||||
bgColor: '#fff0f0',
|
||||
borderColor: '#ff4d4f',
|
||||
textColor: '#cf1322',
|
||||
buttonBgColor: '#ff4d4f',
|
||||
buttonTextColor: '#FFFFFF'
|
||||
},
|
||||
info: {
|
||||
bgColor: '#e6f7ff',
|
||||
borderColor: '#1890ff',
|
||||
textColor: '#0050b3',
|
||||
buttonBgColor: '#1890ff',
|
||||
buttonTextColor: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
return styles[this.type][styleType]
|
||||
},
|
||||
handleButtonClick() {
|
||||
console.log('[MessagePopup] Button clicked with value:', this.inputValue)
|
||||
this.$emit('buttonClick', this.inputValue)
|
||||
},
|
||||
handleMaskClick() {
|
||||
console.log('[MessagePopup] Mask clicked')
|
||||
this.$emit('maskClick')
|
||||
},
|
||||
closeClick(){
|
||||
this.$emit('closePop')
|
||||
},
|
||||
handleCancelClick(){
|
||||
this.$emit('cancelPop');
|
||||
},
|
||||
handleInput(e) {
|
||||
|
||||
this.inputValue = e.detail.value
|
||||
this.$emit('update:modelValue', this.inputValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.message-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border-radius: 12px;
|
||||
padding: 30rpx;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
}
|
||||
.header{
|
||||
width:100%;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
font-family: PingFang SC;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
letter-spacing: 0.07px;
|
||||
text-align: center;
|
||||
}
|
||||
.rightClose{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.popup-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin: 20rpx auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.popup-message {
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
padding: 20rpx 0rpx 30rpx 0rpx;
|
||||
|
||||
|
||||
font-weight: 400;
|
||||
|
||||
letter-spacing: 0.07px;
|
||||
}
|
||||
|
||||
.popup-prompt {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-prompt-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.popup-prompt-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.popBtnContent{
|
||||
width:100%;
|
||||
height: 60rpx;
|
||||
margin-top: 20rpx;
|
||||
display: flex
|
||||
;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
.popup-button {
|
||||
width: 30%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 44rpx;
|
||||
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 4rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.popup-button-cancel{
|
||||
width: 30%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 44rpx;
|
||||
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 4rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
|
||||
background-color: #00000000;
|
||||
|
||||
color: #FFFFFFde;
|
||||
}
|
||||
|
||||
.popup-prompt{
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
|
||||
.popup-prompt-title{
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: right;
|
||||
width: 30%;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
white-space:nowrap;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
.popup-prompt-input{
|
||||
float: left;
|
||||
width: 70%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
color: rgba(255, 255, 255, 0.87) ;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 8rpx;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user