哪个网站可以做网红,wordpress菜单锚点定位,wordpress编辑区,网页制作公司 大连一、http-vue-loader.js http-vue-loader.js 是一个 Vue 单文件组件加载器#xff0c;可以让我们在传统的 HTML 页面中使用 Vue 单文件组件#xff0c;而不必依赖 Node.js 等其他构建工具。它内置了 Vue.js 和样式加载器#xff0c;并能自动解析 Vue 单文件组件中的所有内容…一、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 组件
templatedivel-col :span24 v-for(template,index) in uploadsTemplatesel-card stylemargin-top: 20px;div slotheader classclearfixel-row styledisplay: flex;align-items: center;el-col :span20span stylefont-size: 16px;{{template.title}}/span/el-colel-col :span4 styletext-align: right;el-tag v-iftemplate.required N typeinfo非必上传/el-tagel-tag v-iftemplate.required Y typedanger必须上传/el-tag/el-col/el-row/divp stylecolor: #F56C6C;margin-bottom: 5px;{{template.description}}/pel-col :span12 stylepadding: 20px 0 el-form-item proprequiredFilerefuploadFormItems:rulestemplate.success||template.requiredN?[]:[{required: true, message: 请上传必要件, trigger: blur}]el-rowel-upload :auto-uploadtruedrag:file-listtemplate.fileListrefuploadComponentsnameattachment: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):actionuploadsUrl:data{ywlx:ywlx,applyNo:applyNo,configId:template.configId}multiplei classel-icon-upload/idiv将文件拖到此处或em点击上传/em/divdiv classel-upload__tip slottip{{msg}}/div/el-upload/el-row/el-form-item/el-col/el-card/el-coldiv classdemo-image__preview styledisplay: noneel-imagestylewidth: 100px; height: 100pxrefimagePreview:srcpreviewSrc:preview-src-listpreviewSrcList/el-image/div/div
/templatescript
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.length0){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});}});},},
}
/scriptstyle scoped.el-upload__input{display: none;}
/style2.2. html 页面
页面中添加 http-vue-loader.js 后添加组件两种方式 方式一
// 使用httpVueLoader
Vue.use(httpVueLoader);
var vm new Vue({el: #upload-test-form,components: {// 将组建加入组建库upload-template: url:ctxcomponents/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(ctxcomponents/upload-template.vue),},data: {ctx:ctx,applyForm: {ywlx:ywlx1,applyNo:123456789,},},});!DOCTYPE html
html langzh xmlns:thhttp://www.thymeleaf.org
headth:block th:includeinclude :: header(新增上传文件信息) /th:block th:includeinclude :: element-ui(新增上传文件信息) /
/head
body classwhite-bgdiv classwrapper wrapper-content animated fadeInRight ibox-content idupload-test-formdiv classrowel-form refuploadForm iduploadForm :modelapplyFormupload-template :apply-noapplyForm.applyNo:context-pathctx:before-uploadbeforeUploadupload-successuploadSuccessywlxywlx1/upload-template/el-form/div/divth:block th:includeinclude :: footer /th:block th:includeinclude :: element-ui-js /script th:src{/lib/http-vue-loader.js}/scriptscript th:inlinejavascriptvar prefix ctx system/sysUploadFile;var vm new Vue({el: #upload-test-form,components: {// 将组建加入组建库upload-template: httpVueLoader(ctxcomponents/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
/html3.3. 效果
业务类型上传文件配置 业务上传附件页面 保存的文件
总结 通过 http-vue-loader.js我们可以在普通的 HTML 页面中使用 Vue 单文件组件来实现前端开发的快速迭代。在使用 http-vue-loader.js 时我们需要引入 Vue.js 和 http-vue-loader.js并使用 httpVueLoader () 方法加载 Vue 单文件组件并将其实例化为 Vue 对象。
