logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

Vue比较字符串变化并高亮变化的部分

最近有个需求为只展示一个字段变更前和变更后变化的部分,新增为红色,删除的灰色加上删除线展示,最终效果如下:其实本质上就是两个文本的diff,找到新增的和删除的然后加上样式,这里用的库为diff_match_patch1.installnpm idiff_match_patch -S2.初始化这个库提供了一个构造函数diff_match_patch,返回一个diff实例供我们使用他的api,官方有很

#vue.js#前端#javascript
Vue使用v-viewer实现图片预览和缩放

v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等等功能,支持配置化.非常强大,这里记录一下使用过程:首先v-viewer的中文文档传送门:Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作 | Mirari's Bloginstall:npm i v-viewer -Simport VueViewer, { directive as vi

#vue.js#前端
vue事件传递多个参数

组件上:@click="clickHandler($event,myParam)"方法:clickHandler($event,myParam)// 事件对象放第一个,自定义参数往后按顺序放当然方法里事件对象接收时的形参名可以取别的,比如clickHandler(e,myParam)扩展:如果单独只接收自定义参数:组件上:@click="clickHandler(myParam)"方法:click

Vue播放音频声音

Audio对象有时我们并不是想要在页面上放置一个播放音频的控件然后人为点击去播放,而是通过一个图标点击事件或者js去控制它的播放暂停等操作,此时我们就要使用到Audio对象,博主这里是Vue项目,所以在data中使用的同一个Audio实例export default {data(){return {// 实例化一个音频播放器对象audio: new Audio()}}}然后想要在后续只

vite/Vuecli配置proxy代理解决跨域

上代码:import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import { resolve } from 'path';// https://vitejs.dev/config/export default defineConfig({server: {port: 9090,strictPort: tr

#前端
Vue修改数据页面不更新的问题解决

第一种场景:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到:第二种场景:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到:解决方法1:静默刷新(使用v-if的特性)在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的解决方法2:Vue.$set(官方推荐)官方对

Vue修改数据页面不更新的问题解决

第一种场景:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到:第二种场景:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到:解决方法1:静默刷新(使用v-if的特性)在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的解决方法2:Vue.$set(官方推荐)官方对

vue+axios实现文件下载

首先后端要返回的数据格式为文件流的形式响应头为:Content-Type:application/octet-stream这是请求后端返回的信息:前端axios请求:// 下载模板const exportAlterExcelTemplate = () => {return _ajax({url: '/admin/vocabulary_manager/export_alter_excel_te

axios控制台爆红问题Uncaught (in promise):xxx解决

首先还原问题代码:err => {return Promise.reject(err)}在axios的拦截器中有这么一句代码Promise.reject(new Error('错误内容')),用来抛出错误并打印在控制台并阻止代码往下继续运行,但是实际中我们并不想把这玩意儿打印出来:Uncaught (in promise)并且我们在调用请求时:axios.get('/api').then(r

axios+elementui的upload使用http-request自定义文件上传

<!--关于组件的部分属性:action:上传的地址,和axios没关系,elementui自己发请求:show-file-list:是否显示上传的文件列表:on-success:上传成功的回调:on-error:上传失败的回调:before-upload:上传之前的回调,可以在这里检测文件类型和大小,还可以给额外参数赋值要带到服务器的数据i...

    共 11 条
  • 1
  • 2
  • 请选择