83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<template>
|
|
<view>
|
|
<up-popup :show="show" mode="center" round="32rpx" @close="close" :safeAreaInsetBottom="false">
|
|
<view class="bg-#f3f3f3 rounded-2xl">
|
|
<view class="py-4 text-center font-bold text-lg">{{ title }}</view>
|
|
<view class="px-4">
|
|
<up-input
|
|
:customStyle="{
|
|
padding: '0 28rpx',
|
|
outline: 'none',
|
|
width: '450rpx',
|
|
height: '80rpx',
|
|
backgroundColor: '#FFFFFF',
|
|
border: 0
|
|
}"
|
|
placeholder-class="!text-base !line-height-[80rpx]"
|
|
:placeholder="placeholder"
|
|
:cursorSpacing="130"
|
|
border="none"
|
|
:modelValue="text"
|
|
:maxlength="maxlength"
|
|
:type="type"
|
|
@change="change"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="flex justify-between items-center border-t-solid border-t-2 text-base font-bold border-t-gray-200 mt-4 text-#63b8af"
|
|
>
|
|
<view
|
|
@click="close"
|
|
class="text-center border-r-solid border-r-2 border-e-gray-200 w-50% box-border py-2"
|
|
>取消</view
|
|
>
|
|
<view @click="confirm" class="text-center w-50% py-2">确定</view>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const show = ref(false)
|
|
const text = ref('')
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: '请输入' },
|
|
placeholder: { type: String, default: '请输入' },
|
|
value: { type: String, default: '' },
|
|
autoClose: { type: Boolean, default: true },
|
|
maxlength: { type: Number, default: 50 },
|
|
type: { type: String, default: 'text' }
|
|
})
|
|
|
|
const emits = defineEmits(['confirm'])
|
|
|
|
const open = () => {
|
|
text.value = props.value
|
|
show.value = true
|
|
}
|
|
|
|
const close = () => {
|
|
show.value = false
|
|
}
|
|
|
|
const change = e => {
|
|
text.value = e.target.value
|
|
}
|
|
|
|
const confirm = () => {
|
|
emits('confirm', text.value)
|
|
if (props.autoClose) {
|
|
show.value = false
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
open,
|
|
close
|
|
})
|
|
</script>
|