generated from thzxcx/vue3
103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<!--
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-06-25 15:55:08
|
|
* @LastEditors: peerless_hero peerless_hero@outlook.com
|
|
* @LastEditTime: 2023-07-11 04:02:58
|
|
* @FilePath: \uni\packages\prompt\index.vue
|
|
* @Description:
|
|
*
|
|
-->
|
|
<template>
|
|
<View v-show="show" h-100vh w-750rpx relative bg="#818181" overflow-hidden z-1000 @click="cancel">
|
|
<View rounded-t-48rpx w-750rpx absolute bottom-0 bg-white z-1001>
|
|
<View mt-32rpx mb-24rpx mx-48rpx fs-30 font-400>
|
|
{{ title }}
|
|
</view>
|
|
<View text-center mx-48rpx>
|
|
<textarea
|
|
v-model="value"
|
|
w-654rpx
|
|
:placeholder="placeholder"
|
|
border-1rpx
|
|
border-solid
|
|
border="#dcdcdc"
|
|
placeholder-class="textarea-placeholder"
|
|
w-full
|
|
rounded-8rpx
|
|
rows="5"
|
|
:maxlength="maxlength"
|
|
/>
|
|
<button
|
|
w-654rpx
|
|
h-80rpx
|
|
color-white
|
|
border="none"
|
|
bg="#2979ff"
|
|
rounded-8rpx
|
|
@click="confirm"
|
|
>
|
|
{{ confirmText }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Prompt">
|
|
import { ref } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** 标题 */
|
|
title: string
|
|
/** 是否显示 */
|
|
show?: boolean
|
|
/** 文本框绑定的值 */
|
|
textarea?: string | number
|
|
/** 输入框的提示文字 */
|
|
placeholder?: string
|
|
/** 确认按钮的文字 */
|
|
confirmText?: string
|
|
/** 限制输入字符数 */
|
|
maxlength?: number | string
|
|
radio?: Array<{ text?: string; value?: number | string }>
|
|
}>(),
|
|
{
|
|
show: false,
|
|
radio: () => [],
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
/** 确定事件 */
|
|
(event: 'confirm'): void
|
|
/** 取消事件 */
|
|
(event: 'cancel'): void
|
|
/** 更新show */
|
|
(event: 'update:show', show: boolean): void
|
|
/** 更新textarea */
|
|
(event: 'update:textarea', value: string): void
|
|
/** 更新radio */
|
|
(event: 'update:radio', value: string | number): void
|
|
}>()
|
|
|
|
const value = ref('')
|
|
|
|
function confirm() {
|
|
emit('update:textarea', value.value)
|
|
if (props.radio.length)
|
|
emit('update:radio', value.value)
|
|
|
|
emit('update:show', false)
|
|
}
|
|
function cancel() {
|
|
emit('update:show', false)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.textarea-placeholder{
|
|
color:#909399
|
|
}
|
|
</style>
|