160 lines
3.4 KiB
Vue
160 lines
3.4 KiB
Vue
<template>
|
||
<view v-if="visible" class="device-name-modal-mask" @tap="onMask">
|
||
<view class="device-name-modal-sheet" @tap.stop>
|
||
<view class="device-name-modal-head">
|
||
<text class="device-name-modal-title">{{ title }}</text>
|
||
<text class="device-name-modal-close" @tap="onClose">×</text>
|
||
</view>
|
||
<input
|
||
class="device-name-modal-input"
|
||
type="text"
|
||
:value="localValue"
|
||
:placeholder="placeholder"
|
||
placeholder-style="color:#BFBFBF"
|
||
maxlength="32"
|
||
confirm-type="done"
|
||
@input="onInput"
|
||
/>
|
||
<view class="device-name-modal-actions">
|
||
<view class="device-name-modal-btn device-name-modal-cancel" @tap="onClose">{{ cancelText }}</view>
|
||
<view class="device-name-modal-btn device-name-modal-ok" @tap="onOk">{{ confirmText }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DeviceNameEditModal',
|
||
props: {
|
||
visible: { type: Boolean, default: false },
|
||
value: { type: String, default: '' },
|
||
title: { type: String, default: '' },
|
||
placeholder: { type: String, default: '' },
|
||
cancelText: { type: String, default: '' },
|
||
confirmText: { type: String, default: '' },
|
||
closeOnMask: { type: Boolean, default: true }
|
||
},
|
||
data() {
|
||
return {
|
||
localValue: ''
|
||
}
|
||
},
|
||
watch: {
|
||
visible(v) {
|
||
if (v) {
|
||
this.localValue = this.value === undefined || this.value === null ? '' : String(this.value)
|
||
}
|
||
},
|
||
value(v) {
|
||
if (this.visible) {
|
||
this.localValue = v === undefined || v === null ? '' : String(v)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
onInput(e) {
|
||
this.localValue = e.detail.value
|
||
},
|
||
onClose() {
|
||
this.$emit('close')
|
||
},
|
||
onMask() {
|
||
if (this.closeOnMask) this.$emit('close')
|
||
},
|
||
onOk() {
|
||
this.$emit('confirm', (this.localValue || '').trim())
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 距顶部 500rpx 展示，不采用底部上滑 */
|
||
.device-name-modal-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
z-index: 10050;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: flex-start;
|
||
padding: 500rpx 32rpx 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.device-name-modal-sheet {
|
||
width: 100%;
|
||
max-width: 750rpx;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 32rpx 50rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
animation: deviceNameEditModalIn 0.28s ease;
|
||
}
|
||
@keyframes deviceNameEditModalIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.96);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.device-name-modal-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.device-name-modal-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #3d3d3d;
|
||
}
|
||
.device-name-modal-close {
|
||
font-size: 48rpx;
|
||
line-height: 1;
|
||
color: #999;
|
||
padding: 8rpx;
|
||
}
|
||
.device-name-modal-input {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
color: #3d3d3d;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.device-name-modal-actions {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
.device-name-modal-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
.device-name-modal-cancel {
|
||
background: #f0f0f0;
|
||
color: #666;
|
||
}
|
||
.device-name-modal-ok {
|
||
background: #3d3d3d;
|
||
color: #fff;
|
||
}
|
||
</style>
|