html 页面引入 vue 组件之 http-vue-loader.js

一、http-vue-loader.js

           http-vue-loader.js 是一个 Vue 单文件组件加载器，可以让我们在传统的 HTML 页面中使用 Vue 单文件组件，而不必依赖 Node.js 等其他构建工具。它内置了 Vue.js 和样式加载器，并能自动解析 Vue 单文件组件中的所有内容，并将其转化为 JavaScript 代码。

ps ：注意：httpVueLoader 加载的单文件导出方式不同：module.exports = {}，而不是 export default {}

二、示例

这里对了 elementUI 的上传组件做一个封装，使其能可根据业务来配置上传的附件

2.1. vue 组件

<template><div><el-col :span="24" v-for="(template,index) in uploadsTemplates"><el-card style="margin-top: 20px;"><div slot="header" class="clearfix"><el-row style="display: flex;align-items: center;"><el-col :span="20"><span style="font-size: 16px;">{{template.title}}</span></el-col><el-col :span="4" style="text-align: right;"><el-tag v-if="template.required == 'N'" type="info">非必上传</el-tag><el-tag v-if="template.required == 'Y'" type="danger">必须上传</el-tag></el-col></el-row></div><p style="color: #F56C6C;margin-bottom: 5px;">{{template.description}}</p><el-col :span="12" style="padding: 20px 0 "><el-form-item prop="requiredFile"ref="uploadFormItems":rules="template.success||template.required=='N'?[]:[{required: true, message: '请上传必要件', trigger: 'blur'}]"><el-row><el-upload :auto-upload="true"drag:file-list="template.fileList"ref="uploadComponents"name="attachment":on-preview="(file)=>onPreview(file,template)":before-upload="(file)=>onBeforeUpload(file,template)":on-success="(response,file,fileList)=>onUploadSuccess(response,file,fileList,index)":on-remove="(file,fileList)=>onRemoveFile(file,fileList,index,template)":action="uploadsUrl":data="{ywlx:ywlx,applyNo:applyNo,configId:template.configId}"multiple><i class="el-icon-upload"></i><div>将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">{{msg}}</div></el-upload></el-row></el-form-item></el-col></el-card></el-col><div class="demo-image__preview" style="display: none"><el-imagestyle="width: 100px; height: 100px"ref="imagePreview":src="previewSrc":preview-src-list="previewSrcList"></el-image></div></div>
</template><script>
module.exports = {name: "upload-template",props: ['contextPath', 'applyNo', 'ywlx', 'fromedit','msg','beforeUpload'],data() {return {uploadsUrl: this.contextPath + "/system/sysUploadFile/uploadAttachment",//预览图片弹窗imgDialogVisible: false,//预览图片路径previewSrc: '',//预览图片集合previewSrcList: [],// 要件（只是校验用）requiredFile: [],//上传模板uploadsTemplates: [],//上传前钩子onBeforeUpload: this.beforeUpload}},mounted: function () {if(this.onBeforeUpload == null){this.onBeforeUpload = (file,upload)=>{return true;}}else{if (typeof this.onBeforeUpload === 'function') {} else {throw new Error('beforeUpload is not a function');}}// 读取附件模板$.ajax({type: "get",async: false,url: this.contextPath + '/system/sysUploadConfig/getUploadsTemplates',data: {ywlx: this.ywlx},dataType: "json"}).then((response) => {if (response.code == 0) {response.data.forEach(template => {template.success = false;template.fileList = [];});this.uploadsTemplates.push(...response.data);if (this.fromedit) {$.ajax({type: "post",async: false,url: this.contextPath + "/system/sysUploadFile/getFilesByApplyNo",dataType: "json",data: {ywlx:this.ywlx,applyNo: this.applyNo}}).then((response) => {if (response.code == 0) {response.data.forEach(attachemnt => {this.uploadsTemplates.forEach(template => {if (attachemnt.configId === template.configId) {template.fileList.push(attachemnt);template.success = true;}})});} else {this.$message({showClose: true,message: response.msg,type: 'error',offset: 200,duration: 10000});console.log("error:");console.log(response);}});}} else {this.$message({showClose: true,message: response.msg,type: 'error',offset: 200,duration: 10000});console.log("error:");console.log(response);}});},methods: {//预览图片onPreview: function (file, template) {this.previewSrc = this.contextPath+(file.url?file.url:file.response.data.url);template.fileList.forEach((file)=>{this.previewSrcList.push(this.contextPath+(file.url?file.url:file.response.data.url));});console.log(this.previewSrc)console.log(this.previewSrcList)this.$refs.imagePreview.clickHandler();},//文件上传成功的回调onUploadSuccess: function (response, file, fileList, index) {console.log('上传成功需要操作请增加事件：upload-success')if (response.code == 0) {// 把要件列表中的当前这个要件的success置为truethis.uploadsTemplates[index].success = true;this.uploadsTemplates[index].fileList = fileList;}else {this.$message({showClose: true,message: response.msg,type: 'error',offset: 200,duration: 2000});//删除控件里某个文件fileList.splice(fileList.indexOf(file),1);}this.$emit('upload-success',response)//清除控件里所有文件// this.$refs.uploadComponents[index].clearFiles();},//移除某个文件onRemoveFile: function (file, fileList, index, upload) {//调用远程移除附件，传递file.fileId$.ajax({url: this.contextPath + '/system/sysUploadFile/removeAttachment',method: 'post',async: false,data: {fileId: file.fileId?file.fileId:file.response.data.fileId}}).then((response) => {if (response.code == 0) {this.uploadsTemplates[index].fileList = fileList;// 如果已经全部移除，加上校验if(fileList.length===0){this.uploadsTemplates[index].success = false;}} else {console.log("error message:");console.log(response.data);this.$message({showClose: true,message: response.msg,type: 'error',offset: 200,duration: 2000});}});},},
}
</script><style scoped>.el-upload__input{display: none;}
</style>

2.2. html 页面

页面中添加 http-vue-loader.js 后添加组件两种方式
方式一：

// 使用httpVueLoader
Vue.use(httpVueLoader);
var vm = new Vue({el: "#upload-test-form",components: {// 将组建加入组建库'upload-template': 'url:'+ctx+'components/upload-template.vue',},data: {ctx:ctx,fromEdit:true,applyForm: {ywlx:"ywlx1",applyNo:"123456789",},},
});

方式二：

var vm = new Vue({el: "#upload-test-form",components: {// 将组建加入组建库'upload-template': httpVueLoader(ctx+'components/upload-template.vue'),},data: {ctx:ctx,applyForm: {ywlx:"ywlx1",applyNo:"123456789",},},});

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><th:block th:include="include :: header('新增上传文件信息')" /><th:block th:include="include :: element-ui('新增上传文件信息')" />
</head>
<body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content" id="upload-test-form"><div class="row"><el-form  ref="uploadForm" id="uploadForm" :model="applyForm"><upload-template :apply-no="applyForm.applyNo":context-path="ctx":before-upload="beforeUpload"@upload-success="uploadSuccess"ywlx="ywlx1"></upload-template></el-form></div></div><th:block th:include="include :: footer" /><th:block th:include="include :: element-ui-js" /><script th:src="@{/lib/http-vue-loader.js}"></script><script th:inline="javascript">var prefix = ctx + "system/sysUploadFile";var vm = new Vue({el: "#upload-test-form",components: {// 将组建加入组建库'upload-template': httpVueLoader(ctx+'components/upload-template.vue'),},data: {ctx:ctx,applyForm: {ywlx:"ywlx1",applyNo:"123456789",},},methods: {beforeUpload: function(file,template){console.log("上传前操作")console.log(file)console.log(template)//返回 true，继续上传，返回false，终止上传return false;},uploadSuccess: function(file){console.log("上传成功操作")console.log(file)}}});function submitHandler() {vm.$refs.uploadForm.validate((valid) => {if (valid) {alert('文件验证通过!');} else {alert('文件验证失败!');}});}</script>
</body>
</html>

3.3. 效果

业务类型上传文件配置

业务上传附件页面

保存的文件

总结：
通过 http-vue-loader.js，我们可以在普通的 HTML 页面中使用 Vue 单文件组件来实现前端开发的快速迭代。在使用 http-vue-loader.js 时，我们需要引入 Vue.js 和 http-vue-loader.js，并使用 httpVueLoader () 方法加载 Vue 单文件组件，并将其实例化为 Vue 对象。