Vue
关注
分享
扫一扫
永不满足的求知者
Java-->Vue/React-->ArkTS
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Nuxt3使用useFetch调用自身项目中server下的接口
Nuxt3使用useFetch调用自身项目中server下的接口。原创 2024-04-01 10:29:43 · 1885 阅读 · 0 评论 -
vue3封装Element表格自适应
表格高度自适应，分页跟随表格之后。表格满屏显示滚动条原创 2024-03-29 15:42:00 · 819 阅读 · 0 评论 -
vue3封装Element分页
vue3封装Element分页原创 2024-03-29 14:17:04 · 394 阅读 · 0 评论 -
vue3封装Element表格
vue3封装Element表格。原创 2024-03-29 10:51:21 · 488 阅读 · 0 评论 -
vue3封装Element导航菜单
vue3封装Element导航菜单。原创 2024-03-29 08:10:10 · 1195 阅读 · 1 评论 -
vue3封装Element动态表单组件
vue3封装Element动态表单组件。原创 2024-03-28 16:54:04 · 1764 阅读 · 5 评论 -
vue开发的PC端项目使用postcss-to-viewport适配移动端
使用postcss-to-viewport适配移动端，包含微信浏览器原创 2024-01-26 15:35:10 · 1182 阅读 · 2 评论 -
Vue加载序列帧动图
Vue加载序列帧动图。原创 2024-01-16 16:42:34 · 810 阅读 · 0 评论 -
vue开发H5 实现滑动图片获取验证码
vue开发H5 实现滑动图片获取验证码。原创 2024-01-12 13:59:26 · 1059 阅读 · 1 评论 -
Vue中加载apng动图
APNG（Animated PNG）是一种新型的图像格式，它是PNG图像格式的增强版本，可以在不失去图像质量的情况下实现更快的加载速度。其次，APNG还支持更好的透明度支持，这意味着可以在不失去图像质量的情况下实现更好的透明度效果。最后，APNG的压缩率比GIF更高，这使得网络传输速度更快，也能减少文件大小，降低服务器压力。首先，APNG支持更高的颜色深度和更好的抗锯齿效果，这使得APNG动画更加逼真和流畅。APNG和GIF都是用于保存动态图像的图像格式，但它们之间有一些区别。原创 2023-06-27 14:49:57 · 2391 阅读 · 0 评论 -
vue引入bpmn-js流程图适配后端activiti
用户任务的候选组默认是输入框，将它改为下拉选择。生成bpmn文件（xml格式）传给后端。原创 2023-04-20 17:07:15 · 1672 阅读 · 1 评论 -
Vue自定义指令-点击内容框以外的地方，自动隐藏起内容框
点击内容框以外的地方，自动隐藏起内容框原创 2023-02-18 11:23:35 · 928 阅读 · 0 评论 -
ECharts接收dataset类型数据封装各类型图形组件
数据平台整合matabase图表，调用matabase已有接口使用二维数组数据格式echarts实现图表展示。原创 2023-02-04 11:21:17 · 1087 阅读 · 0 评论 -
Taro-微信小程序-页面苹果机左右滑动出现白屏（禁止滑动）
Taro-微信小程序-页面苹果机左右滑动出现白屏（禁止滑动）原创 2022-08-17 16:49:56 · 1220 阅读 · 0 评论 -
Taro-微信小程序-内容超出两行省略号不生效
Taro-微信小程序-内容超出两行省略号不生效。原创 2022-08-17 16:43:16 · 643 阅读 · 0 评论 -
Taro-微信小程序-安卓机内容超出两行省略号居中
Taro-微信小程序-安卓机内容超出两行省略号居中。原创 2022-08-17 16:40:45 · 389 阅读 · 0 评论 -
Taro-微信小程序-内容超过两行末尾省略号
Taro-微信小程序-内容超过两行末尾省略号。原创 2022-08-17 16:37:40 · 471 阅读 · 0 评论 -
Taro框架-微信小程序-内嵌h5页面
Taro框架-微信小程序-内嵌h5页面原创 2022-07-29 19:50:22 · 1667 阅读 · 0 评论 -
Vue 方法使用防抖，首次触发直接执行
Vue方法使用防抖，首次触发直接执行。原创 2022-07-29 19:23:08 · 666 阅读 · 0 评论 -
Vue使用Tinymce富文本编辑器自定义toolbar按钮
这里我增加了收缩的按钮 init: { language: "zh_CN", skin_url: "/tinymce/skins/ui/oxide", height: "100%", fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt", font_formats: "微软雅黑=Microsoft YaHei;方正仿宋_GBK=方正仿宋_..原创 2021-11-19 16:51:27 · 2750 阅读 · 0 评论 -
cnpm : 无法加载文件 D:\SoftWare\NodeJS\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。
安装好cnpm后在vscode无法使用这里是因为没有权限，需要用管理员身份进行运行并授权找到管理员执行命令set-ExecutionPolicy RemoteSignedY再去试试 cnpm install ，已经没问题了原创 2021-09-14 15:25:47 · 2372 阅读 · 0 评论 -
tinymce富文本工具栏图标显示!not found！
tinymce富文本编辑器，页面没有显示编辑器的图标，而是显示！not found！，查看控制台显示Uncaught SyntaxError: Unexpected token '<'页面引入import 'tinymce/icons/default'原创 2021-08-03 10:41:28 · 746 阅读 · 0 评论 -
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车1. 引入jsimport htmlDocx from "@/utils/html-docx";2. page-break-before:always;mso-break-type:设置页面分页导出之前设置附表样式 添加<br clear=all style='page-break-before:always;mso-break-type:section-break'>if (item.nodeName == "H1" && ite原创 2021-07-14 15:09:51 · 753 阅读 · 1 评论 -
Vue导出word附带eCharts图表(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车1. 获取ECharts图的domlet dom = document.querySelector(".outline .main .content");2. 获取base64图片数据页面中所有的echarts图的标签id均为 columnChart开头dom.children.forEach(item => { if (item.id && item.id.indexOf("columnChart") > -1) {原创 2021-07-14 14:50:11 · 975 阅读 · 0 评论 -
Vue前端导出标准格式word（承接上一篇Vue纯前端导出word）
设置html为<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">.原创 2021-07-14 10:30:05 · 1280 阅读 · 0 评论 -
Vue纯前端导出word
1. 安装依赖// 1. package.json引入依赖"dependencies": { "file-saver": "^2.0.5", "html-docx-js": "^0.3.1"},2. 页面引入//2. 页面引入import { saveAs } from "file-saver";import htmlDocx from "html-docx-js/dist/html-docx";3. 获取页面中需要的htmllet dom = document.que原创 2021-07-14 10:26:21 · 1183 阅读 · 8 评论 -
Vue使用tinymce富文本编辑器
下载依赖引用依赖内置方法"dependencies": { "@tinymce/tinymce-vue": "^3.0.1", "tinymce": "~5.5.0",},import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示import Editor from "@tinymce/tinymce-vue";import "tinymce/icons/default"; //富文本工具栏图标im..原创 2021-07-13 15:34:41 · 438 阅读 · 0 评论 -
Vue页面内类似格式小组件直接使用
Vue页面内小组件使用适用于页面内多个地方使用的小组件定义组件var limitComponent = { props: ["srcValue", "nameValue", "factValue"], template: '\ <div class="valueContent">\ <div style="padding: 0 0.04rem;">\ <原创 2021-07-13 15:29:23 · 293 阅读 · 0 评论 -
ElementUI 表格设置冻结列后横向滚动条失效
冻结列高度遮住了横向滚动条，导致选不中横向滚动条解决：.el-table .el-table__fixed { height: auto !important; bottom: 16px !important;}原创 2021-05-14 10:08:49 · 1312 阅读 · 0 评论 -
Vue使用input（type=file）上传文件
<a-icon type="plus-square" @click="uploadMaterial()" /> <input type="file" style="display:none" ref="file" @click="e => {e.target.value = '';} " @change="getFileData"/>触发方法@click="e => {e.target.value = ‘’;} " 设置这个方法是为了防止上传两次相同的文件，原创 2021-02-02 09:15:43 · 13146 阅读 · 1 评论 -
ant Design vue 表单的label 不能左右对齐
成为单位中间添加空格和 不能生效解决： <a-form-item :label="compLabel">//在data中定义如下 compLabel: "单\xa0\xa0\xa0\xa0\xa0\xa0\xa0位",完工原创 2021-01-17 12:26:39 · 6775 阅读 · 3 评论 -
ElementUI表格点击行选中复选框
<el-table :data="tableData" ref="tableDom" :height="'100%'" style="width: 100%;" border @selection-change="handleSelectionChange" @row-click="toggleSelection" > toggleSel原创 2021-01-15 14:23:19 · 1447 阅读 · 0 评论 -
ElementUI表格选中行给颜色
设置 :row-class-name="tableRowClassName" <el-table :data="tableData" ref="leftTable" :height="'100%'" style="width: 100%;" v-loading="loading" border :row-class-name="tableRowClassName" :header-cell-style="{ 'text-align':.原创 2021-01-14 16:18:48 · 5379 阅读 · 0 评论 -
ElementUI 下拉树表格箭头占一列
<el-table :data="tableData" ref="tableDom" :height="'100%'" border row-key="itemCode" :tree-props="{ children: 'details' }" style="width: 100%;" .原创 2020-12-31 10:53:07 · 1193 阅读 · 1 评论 -
Element表格表头可鼠标调节宽度
将表头的边框显示出来即可实现(border) <el-table :data="tableData" ref="tableDom" :height="'100%'" style="width: 100%;" border >>>> .el-table--border td { border-right: 0;}...原创 2020-12-23 15:30:36 · 1740 阅读 · 1 评论 -
Element表格 设置表头居中 内容居左
<el-table :data="tableData" ref="tableDom" tooltip-effect="dark" :height="'100%'" style="width: 100%;" :header-cell-style="{'text-align':'center'}"> <el-table-column prop="compName" label="单位" align="left"> </el-table-colum.原创 2020-12-18 18:15:08 · 10706 阅读 · 3 评论 -
Element表格合并行
ElementUI 表格合并行有图有真相el-table 标签中加入 :span-method="objectSpanMethod" 方法对获取到的表格数据进行改造// 第二个参数为一个数组，放需要合并的字段名this.tableData = this.mergeTableRow(this.tableData, ['itemOutCode', 'itemName','itemCode','deptCodeName','voltLevelName'])mergeTableRow(data,原创 2020-12-18 08:50:49 · 666 阅读 · 1 评论 -
Vue中接收二进制文件流实现pdf预览
Vue中接收二进制文件流实现pdf预览后台Controller@RequestMapping("/getPDFStream")@ResponseBodypublic void getPDFStream(HttpServletRequest request,HttpServletResponse response) { try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e) {原创 2020-12-15 20:05:01 · 4476 阅读 · 0 评论 -
Vue导入Excel
导入Excel定义 html元素（安装依赖 npm install xlsx --save）<input type="file" style="display:none" ref="file" @change="getFileData"/> <!--定义一个按钮 触发事件为 chooseFile--><el-button type="primary" @click=“chooseFile”>导入&原创 2020-12-14 15:44:37 · 632 阅读 · 0 评论 -
ElementUI表格点击单元格编辑
实现效果编辑之后对应表格数据该字段值也就发生了变化，控制台输出所有数据即可查看变化实现代码1、自定义编辑组件<template> <div class="editCell"> <div class="canEdit" v-if="CanEdit" @click="beginEdit"> <label v-show="!editStatus"> <span v-if="this.value!== null原创 2020-10-28 17:16:12 · 4268 阅读 · 2 评论