前端
关注
分享
扫一扫
偶阵雨丿
这个作者很懒，什么都没留下…
展开
-
多个不同尺寸图片列表展示
在img标签中增加样式：object-fit: cover;<img :src="url" style="object-fit: cover;width:200px;height: 200px;/>展示的图片尺寸均为img标签设置的宽高图片尺寸过大则仅展示整个图片的一部分但在列表中看起来比较规整，可设置点击事件，点击看原图【图片整体】...原创 2019-11-05 15:19:16 · 636 阅读 · 0 评论 -
wangEdit 复制word到富文本框
word自带非常多的有样式代码，自己测试10几页的word复制到富文本框有500多kwangEdit可以用如下代码对复制来的内容进行过滤过滤后有不到100k的内容，也可以自己的定义过滤方法 //粘贴来的内容过滤图片 this.editor.customConfig.pasteIgnoreImg = true // 关闭粘贴样...原创 2019-11-05 15:11:02 · 980 阅读 · 0 评论 -
前端图片压缩上传
此demo为大于1M对图片进行压缩上传若小于1M则原图上传，可以根据自己实际需求更改。demo源码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <sc...转载 2019-10-14 17:19:59 · 118 阅读 · 0 评论 -
圆形头像显示的CSS，不管原图是比例什么样，一律控制为圆形
控制div为圆形，内部图片填充这个div即可<div class="outSideDiv"> <img class="imgClass" :src="Url"/></div> .outSideDiv{ margin: auto; width: 50%; padding-top...原创 2019-09-27 16:43:53 · 631 阅读 · 0 评论 -
vue 项目采用wangedit富文本编辑器始末,重点在图片上传
官网文档很详细，建议先看文档了解一番。我在使用过程中主要遇到上传图片和调整编辑器高度的问题安装：npm install wangeditor编写组件以便日后复用，将wangedit封装为独立组件：<template> <div id="wangeditor"> <div ref="editorElem" style="text-...原创 2019-09-27 17:31:14 · 1027 阅读 · 0 评论 -
vue+elementUI 分页多选弹窗回显,编辑回显
实现分页多选弹窗回显功能父级页面以可关闭tag标签形式展示已选1.编写分页多选弹窗组件<template> <el-dialog title="关联问题" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" ...原创 2019-09-27 18:31:55 · 1926 阅读 · 0 评论