当前位置：首页 > article >正文

在html中如何创建vue自定义组件（以自定义文件上传组件为例，vue2+elementUI）

article 2025/10/18 13:30:28

1、先上代码：vueUpload.js

var dom = `<div class="upload-file"><el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit":on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess":show-file-list="false" :headers="headers" class="upload-file-uploader" ref="upload"><!-- 上传按钮 --><el-button size="mini" type="primary">选取文件</el-button><!-- 上传提示 --><div class="el-upload__tip" slot="tip" v-if="showTip">请上传<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template><template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>的文件</div></el-upload><!-- 文件列表 --><div><div :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"v-if="file.url != null" style="display:flex;justify-content:space-between;align-item:center;max-width:300px;over-flow:hidden;text-overflow:ellipsis;white-space:nowrap;border: 1px solid #ddd;padding: 0 10px;cursor: pointer;"><el-link :href="file.url" :underline="false" target="_blank"><span class="el-icon-document"> {{ file.name }} </span></el-link><div class="ele-upload-list__item-content-action"><el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link></div></div></div></div>`var demoComponent = Vue.extend({template:dom,props: {// 值value: [String, Object, Array],// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["doc", "xls", "ppt", "txt", "pdf"],},// 是否显示提示isShowTip: {type: Boolean,default: true},limit: {type: Number,default: 9}},data:function(){return {uploadFileUrl: '/file/rest/common/upload', // 上传的图片服务器地址headers: {Authorization: 'Bearer 123'},fileList: [],}},created() {this.fileList = this.list;},mounted() {console.log(this);},computed: {// 是否显示提示showTip() {return this.isShowTip && (this.fileType || this.fileSize);},// 列表list() {let temp = 1;if (this.value) {const list = this.value;return list.map((item) => {item.name = item.fileNameitem.url = item.fileUrlitem.uid = item.uid || new Date().getTime() + temp++;return item;});} else {this.fileList = [];return [];}},},methods:{// 上传前校检格式和大小handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}const isTypeOk = this.fileType.some((type) => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});if (!isTypeOk) {this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}return true;},// 文件个数超出handleExceed(e) {if(this.limit == 1) {this.$message.error(`只能上传一个文件,请先删除原文件后重新上传!`);} else {this.$message.error(`上传文件数量不能超过 ${props.limit} 个!`);}},// 上传失败handleUploadError(err) {this.$message.error("上传失败, 请重试");},// 上传成功回调handleUploadSuccess(res, file) {this.fileList.push({name:res.data.name, url:res.data.url, fileName:res.data.name, fileUrl:res.data.url})this.$message.success("上传成功");this.$emit("input", this.fileList);},// 删除文件handleDelete(index) {this.fileList.splice(index, 1);this.$emit("input", this.fileList);},// 获取文件名称getFileName(name) {if (name.lastIndexOf("/") > -1) {return name.slice(name.lastIndexOf("/") + 1).toLowerCase();} else {return "";}}},})Vue.component('vue-upload',demoComponent)

2、在html中使用，在html中引入上面的vueUpload.js自定义组件文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 引入自定义上传组件 --><script src="./vueUpload.js"></script>
</head>
<body><div id="app"><vue-upload v-model="fileList" :limit="1" :file-type="['doc','docx','pdf']" :file-size="50"></vue-upload>        </div><script>var app = new Vue({el: '#app',data () {return {fileList:[{fileName:'测试.pdf',fileUrl:'http://www.baidu.com/img/bd_logo1.png'}],}},mounted () {},methods: {}})</script>
</body>
</html>

3、展示效果

总结：在html中使用vue创建自定义组件和在vue中创建自定义组件基本一样，只不过写在js里最后记得把自定义组件通过Vue.component('vue-upload',demoComponent)，挂载到vue上，还有在html中标签还有属性名都不可以用驼峰命名，切记！！！！！，驼峰命名的单词改用 ‘-’ 的写法

在html中如何创建vue自定义组件（以自定义文件上传组件为例，vue2+elementUI）

1、先上代码：vueUpload.js var dom <div class"upload-file"><el-upload :action"uploadFileUrl" :before-upload"handleBeforeUpload" :file-list"fileList" :limit"limit":on-error"handleUpl…...

编程日记 2025/10/9 19:42:13

《使用 Cesium 加载静态热力图显示的实现步骤》

Cesium——使用cesium 加载静态热力图显示实现思路要在 Cesium 中加载静态热力图，我们需要完成以下几个主要步骤： 1、计算热力图数据的四至范围和中心点。 2、初始化热力图并设置相关参数。 3、将数据添加到热力图中。 4、定位到热力图的位置并刷…...

编程日记 2025/10/10 5:32:14

Spring 事务传播行为

事务传播行为（Transaction Propagation Behavior）是指多个拥有事务的方法在嵌套调用时的事务控制方式。以下是常见的事务传播行为及其应用场景： 1. PROPAGATION_REQUIRED（默认） 定义：如果当前存在事务&…...

编程日记 2025/9/30 22:33:05

mfc学习（一）

mfc为微软创建的一个类qt框架的客户端程序，只不过因为微软目前有自己的亲身儿子C#（.net）,所以到2010没有进行维护。然后一些的工业企业还在继续进行维护相关的内容。我目前就接手一个现在这样的项目，其实本质与qt的思路是差不多的…...

编程日记 2025/10/9 12:56:13

ThreadLocal详解与实战指南

目录 1. ThreadLocal基本概念 1.1 核心原理 1.2 主要特性 2. ThreadLocal API详解 2.1 核心方法 2.2 基本使用方式 3. ThreadLocal使用场景与实战 3.1 场景一：用户身份信息传递实现步骤 1.创建用户上下文类 2.创建过滤器或拦截器来设置和清理用户信息 …...

编程日记 2025/10/3 2:09:04

[FPGA基础] RAM篇

Xilinx FPGA RAM 使用指南 1. 引言随机存取存储器（RAM）是 Xilinx FPGA 设计中用于存储和快速访问数据的重要资源。Xilinx FPGA 提供多种 RAM 类型，包括块 RAM（Block RAM）和分布式 RAM（Distributed RAM&a…...

编程日记 2025/6/8 6:02:48

【含文档+PPT+源码】基于微信小程序的校园快递平台

项目介绍本课程演示的是一款基于微信小程序的校园快递平台，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统 3.该项目附带…...

编程日记 2025/10/9 15:14:41

【CODEMATE】进制转换（transform）粤港澳青少年信息学创新大赛 C/C++/Python 解题思路

目录问题描述做题思路，解决过程思路：踩过的坑：核心代码C 语言 / C 切片：C 语言 / C 判断 ‘A’ 数量：Python 切片：Python 判断 ‘A’ 数量： 完整代码C 语言完整代码C 完整代码Python 完整代码…...

编程日记 2025/10/10 0:30:02

统计文件中单词出现的次数并累计

# 统计单词出现次数 fileopen("E:\Dasktape/python_test.txt","r",encoding"UTF-8") f1file.read() # 读取文件 countf1.count("is") # 统计文件中is 单词出现的次数 print(f"此文件中单词is出现了{count}次")# 2.判断单词出…...

编程日记 2025/9/9 21:01:17

DbCreateHelper数据库创建指南

DbCreateHelper 是一个用于简化数据库创建和初始化过程的工具类，它封装了常见的数据库操作，使开发者能够更便捷地创建、配置和管理数据库。 1.主要功能数据库创建与初始化表结构创建与管理数据库版本控制数据迁移支持数据库连接管理基本用法…...

编程日记 2025/9/21 1:55:01

2025 Java 开发避坑指南：如何避免踩依赖管理的坑？

在 Java 开发的世界里，依赖管理就像是一座看不见的桥梁，连接着项目所需的各种第三方库和框架。然而，这座桥梁并非总是稳固，稍有不慎就可能掉入 “依赖地狱”，导致项目编译失败、运行异常。2025 年，随着开源…...

编程日记 2025/10/9 16:11:01

ARM服务器与X86服务器核心区别分析

ARM服务器与X86服务器核心区别分析一、架构设计与指令集差异指令集本质‌ ARM‌：基于RISC（精简指令集），指令定长且简单，单周期执行效率高，硬件设计复杂度低，适合低功耗场景。 X86‌&#xf…...

编程日记 2025/10/10 0:31:38

人口老龄化丨AI健康小屋如何实现防病于未然

随着全球老龄化加剧，“银发浪潮” 对医疗资源、养老护理和健康管理提出了严峻挑战。由此智绅科技应运而生，七彩喜智慧养老系统构筑居家养老安全网。 AI 健康小屋作为银发科技的创新载体，通过智能化健康监测、精准化风险预警、便捷化医疗衔…...

编程日记 2025/10/9 12:46:14

记录搭建自己应用中心

记录搭建自己应用中心应用架构主应用-管理中心系统文件系统子应用日志系统日志系统前端日志系统后端用户系统接入使用暂未完成研发管理需求面板消息推送任务分配应用发布应用架构一直想做个试试，这是一个简易版的，主要是整合下知识的，…...

编程日记 2025/10/9 20:30:45

git版本回退 | 远程仓库的回退（附实战Demo）

目录前言1. 基本知识2. Demo3. 彩蛋前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器，无代码爬取，就来：bright.cn 本身暂存区有多个文件，但手快了&…...

编程日记 2025/10/9 15:13:56

STM32 的 GPIO和中断

GPIO的简单介绍内部结构施密特触发器（TTL肖特基触发器） 的工作原理： 施密特触发电路（简称）是一种波形整形电路，当任何波形的信号进入电路时，输出在正、负饱和之间跳动，产生方波或…...

编程日记 2025/10/9 14:25:01

【Python数据库编程实战】从SQL到ORM的完整指南

目录前言技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比二、实战演示环境配置要求核心代码实现案例1：SQLite基础操作案例2：MySQL连接池案例3：SQLAlchemy ORM …...

编程日记 2025/10/1 6:19:58

【因果推断】（二）CV中的应用

文章目录因果表征学习因果图 (Causal Diagram)“后门准则”（backdoor criterion）和“前门准则”（frontdoor criterion）后门调整Visual Commonsense R-CNNCausal Intervention for Weakly-Supervised Semantic SegmentationCausal…...

编程日记 2025/10/3 9:01:24

分享Matlab成功安装Support Package硬件支持包的方法

分享Matlab成功安装Support Package硬件支持包的方法文章目录分享Matlab成功安装Support Package硬件支持包的方法一、引言二、操作步骤三、附件资料四、总结一、引言最近，我想学习基于Matlab simscape & Arduino实现硬件在环仿真，其中物理…...

编程日记 2025/10/6 23:27:41

电子级甲基氯硅烷

电子级甲基氯硅烷是一类高纯度有机硅化合物，主要用于半导体制造、光伏产业及高端电子材料领域。以下从技术特性、应用场景、生产工艺、市场动态及安全规范等方面展开分析： 一、核心特性与技术标准高纯度要求电子级甲基氯硅烷的纯度通常需达到99.99% 以…...

编程日记 2025/10/6 8:33:28

C语言面试高频题——define 和typedef 的区别？

1. 基本概念 (1) #define 定义：#define 是预处理指令，用于定义宏。作用：在编译之前进行文本替换。语法：#define 宏名替换内容示例：#define PI 3.14159 #define SQUARE(x) ((x) * (x))(2) typedef 定义：…...

编程日记 2025/9/28 5:38:01

[FPGA基础] 原语简介篇

Xilinx FPGA 原语介绍指南 1. 引言在 Xilinx FPGA 设计中，原语 (Primitives) 是 FPGA 硬件资源的最基本构建块，直接映射到 FPGA 的底层硬件结构。原语允许设计者以低级别方式控制硬件行为，优化性能、功耗和资源利用率。本文档基于 Xilinx …...

编程日记 2025/6/2 23:30:59

【金仓数据库征文】- 深耕国产数据库优化，筑牢用户体验新高度

目录引言一、性能优化：突破数据处理极限，提升运行效率 1.1 智能查询优化器：精准优化数据检索路径 1.2 并行处理技术：充分释放多核计算潜力 1.3 智能缓存机制：加速数据访问速度二、稳定性提升：筑牢…...

编程日记 2025/10/9 1:44:29

热度大幅度下降，25西电经济与管理学院（考研录取情况）

1、经济与管理学院各个方向 2、经济与管理学院近三年复试分数线对比学长、学姐分析由表可看出： 1、应用经济及学25年相较于24年下降25分，为325分 2、管理科学与工程25年相较于24年保持不变，为375分 3、工商管理学25年相较于24年下降5分…...

编程日记 2025/10/18 9:31:26

安卓四大组件之ContentProvider

目录实现步骤代码分析 onCreate insert query ContextHolder Cursor 作用与用法基本步骤： 可能的面试题：为什么使用Cursor？ 为什么使用Cursor 使用Cursor的好处静态内部类实现单例模式 AnndroidManifest.xml配置信息注释的…...

编程日记 2025/10/6 3:35:42

DeepSeek+Mermaid：轻松实现可视化图表自动化生成（附实战演练）

目录一、引言：AI 与图表的梦幻联动二、DeepSeek：大语言模型新星崛起2.1 DeepSeek 全面剖析2.2 多场景应用示例2.2.1 文本生成2.2.2 代码编写三、Mermaid：代码式图表绘制专家3.1 Mermaid 基础探秘3.2 语法与图表类型详解3.2.1 流程图&#x…...

编程日记 2025/9/20 9:18:13

redis客户端库redis++在嵌入式Linux下的交叉编译及使用

在开发过程中，我们经常会遇到需要在嵌入式Linux系统上与Redis进行交互的需求。因此选择一个适合的Redis客户端库就显得尤为重要。下面介绍下c中有名的redis-plus-plus（redis）三方库在嵌入式linux下的交叉编译及使用。该库底层是基于hiredis的…...

编程日记 2025/6/10 3:04:22

gitlab-ce容器镜像源（国内）

下载命令 docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/gitlab/gitlab-ce:17.10.4-ce.0 更多参考： https://docker.aityp.com/image/docker.io/gitlab/gitlab-ce:17.10.4-ce.0...

编程日记 2025/8/11 15:18:30

小白自学python第二天

学习python的第二天一、判断语句 1、布尔类型和比较运算符 1、布尔类型表示现实生活中的逻辑，真（True，用数字1表示）和假（False，用数字0表示） 2、布尔类型变量的定义变量的名称布尔类…...

编程日记 2025/8/13 13:20:25

嵌入式面试高频考点深度解析：内存管理、指针操作与结构体实战指南

试题一：大小端系统中数据的内存表现形式题目 short tmp 0xaabb; 请分别写出大小端系统中，tmp 在内存中的表现形式。分析 1. 什么是高位与低位？ 对于一个数据而言，以十六进制数 0xaabb 为例，从左至右&#xff0…...

编程日记 2025/9/13 3:51:02

相关文章：