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 对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/419230.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDK 8 升级 17 及 springboot 2.x 升级 3.x 指南

文章目录 JDK 8 升级 17简介javax.* 包移到 jakarta.*maven pom 中更新 java 版本 springboot 2.x 升级 3.xspring-boot 与 cloud、alibaba-cloud 的版本对应redis 默认配置调整SpringBoot 3.x 整合 Querydsl其他注意事项 maven 及 maven 插件的版本升级maven 版本升级maven-co…

HUAWEI华为MateBook B5-420 i5 集显(KLCZ-WXX9,KLCZ-WDH9)原装出厂Windows10系统文件下载

适用型号&#xff1a;KLCZ-WXX9、KLCZ-WDH9 链接&#xff1a;https://pan.baidu.com/s/12xnaLtcPjZoyfCcJUHynVQ?pwdelul 提取码&#xff1a;elul 华为原装系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、系统属性专属LOGO标志、华为浏览器、Office办公软件、华为…

握 手 问 题

目录 一&#xff1a;问题描述 二&#xff1a;思路: 三&#xff1a;代码&#xff1a; 四&#xff1a;结果&#xff1a;1204 一&#xff1a;问题描述 小蓝组织了一场算法交流会议&#xff0c;总共有50 5050 人参加了本次会议。在会议上&#xff0c;大家进行了握手交流。按照…

C++解决:求排列数

描述 输入两个整数m,n&#xff0c;求m个数字中选n个数的排列数。&#xff08;1<n<m<50&#xff09; 输入描述 两个正整数m和n。 输出描述 一个正整数表示排列数。 用例输入 1 6 5 用例输出 1 720 AC code #include<bits/stdc.h> using namespace s…

Avatar 高清图传

Avatar HD VTX 是一款数字视频发射器&#xff0c;专为与 Caddx/Walksnail 的 Avatar HD 系统配合使用而设计。最初以 Walksnail 品牌销售&#xff0c;实际上是 CaddX FPV 的一部分。 这些 VTX 设计用于 Caddx/Walksnail 的 Avatar HD 系统&#xff0c;并可与 Avatar HD Goggle…

【OpenWrt(3)】内网搭建iperf3测速服务器

下载的iperf3 网站&#xff1a;https://iperf.fr/iperf-download.php Window地址&#xff1a;https://github.com/ar51an/iperf3-win-builds 安卓&#xff1a;https://gitee.com/hiyanyx/magic-i-perf 文章目录 下载的iperf3Windows 服务器启动安卓客户端启动参考 Windows 服务…

利士策分享,如何规划多彩的大学生活?

利士策分享&#xff0c;学习规划多彩的大学生活 踏入大学&#xff0c;如同开启一场充满未知与可能的旅程。 为了让这段旅程不仅充满学术的熏陶&#xff0c;还洋溢着生活的多彩与人际的和谐&#xff0c;我们需要精心规划&#xff0c;积极行动。 一、多彩规划&#xff1a;点亮大学…

【408数据结构】散列 (哈希)知识点集合复习考点题目

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 知识点 1. 散列查找 散列查找是一种高效的查找方法&#xff0c;它通过散列函数将关键字映射到数组的一个位置&#xff0c;从而实现快速查找。这种方法的时间复杂度平均为…

【小沐学OpenGL】Ubuntu环境下glut的安装和使用

文章目录 1、简介1.1 OpenGL简介1.2 glut简介1.3 freeglut 2、glut安装2.1 命令安装glut2.2 源码安装glut 3、glut测试3.1 测试1&#xff0c;版本打印3.2 测试2&#xff0c;绘制三角形3.3 测试3&#xff0c;VBO绘制三角形 结语 1、简介 1.1 OpenGL简介 OpenGL作为图形界的工业…

2024最新!Facebook手机版和网页版改名教程!

