54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
title="新建文件夹"
|
|
width="400px"
|
|
class="custom-dialog"
|
|
>
|
|
<el-input
|
|
v-model="folderName"
|
|
placeholder="请输入文件夹名称"
|
|
clearable
|
|
@keyup.enter="handleCreate"
|
|
autofocus
|
|
>
|
|
<template #prefix><el-icon><Folder /></el-icon></template>
|
|
</el-input>
|
|
<template #footer>
|
|
<el-button @click="visible = false">
|
|
<el-icon><Close /></el-icon>
|
|
<span style="margin-left: 4px">取消</span>
|
|
</el-button>
|
|
<el-button type="primary" @click="handleCreate" :disabled="!folderName.trim()">
|
|
<el-icon><Check /></el-icon>
|
|
<span style="margin-left: 4px">保存</span>
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from 'vue'
|
|
import { Close, Check, Folder } from '@element-plus/icons-vue'
|
|
|
|
const props = defineProps({ modelValue: Boolean })
|
|
const emit = defineEmits(['update:modelValue', 'create'])
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (v) => emit('update:modelValue', v)
|
|
})
|
|
|
|
const folderName = ref('')
|
|
|
|
watch(visible, (v) => {
|
|
if (v) folderName.value = ''
|
|
})
|
|
|
|
const handleCreate = () => {
|
|
if (!folderName.value.trim()) return
|
|
emit('create', folderName.value.trim())
|
|
visible.value = false
|
|
}
|
|
</script>
|