73 lines
1.8 KiB
Vue
73 lines
1.8 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">
|
|
<input
|
|
class="bg-white border-none outline-none rounded-md h-80 w-450 text-base px-4"
|
|
placeholder-class="text-base line-height-[80rpx]"
|
|
:focus="show"
|
|
:placeholder="placeholder"
|
|
:value="text"
|
|
@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 }
|
|
})
|
|
|
|
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>
|
|
|
|
<style scoped lang="scss"></style>
|