Facebook作为全球最大的社交平台之一&#xff0c;允许用户自定义名字和昵称。在Facebook更新姓名可以帮助您更好的展现账号形象。本文将为您提供详细的步骤指导&#xff0c;帮助您在手机APP和网页版上轻松完成Facebook改名操作。 Facebook手机版改名 打开Facebook APP并登录账号…

构建模块化的FastAPI应用: 从用户认证到角色控制

实现了用户身份验证及角色授权的基本功能。具体来说&#xff0c;当用户尝试访问某些资源时&#xff0c;系统会首先验证用户的身份&#xff0c;然后根据用户的角色来决定是否允许访问特定资源。例如&#xff0c;普通用户只能访问自己的信息&#xff0c;而管理员可以访问额外的管…

UnLua调用C++函数

一、UnLua调用C全局静态函数 1、新建C类MyLuaUtils&#xff0c;继承BlueprintFunctionLibrary,实现全局静态函数GetInt。 MyLuaUtils.h UCLASS() class LUASHOOTING_API UMyLuaUtils : public UBlueprintFunctionLibrary {GENERATED_BODY()UFUNCTION(BlueprintCallable)static…

Python 神器:wxauto 库——解锁微信自动化的无限可能

&#x1f4dd;个人主页&#x1f339;&#xff1a;誓则盟约 ⏩收录专栏⏪&#xff1a;机器学习 &#x1f921;往期回顾&#x1f921;&#xff1a;“探索机器学习的多面世界&#xff1a;从理论到应用与未来展望” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f…

GPIO 简介(STM32F407)

一、GPIO简介 什么是GPIO GPIO即通用输入输出端口&#xff0c;全称General Purpose Input Output&#xff0c;是控制或者采集外部器件的信息的外设&#xff0c;即负责输入输出。 它按组分配存在&#xff0c;每组最多16个IO口&#xff0c;组数视芯片而定。比如STM32F407ZGT6是…

【Python】Python 读取Excel、DataFrame对比并选出差异数据,重新写入Excel

背景&#xff1a;我在2个系统下载出了两个Excel&#xff0c;现在通过对下载的2个Excel数据&#xff0c;并选出差异数据 从新写入一个新的Excel中 differences_url rC:\Users\LENOVO\Downloads\differences.xlsx; //要生成的差异Excel的位置及名称 df1_url rC:\Users\LENOVO\Dow…

大数据新视界--大数据大厂之Java 与大数据携手:打造高效实时日志分析系统的奥秘

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Spring源码(3)Aware接口、初始化和销毁方法、@Scope、@Primary

1、目标 本文的主要目标是学习Spring源码中Aware接口、初始化和销毁方法、Scope注解、Primary注解的使用 2、Aware接口 Component public class MyBeanAware implements BeanNameAware, ApplicationContextAware {Overridepublic void setBeanName(String name) {System.out…

从JavaScript入门Go三

前情提要 上一章中我们讲了Go中的变量与函数&#xff0c;这一节我们说说Go中的逻辑语法for、if、switch。最近正好有空&#xff0c;正好给大家更新一下入门的第三章。 PS&#xff1a;没看过的第一章、第二章的小伙伴&#xff0c;可以进入下面的链接查看 从JavaScript入门Go一 从…

计算机毕业设计 | vue+springboot在线投稿管理 稿件文章报社管理系统 (附源码)

1&#xff0c;绪论 1.1 行业趋势与需求 随着互联网的发展和普及&#xff0c;越来越多的出版社、杂志社和媒体开始采用在线投稿系统。这种系统提供了一个便捷的平台&#xff0c;让作者可以直接将他们的文章提交到相应的出版机构&#xff0c;而无需邮寄或亲自递交稿件。这不仅节…

Web服务器配置管理

目录 一、设计内容&#xff1a; 二、摘 要 三、课题描述 四、需求分析 五、概要设计 六、详细设计 七、结果分析 八、总结 一、设计内容 Web服务器的安装与配置管理。 1.任务说明 C/S 模式的网络环境&#xff0c;包括一台Windows工作站和一台Windows Server 服务器。 2.要求 ①…