Vue
Vue随笔。。。
DuebassLei
纵有疾风起,人生不言弃 blog.gaosanshi.top
展开
-
js删除数组中指定对象
js删除数组中指定对象需求说明从数组中移除指定对象函数封装 `removeArray`从数组中获取指定对象索引函数封装 `getArrayIndex `在`Vue`中调用函数使用需求说明点击删除按钮删除指定行数据,即删除数组中指定对象。_arr表示一个Array数组,里面包括了很多的对象如下图:从数组中移除指定对象函数封装 removeArray/** * 从数组中删除指定对象 * _arr:数组 * _obj:需删除的对象 * */export function rem原创 2022-02-11 20:01:10 · 5941 阅读 · 1 评论 -
vue之vue-pdf预览pdf内容文字丢失问题
环境vue-pdf 4.0.6vue 2.x前言上传一般的普通pdf正常预览,但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示,文字丢失问题。效果对比修改前效果修改后正常效果解决方法1. 首先查看控制台报错信息Warning: TT: undefined function: 3pdf.js:468 Warning: Error during font loading: The CMap "baseUrl" parameter must be specified原创 2021-01-28 12:30:51 · 15576 阅读 · 14 评论 -
axio使用get方法之传递对象数组问题及解决方法
axios的get方法传递对象数组问题描述解决办法问题描述使用axios发送get请求,传递参数如下格式:const params = { filter: [{ property: 'optionTypeId', operator: 'eq', value:'TYPE10' }] }发送请求后,发现请求失败,查看控制台参数为原创 2020-08-26 13:12:47 · 3456 阅读 · 0 评论 -
Capacitor实现WebView中访问的自定义Android代码
前言Capacitor 自定义插件 实现WebView中访问的自定义Android代码最近在工作中使用Vue+Vant+Capacitor 开发打包移动端应用,因业务需求需与原生的Android进行数据通信,通过webview访问原生Android中的数据,即Android 与 js 互调。怎么使用Capacitor打包Vue移动端项目,见之前的一篇文章:Capacitor+Vue+Vant移动端打包总结下面是亲测实现了基于Capacitor中Android和js互调。WebView可访问的原创 2020-06-13 18:43:26 · 1831 阅读 · 0 评论 -
Vue中使用Viser(基于AntV-G2可视化引擎)
前言AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用。安装viser-vueyarn add viser-vueyarn add @antv/data-setmain.js中引入import Viser from 'viser-vue'Vue.use(Viser)定义d2demo.vue组件<template> <div> <v-chart :forceFit="true" :height="heig原创 2020-05-13 19:48:32 · 16759 阅读 · 1 评论 -
Capacitor+Vue+Vant移动端打包总结
Capacitor 打包Android出错问题总结问题一在使用Capacitor打包Android项目上运行该应用程序时遇到问题。Android Studio拒绝运行项目并显示以下错误:错误:无法找到脚本“:xxx\android\capacitor-cordova-android-plugins\cordova.variables.gradle”它不存在。解决办法如果您无法在a...原创 2020-04-23 19:06:18 · 6293 阅读 · 4 评论 -
van-picker级联选择(获取多个字段)
前言使用Vant的picker级联选择返回多个字段数据信息官方文档修改onConfirm事件 //data返回数据数组,index返回索引数组 onConfirm(data,index) { let vm = this; let str = ""; // 呈现...原创 2020-04-21 14:42:03 · 4312 阅读 · 0 评论 -
van-picker级联选择(自定义字段显示)
前言van-picker级联选择将自定义平铺结构转化为层级结构数据动态$set()给每一条数据对象添加text属性用于展示数据处理原始数据[ {id: 'node1',pid: 'root',content: 'test'}, {id: 'node2',pid: 'root',content: 'test'}, {id: 'node3',pid: 'node1',c...原创 2020-04-20 18:24:10 · 12270 阅读 · 0 评论 -
Vue动态路由传参和监听路由
Vue动态路由传参query传参params传参//定义Detail路由{ path: '/detail/:id', name: 'Detail' component: () => import('@/views/Detail.vue')}1.query方式传参和接收参数传参:this.$router.push({ path...原创 2020-04-20 10:21:44 · 1895 阅读 · 1 评论 -
Cordova+Vue打包Android Apk
文章目录Cordova打包Vue移动端项目Android环境要求安装Cordova安装Android SDK安装GradleCordova创建项目Vue项目使用Cordova打包创建一个的Vue项目github源码Cordova打包Vue移动端项目Android环境要求CordovaGradleAndroid SDKJava JDKNode.js安装Cordovanpm ...原创 2020-03-23 15:05:33 · 707 阅读 · 0 评论 -
Vue使用手写签名组件Sign-Canvas
前言使用【sign-canvas】组件二次封装自定义手写签名组件,一个基于canvas开发封装实现的通用手写签名板(电子签名板),支持PC端和移动端,效果如下图所示:安装yarn add sin-canvas全局引入import SignCanvas from "sign-canvas";Vue.use(SignCanvas);组件封装<template> &...原创 2020-01-20 19:05:12 · 3025 阅读 · 7 评论 -
docker+nginx部署vue项目
docker+nginx部署vue项目原创 2020-01-02 20:21:54 · 3168 阅读 · 3 评论 -
vue 生命周期
vue 生命周期<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2019-12-21 23:35:01 · 174 阅读 · 0 评论 -
vue-element多文件上传多次请求接口问题解决办法
element-ui多文件上传请求多次接口解决办法问题使用element-ui上传多文件时,发送请求出现多次提交问题,重复上传警告: 切勿将发送后台请求的axios方法写在自定义上传方法如:http-request="handleHttpRequest"中,否则将会按文件数量发送,造成多次请求,不符合预期提交一次上传多个文件。覆盖默认上传,自定义上传:http-request覆盖默认...原创 2019-11-20 11:56:59 · 8400 阅读 · 4 评论 -
element-ui 表单数据提交之多图片上传
Vue element 表单数据提交之多图片上传需求目前有这样一个表单,其中包含基础input数据,及选择多图片同表单一起提交后台选中后:本地预览选中图片上传时:多图片上传上传表单效果如下:图片选择表单 <el-form-item label="附件" :label-width="formLabelWidth"> <...原创 2019-11-19 20:39:11 · 4383 阅读 · 5 评论 -
Vue中axios实现文件流下载
文章目录Vue中axios实现文件流下载前言:bookmark:以文件流返回:bookmark: axios请求封装定义`Api`接口调用导出`excel`文件接口Vue中axios实现文件流下载前言后端以文件流的形式返回数据,前端多选数据导出excel文件????以文件流返回 String fileName = "PersonalCertInfo"; OutputStream out ...原创 2019-11-14 19:47:33 · 1435 阅读 · 3 评论 -
vue-pdf预览(以二进制格式存储在数据库中的文件)
前言使用vue-pdf插件预览数据库中以二进制存储的pdf文件之前写的一篇是: vue-pdf查看本地pdf文件及打印乱码问题处理后端文件以流的方式返回 @GetMapping(value="/download/{pid}") @ApiOperation(value = "责任书下载", httpMethod = "GET", notes = "责任书下载") public voi...原创 2019-11-04 19:09:53 · 2749 阅读 · 0 评论 -
nginx部署VuePress静态个人博客
nginx部署VuePress生成的静态博客编译打包 yarn docs:build #编译打包打包成功nginx配置 location / { root html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; }...原创 2019-10-31 15:21:37 · 3740 阅读 · 0 评论 -
VuePress搭建个人网站
VuePressVuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的全局安装yarn global add vuepress # ornpm install -g vuepres新建文件夹vpressblog并进入基础配置项目初始化yarn init -y...原创 2019-10-29 17:18:51 · 775 阅读 · 0 评论 -
Antd-vue Table组件添加Click事件,实现点击某行数据操作
给Table组件添加Click事件,实现点击某行数据操作customRow设置行属性Function(record, index)通过customRow 属性给table添加自定义事件<a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowK...原创 2019-09-25 00:21:42 · 8215 阅读 · 0 评论 -
时间戳计算所间隔天数
时间戳计算间隔天数计算Math.floor((结束时间−开始时间)/(24∗3600∗1000))Math.floor((结束时间-开始时间)/(24*3600*1000))Math.floor((结束时间−开始时间)/(24∗3600∗1000)) <template slot-scope="{ row }"> <...原创 2019-09-25 00:32:33 · 4659 阅读 · 0 评论 -
vue-pdf查看pdf文件及打印乱码问题处理
目录内容vue-pdf 使用安装引入自定义封装pdf预览组件使用预览效果点击下载打印预览pdf打印乱码解决办法解决办法乱码解决,打印预览正常以下为本人修改的pdfjsWrapper.js文件,亲测解决乱码问题内容vue-pdf预览pdf文件及打印预览乱码问题解决vue-pdf 使用安装npm install --save vue-pdf引入import pdf from "vue...原创 2019-09-27 21:40:32 · 6934 阅读 · 5 评论 -
vue中使用video.js插件实现视频播放
文章目录video.js实现视频播放安装main.js中引入在VideoPlayer.vue 组件中使用效果video.js实现视频播放在vue中使用video.js实现文件播放。安装yarn add video.jssuccess Saved 24 new dependencies.info Direct dependencies└─ video.js@7.6.5info Al...原创 2019-09-27 22:57:29 · 8910 阅读 · 6 评论 -
JavaScript将JsonArray转为JsonTree
文章目录需求核心代码测试效果需求从后端接口获取数据,将List集合以Json形式返回,返回数据形如下所示,为了前端以树形结构展示,需将一维数据转化为树形结构数据。[ { 'groupId': '1', 'appId': 'M78', 'groupCode': '1', 'par...原创 2019-09-27 23:10:23 · 532 阅读 · 0 评论 -
JavaScript将JsonObject转为JosnArray
文章目录需求获取到的数据如下,需要将result对象转成json数组核心代码调用转化函数测试验证需求在使用Antd-vue的Table组件时,数据dataSource为数组类型,现在使用查询接口的时候返回的时json对象,需要前台进行转化为json数组获取到的数据如下,需要将result对象转成json数组{ "resultCode": 0, "result": { ...原创 2019-09-27 23:21:23 · 758 阅读 · 0 评论 -
vue中使用vue-quill-editor富文本编辑器及自定义工具栏
文章目录前言使用vue-quill-editor安装引入使用效果自定义vue-quill-editor工具栏Quilljs官网说明自定义工具栏参数项前言在Vue项目中使用vue-quill-editor富文本编辑器及编辑器自定义工具栏。使用vue-quill-editor安装yarn add vue-quill-editor --save引入import VueQuillEdito...原创 2019-09-29 12:34:55 · 7307 阅读 · 0 评论 -
在vue中使用moment.js插件格式化日期
Moment.js格式化日期前言在vue项目中使用安装moment.js包定义时间格式化全局过滤器参考前言Moment是一个JavaScript 日期处理类库在vue项目中使用安装moment.js包npm install moment --save定义时间格式化全局过滤器在需要使用的组件中导入import moment from 'moment'export default...原创 2019-09-24 14:56:44 · 483 阅读 · 0 评论