Naive UI上传改成script setup写法
Naive UI官网写法
<template>
<n-button
:disabled="!fileListLength"
style="margin-bottom: 12px"
@click="handleClick"
>
上传文件
</n-button>
<n-upload
ref="upload"
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-upload="false"
multiple
@change="handleChange"
>
<n-button>选择文件</n-button>
</n-upload>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import type { UploadInst, UploadFileInfo } from 'naive-ui'
export default defineComponent({
setup () {
const fileListLengthRef = ref(0)
const uploadRef = ref<UploadInst | null>(null)
return {
upload: uploadRef,
fileListLength: fileListLengthRef,
handleChange (options: { fileList: UploadFileInfo[] }) {
fileListLengthRef.value = options.fileList.length
},
handleClick () {
uploadRef.value?.submit()
}
}
}
})
</script>
改成script setup写法
<template>
<n-button
style="margin-bottom: 12px"
@click="handleClick"
>
上传文件
</n-button>
<n-upload
ref="uploadRef"
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-upload="false"
multiple
@change="handleChange"
>
<n-button>选择文件</n-button>
</n-upload>
</template>
<script setup lang="ts">
import type { UploadFileInfo, UploadInst } from 'naive-ui'
const fileListLengthRef = ref(0)
const uploadRef = ref<UploadInst | null>(null)
const handleChange = (options: { fileList: UploadFileInfo[] }) => {
fileListLengthRef.value = options.fileList.length
}
const handleClick = () => {
uploadRef.value?.submit()
}
</script>
</script>
下边的命名要跟上边的ref的名称一致