<template>
|
<nut-popup v-model:visible="innerVisible" class="new-prompt" @close="emit('close')">
|
<div class="new-prompt-content">
|
<div class="new-prompt-title-wrapper">
|
<div class="new-prompt-title">{{ title }}</div>
|
<Close color="#8C8C8C" class="new-prompt-title-close" @click="emit('onClose')" />
|
</div>
|
<div class="new-prompt-content-wrapper">
|
<div class="new-prompt-oneline-content">
|
<div class="new-prompt-oneline-input-wrapper">
|
<nut-input
|
type="text"
|
class="bole-input-text"
|
:placeholder="placeholder"
|
v-model.trim="inputValue"
|
@confirm="handleConfirm"
|
autofocus
|
v-bind="props.inputProps"
|
/>
|
<div v-if="showCount" class="new-prompt-oneline-input-limit">
|
<!-- @ts-ignore -->
|
{{ inputValue.length }}/{{
|
Number(props.inputProps.maxLength) < 0 ? 0 : props.inputProps.maxLength
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="new-prompt-oneline-actions">
|
<nut-button class="new-prompt-oneline-action confirm" @click="handleConfirm">
|
{{ confirmText }}
|
</nut-button>
|
</div>
|
</div>
|
</div>
|
</nut-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { Close } from '@nutui/icons-vue-taro';
|
import _ from 'lodash';
|
import { Message } from '@12333/utils';
|
import Taro from '@tarojs/taro';
|
import { Input } from '@nutui/nutui-taro';
|
import { ExtractPropTypes, computed, ref } from 'vue';
|
import './newPrompt.scss';
|
|
defineOptions({
|
name: 'NewPromptOneLine',
|
});
|
|
type InputInstance = InstanceType<typeof Input>;
|
|
type InputProps = ExtractPropTypes<InputInstance['$props']>;
|
|
type Props = {
|
visible: boolean;
|
title?: string;
|
placeholder?: string;
|
inputProps?: Partial<InputProps>;
|
showCount?: boolean;
|
confirmText?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
confirmText: '确认',
|
});
|
|
const emit = defineEmits<{
|
(e: 'confirm', value: string): void;
|
(e: 'close'): void;
|
(e: 'onClose'): void;
|
(e: 'update:visible', value: boolean): void;
|
}>();
|
|
const innerVisible = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
const inputValue = ref('');
|
|
function handleConfirm() {
|
const value = _.trim(inputValue.value);
|
if (!value) {
|
Message.warning('内容不能为空');
|
} else {
|
emit('confirm', value);
|
Taro.hideKeyboard();
|
}
|
}
|
</script>
|
