151 lines
3.0 KiB
Vue
151 lines
3.0 KiB
Vue
<template>
|
|
<view v-if="visible" class="home-name-dialog">
|
|
<view class="home-name-dialog__mask" @tap="onCancel" />
|
|
<view class="home-name-dialog__panel" @tap.stop>
|
|
<text class="home-name-dialog__title">家庭名称</text>
|
|
<view class="home-name-dialog__input-wrap">
|
|
<input
|
|
v-model="inputValue"
|
|
class="home-name-dialog__input"
|
|
type="text"
|
|
maxlength="10"
|
|
placeholder="请输入家庭名称"
|
|
placeholder-class="home-name-dialog__placeholder"
|
|
:focus="visible"
|
|
/>
|
|
</view>
|
|
<view class="home-name-dialog__footer">
|
|
<view class="home-name-dialog__btn" @tap.stop="onCancel">
|
|
<text class="home-name-dialog__btn-text">取消</text>
|
|
</view>
|
|
<view class="home-name-dialog__divider-v" />
|
|
<view class="home-name-dialog__btn" @tap.stop="onConfirm">
|
|
<text class="home-name-dialog__btn-text home-name-dialog__btn-text--primary">
|
|
确定
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
value: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:visible': [value: boolean]
|
|
confirm: [name: string]
|
|
}>()
|
|
|
|
const inputValue = ref('')
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(show) => {
|
|
if (show) inputValue.value = props.value
|
|
},
|
|
)
|
|
|
|
function onCancel() {
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
function onConfirm() {
|
|
emit('confirm', inputValue.value)
|
|
emit('update:visible', false)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-name-dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.home-name-dialog__mask {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.home-name-dialog__panel {
|
|
position: relative;
|
|
width: 560rpx;
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.home-name-dialog__title {
|
|
display: block;
|
|
padding: 48rpx 40rpx 32rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.home-name-dialog__input-wrap {
|
|
margin: 0 40rpx 40rpx;
|
|
padding: 0 28rpx;
|
|
height: 88rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.home-name-dialog__input {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
font-size: 28rpx;
|
|
color: $color-text;
|
|
}
|
|
|
|
.home-name-dialog__placeholder {
|
|
color: #c0c4cc;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.home-name-dialog__footer {
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-top: 1rpx solid #ebedf0;
|
|
}
|
|
|
|
.home-name-dialog__btn {
|
|
flex: 1;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.home-name-dialog__divider-v {
|
|
width: 1rpx;
|
|
background: #ebedf0;
|
|
}
|
|
|
|
.home-name-dialog__btn-text {
|
|
font-size: 32rpx;
|
|
color: $color-text;
|
|
line-height: 1;
|
|
}
|
|
|
|
.home-name-dialog__btn-text--primary {
|
|
color: #21c25e;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|