自定义前端组件
下载控件的使用
<template>
<xs-download :dowloadFileCode="dowloadFileCode" />
<button @click="download">下载</button>
<!-- .... -->
</template>
<script>
export default {
data() {
return {
dowloadFileCode: null,
};
},
methods: {
download() {
// XXX 这里有个坑
// HACK 这里写得不好
// BUG 这里有个BUG
// FIXME 这里需要处理
// TODO 这里有个待办
const fileCode = null; // TODO 这里修改为真实的code即可
this.dowloadFileCode = fileCode;
},
},
// ...
};
</script>
预览控件的使用
- 在页面中直接使用，引入
XsFilePreview控件即可
参数说明
- url 文件路径
- fileType 文件类型，目前只能是“image”和“pdf”，其他则会显示无法预览
<template>
<div>
<xs-file-preview url="/ceshi.jpeg" fileType="imag2e" />
</div>
</template>
<script>
import XsFilePreview from "@/components/XsFilePreview";
export default {
data() {
return {};
},
components: {
XsFilePreview,
},
};
</script>
- 在弹窗中使用，引入
XsFilePreviewModal控件即可
参数说明
- url 文件路径
- fileType 文件类型，目前只能是“image”和“pdf”，其他则会显示无法预览
- width 弹窗的宽度，不传入则默认为 800px
<template>
<div>
<a-button type @click="visible = true">预览</a-button>
<xs-file-preview-modal
:visible="visible"
width="80%"
@hidden="visible = false"
url="/ceshi.jpeg"
fileType="imag2e"
/>
</div>
</template>
<script>
import XsFilePreviewModal from "@/components/XsFilePreviewModal";
export default {
data() {
return {
visible: false,
};
},
components: {
XsFilePreviewModal,
},
};
</script>