element导入按钮\
时间: 2023-07-15 08:13:52 浏览: 81
你可以使用以下代码将 Element UI 中的导入按钮组件引入到你的项目中:
```vue
<template>
<el-upload
class="upload-demo"
action="/your-upload-api"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
multiple
:show-file-list="false"
>
<el-button slot="trigger" size="small" type="primary">导入</el-button>
<div slot="tip" class="el-upload__tip">
支持多选文件,或将文件拖到此处上传
</div>
</el-upload>
</template>
<script>
import { ElUpload, ElButton } from 'element-ui';
export default {
components: {
ElUpload,
ElButton,
},
data() {
return {
fileList: [],
};
},
methods: {
handleSuccess(response) {
console.log(response);
},
beforeUpload(file) {
console.log(file);
},
},
};
</script>
```
在上面的代码中,我们使用了 `ElUpload` 和 `ElButton` 组件,分别用于上传和触发上传操作。你需要在 `import` 语句中引入这两个组件,并在 `components` 属性中注册它们。
然后,我们将 `ElButton` 组件放在 `ElUpload` 组件的 `slot="trigger"` 的位置,作为触发上传操作的按钮。
最后,我们还设置了一些属性,例如上传的接口地址 (`action`)、上传成功后的回调函数 (`handleSuccess`)、文件上传之前的钩子函数 (`beforeUpload`)、文件列表 (`fileList`) 等。