210新增自动报警弹框提示,历史记录页面功能
This commit is contained in:
@ -1,87 +1,62 @@
|
||||
<template>
|
||||
<view class="agreement-mask" v-if="show" @click.stop="closePopup">
|
||||
<!-- 弹窗主体:支持自定义边框、背景 -->
|
||||
<view
|
||||
class="agreement-popup"
|
||||
@click.stop
|
||||
:style="{
|
||||
<view class="agreement-popup" @click.stop :style="{
|
||||
border: popupBorder,
|
||||
backgroundColor: popupBg,
|
||||
borderRadius: popupRadius
|
||||
}"
|
||||
:class="popupClass"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标:支持自定义大小、边距 -->
|
||||
<image
|
||||
v-if="showIcon && icon"
|
||||
:src="icon"
|
||||
mode="aspectFit"
|
||||
class="svg"
|
||||
:style="iconStyle"
|
||||
></image>
|
||||
|
||||
<view class="text-content">
|
||||
<!-- 动态标题:支持自定义颜色、字体大小 -->
|
||||
<view
|
||||
class="popup-Title"
|
||||
v-if="title"
|
||||
:style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
}" :class="popupClass">
|
||||
<view class="text-content">
|
||||
<!-- 动态标题:支持自定义颜色、字体大小 -->
|
||||
<view class="popup-Title" v-if="title" :style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}">
|
||||
{{ title }}
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标:支持自定义大小、边距 -->
|
||||
<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg" :style="iconStyle"></image>
|
||||
|
||||
|
||||
|
||||
<!-- 动态消息内容:支持自定义颜色、换行、字体大小 -->
|
||||
<view
|
||||
class="popup-Message"
|
||||
v-if="message"
|
||||
:style="{
|
||||
<view class="popup-Message" v-if="message" :style="{
|
||||
color: messageColor,
|
||||
fontSize: messageSize,
|
||||
whiteSpace: messageWrap ? 'normal' : 'nowrap',
|
||||
padding: messagePadding
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ message }}
|
||||
</view>
|
||||
<!-- 倒计时显示 -->
|
||||
<!-- <view v-if="showCountdown" class="countdown" :style="countdownStyle">
|
||||
{{ countdownFormat.replace('{time}', currentCountdown) }}
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 按钮组:支持自定义按钮样式 -->
|
||||
<view class="popup-buttons" :style="{ marginTop: buttonGroupMargin }">
|
||||
<button
|
||||
v-if="showCancel"
|
||||
class="btn cancelBtn"
|
||||
@click="handleCancel"
|
||||
:style="{
|
||||
<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel" :style="{
|
||||
border: cancelBtnBorder,
|
||||
color: cancelBtnColor,
|
||||
backgroundColor: cancelBtnBg,
|
||||
fontSize: cancelBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="cancelBtnClass"
|
||||
>
|
||||
}" :class="cancelBtnClass">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn agreeBtn"
|
||||
@click="handleConfirm"
|
||||
:style="{
|
||||
|
||||
<button class="btn agreeBtn" @click="handleConfirm" :style="{
|
||||
backgroundColor: confirmBtnBg,
|
||||
color: confirmBtnColor,
|
||||
fontSize: confirmBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="confirmBtnClass"
|
||||
>
|
||||
}" :class="confirmBtnClass">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</view>
|
||||
@ -106,6 +81,10 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showCountdown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
@ -131,7 +110,7 @@
|
||||
type: Boolean,
|
||||
default: false // 默认不换行,true则自动换行
|
||||
},
|
||||
|
||||
|
||||
// 弹窗样式自定义
|
||||
popupBorder: {
|
||||
type: String,
|
||||
@ -149,7 +128,7 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
|
||||
// 标题样式自定义
|
||||
titleColor: {
|
||||
type: String,
|
||||
@ -163,7 +142,7 @@
|
||||
type: String,
|
||||
default: '10rpx 0 10rpx'
|
||||
},
|
||||
|
||||
|
||||
// 消息样式自定义
|
||||
messageColor: {
|
||||
type: String,
|
||||
@ -177,7 +156,7 @@
|
||||
type: String,
|
||||
default: '10rpx 20rpx 30rpx'
|
||||
},
|
||||
|
||||
|
||||
// 图标样式自定义
|
||||
iconStyle: {
|
||||
type: Object,
|
||||
@ -187,7 +166,7 @@
|
||||
marginBottom: '20rpx'
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 按钮组样式
|
||||
buttonGroupMargin: {
|
||||
type: String,
|
||||
@ -201,7 +180,7 @@
|
||||
type: String,
|
||||
default: '0 10rpx'
|
||||
},
|
||||
|
||||
|
||||
// 确认按钮样式
|
||||
confirmBtnBg: {
|
||||
type: String,
|
||||
@ -219,7 +198,7 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
|
||||
// 取消按钮样式
|
||||
cancelBtnBorder: {
|
||||
type: String,
|
||||
|
@ -22,9 +22,17 @@
|
||||
<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
|
||||
{{ rightText }}
|
||||
</text>
|
||||
<!-- 显示多个图标 -->
|
||||
<template v-if="rightIcons && rightIcons.length > 0">
|
||||
<image v-for="(icon, index) in rightIcons" :key="index" :src="icon.src"
|
||||
@click="handleIconClick(index)" class="pathIMG" :style="{
|
||||
width: icon.size || '40rpx',
|
||||
height: icon.size || '40rpx',
|
||||
marginLeft: index > 0 ? '20rpx' : '0'
|
||||
}" />
|
||||
</template>
|
||||
<!-- 或显示图标 -->
|
||||
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" mode=""
|
||||
class="pathIMG">
|
||||
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" class="pathIMG">
|
||||
</image>
|
||||
</slot>
|
||||
</view>
|
||||
@ -60,6 +68,11 @@
|
||||
rightIconSize: { // 图标大小
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
rightIcons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
// 格式: [{src: '/path/icon1.png'}, {src: '/path/icon2.png'}]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -76,6 +89,10 @@
|
||||
},
|
||||
handleRightClick() {
|
||||
this.$emit('right-click'); // 触发右侧点击事件
|
||||
},
|
||||
// 新增图标点击方法
|
||||
handleIconClick(index) {
|
||||
this.$emit('icon-click', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user