在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到三个插件,具体的优劣势的看自己的使用吧,我目前只是在电脑查看效果,分别是viewerjs插件、基于photoswipe的vue-photo-preview插件以及vue-picture-preview插件第一种:viewerjs使用介绍viewerjs插件截图1、先安装依赖 npm ins
语言选项语言切换注意前言上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在实现这两个功能模块前,先来解决一下界面文字国际化的问题。开始国际化(简称 I18N),本地化(简称 L10N);这两者的目的都是用于让你的应用程序支持多个国家和区域的语言,它们看起来很相似,但是有一些细微的区别,本文不对此进行深入探讨,有兴趣的可以自行搜索。ABP后端支持的是本地化,而vue-e
今天在VUE里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正。我这里使用的是元素的用户界面的上传图片组件首先引入元素的UI(这个我就不作赘述了,详情参考element-ui官方文档)在引入富文本组件VUE-鹅毛笔编辑器使用在main.js引入相应的样式import VueQuillEditor from 'vue-quill-editor' import 'quill/d
实现多张图片和单张图片上传和删除功能。 前端代码如下: <style> #app { background-color: white; padding: 15px 15px; } .el-row { margin: 60px 20px; } input[type="file"] { display:
原创 2022-01-11 10:19:56
318阅读
1. sessionStorage   sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。  用法:     储存: 1. 点(.)运算符                    &nbsp
作者:Pseudo 凡是要知其然知其所以然文件上传相信很多朋友都有遇到过,那或许你也遇到过当上传大文件时,上传时间较长,且经常失败的困扰,并且失败后,又得重新上传很是烦人。那我们先了解下失败的原因吧!前面小编也整理过关于文件上传的详细原理和文件上传技巧:手把手教你前端的各种文件上传攻略和大文件断点续传 一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」 据我了解大概有以下原因:
前情回顾在上章节中,我们讲解了项目打包,默认,是打包在根目录下面的。当然,我们可以通过设置,打包到任意子目录中去。但是,我们之前的项目是没有引入资源的。比如,引入图片资源,js资源,或者字体图标之类的。那么各位可能在这个中间又会踩坑,所以,我再写一篇博客,专门来说说这个问题。在 vue 文件中,引用图片例如,我们将一张图片放到资源目录 /static/image/lyf.jpg&nbsp
转载 7月前
127阅读
首先在这里不建议大家做这样的奇葩操作如果你们有老系统必须要做这样的改造,那是无奈之举先看代码,这些代码是我直接从我完成的项目中提取出来的可以直接使用,不过element ui这个空间布局我稍微做了css修改,这里就不贴出css了,这些代码之后会有完整解释,我会把我这次经历一一解释清楚如何一步一步填坑<el-upload class="img-upload"
转载 9月前
48阅读
vue 基于原生JS实现等宽瀑布流布局首先js 实现登录瀑布流原理1: 通过定位的方式是我们实现瀑布流的最基本的原理,只要我们动态的设置它的top值、left值,就能让它排列。注意: 图片的真实高度500(px) 真实宽度 300(px) 可能很高 比如我们规定在我们容器盒子中 图片盒子等宽 值为200(px), 我们需要手动去计算每个图片在我们容器中的高度, 300 / 500 =
转载 7月前
133阅读
主要谈一下实现过程,首先给大家看下贴图: 我用了一个简化版本的来做的,具体的字段可以自己加进去,下面说一下我的实现过程吧第一步:搭建页面(主要用elementUI自带组件) 搭建时我采用的是elementUI的el-upload标签,因为不是即时上传,所以action我设置为空,如下代码所示:<el-upload action="" list-type="picture-card"
转载 2024-01-28 18:45:45
326阅读
基于Vue+ElementUI+vod-js-sdk-v6,完成腾讯云点播视频上传功能最近做的一个项目,需要用到腾讯云点播的视频上传!!写一个尽可能详细的博客供各位参考,欢迎指正; ok,下面进入正题。 首先是需要用到的依赖:ElementUI、vod-js-sdk-v6、axiosnpm i vod-js-sdk-v6 npm i axiosimport vue from 'vue' impor
转载 8月前
325阅读
一、使用组件介绍el-form:表单组件,用于绑定数据el-upload:上传组件,内置有提交请求方法(但是本demo要求有token验证,因此需要调用demo中自定义的axios请求)el-dialog:对话框组件,用于显示预览图片二、实现过程1. 实现代码1.1 template 中代码<el-form :model="addForm" :rules="addFormRules" ref
最近在整理以前的代码,碰到了写的element-ui整合vue的项目感觉挺好用的,就用一个案例分享给大家吧。首先还是直接附上一份单独网页版的代码吧,复制导入vue.js即用,不需要后端,感受下element-ui的强大。如果想要直接的案例,不想进行简单尝试,请直接调到标题二:案例环境1. 单独网页版代码:<!DOCTYPE html> <html lang="en"> &l
转载 2024-04-23 16:00:34
95阅读
vue图片裁剪功能组件首先说明一下,这个组件实际的裁剪图片功能是交给后台实现的,前端需要提供的是几个参数,具体如下最终效果图:(可以滚动鼠标滚轮放大缩小图片,可以拖拽图片,兼容谷歌火狐等浏览器)创建cropper.vue组件,组件代码如下:<template> <div> <el-upload class="upload-demo" :actio
原创 2023-04-23 19:17:57
894阅读
解决方法1.压缩图片 应尽可能地压缩项目中的图片,或使用svg矢量图、雪碧图、webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的。2.路由懒加载 可以在路由配置里,使用require引入页面或组件实现路由懒加载,每个页面大约可以减少10—50kb的打包体积,示例如下:import Vue from 'vue' import Router f
你的选择是做或不做,但不做就永远不会有机会。
转载 2021-07-05 10:49:46
403阅读
分析Element-ui封装思想在平时写业务或者是写玩具的时候为了方便,我们会使用各种各样的组件库。虽然说基本需求看文档就可以了,但是文档中提供的方法和业务需求相比肯定是有一定差距的,这时候就需要自己封装组件了;并且,在写了一些代码后感觉,其实在不同的项目中写过功能差不多相同的代码,那为什么不封装一下方便以后、或者是其他人使用呢?写这篇博客的时候参考了b站up主樱满空的视频。文章内容会不断的更新,
1、安装 npm i element-ui -S 2、完整引入 其中,样式文件是单独引用的。 3、按需引入(需要借助babel-plugin-component) npm install babel-plugin-component -D 然后创建babel的配置文件 然后就可以按需引入了: 在引入 ...
转载 2021-10-23 21:54:00
423阅读
2评论
文章目录项目部署视频前言一、前端搭建1、下载前端模板2、项目运行二、前端登录改造1、改造前端项目2、登录接口请求详解3、数据响应三、总结 前言这次拖了一个多月才更新,最近自己发生了很多的事情,有时间和大家一起聊聊,所以一直没来得及更新,这次终于能静下心来写文章了,在这期间我还谋划了一个大的规划,那就是整理Java。我将系统的进行学习,学习的同时我将会写基础的学习文章,估计要持续四个月左右吧,从J
前言在上一篇博客vue2响应式原理之递归侦测全部对象属性,讲述了对象中嵌套对象或者数组的深层嵌套进行数据劫持使对象全部属性变得响应式,这一篇将讲述如果数据发生变化通过getter和sertter进行依赖收集通知Watcher进行视图更新一、依赖是什么?使用到数据的地方称为依赖,我们会在getter中收集依赖,在setter中触发依赖。我们把依赖收集的代码封装成一个Dep类用来管理依赖,然后在每个O
  • 1
  • 2
  • 3
  • 4
  • 5