vue 实现剪裁图片并上传服务器功能
预览链接点击预览效果图如下所示，大家感觉不错，请参考实现代码。
需求 [x] 预览：根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪：移动裁剪框右侧预览区域可实时预览 [x]...
2020-05-27
Vuex中mutations与actions的区别详解
区分 actions 和 mutations 并不是为了解决竞态问题，而是为了能用 devtools 追踪状态变化。事实上在 vuex 里面 actions 只是一个架构性的概念，并不是必须的，说到底只是一个函...
2020-05-27
cropper js基于vue的图片裁剪上传功能的实现代码
前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：https://www.freexyz.cn/article/135719.htm首先下...
2020-05-27
vue中使用cropperjs的方法
用vue的项目里需要对图片进行裁剪，于是使用了cropperjs，在使用的过程中也踩过一些坑，以下是在.vue文件里cropperjs的使用方法和经验教训总结：在使用之前，先引入：在项目里，运行：npm i...
2020-05-27
vue.js 实现图片本地预览 裁剪 压缩 上传功能
以下代码涉及 Vue 2.0 及 ES6 语法。目标纯 javascrpit 实现，兼容ie9及以上浏览器，在本地做好文件格式、长宽、大小的检测，减少浏览器交互。现实是残酷的，为了兼容Ie9 还是用上...
2020-05-27
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。本文是在vue-cli项目下封装图片裁剪插件，效果图如下：话不多说，看步骤吧。第一步：准备开发环境cr...
2020-05-27
React Native 图片查看组件的方法
React Native 图片查看组件：react-native-image-viewer，纯JS组件，小巧快速的图标查看组件。支持图片放大缩小，支持图片加载失败设置替代图片，支持将图片保存到本地等功能。效果图...
2020-05-27
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
一、报错内容类似：Expected indentation of 0 spaces but found 4将 build 文件下的 webpack.base.conf.js 文件里面的下面一段代码注释掉（eslint-loader内容）,重新运行.二、报...
2020-05-27
基于cropper.js封装vue实现在线图片裁剪组件功能
效果图如下所示，github:demo下载cropper.jsgithub:cropper.js
官网（demo）cropper.js 安装 npm或bower安装npm install cropper# orbower install cropperclone下载：下载地址
gi...
2020-05-27
vue 虚拟dom的patch源码分析
本文介绍了vue 虚拟dom的patch源码分析，分享给大家，具体如下：
源码目录：src/core/vdom/patch.js function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, remo...
2020-05-27
浅谈vue单一组件下动态修改数据时的全部重渲染
今天在学习vue的过程中，发现一个有趣的现象。在某一组件下的某一数据通过点击事件被动态修改的时候，对应view中的数据同步的进行了修改，没错，这不是废话吗，vue的一大特色就是数据...
2020-05-27
vue2.0 子组件改变props值,并向父组件传值的方法
为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因：prop 作为初始值传入后，子组件想把它当作局部数据来用；prop 作为初始值传入，由子组件处理成其它数据输出。对这两种原...
2020-05-27
Vue 父子组件的数据传递、修改和更新方法
父子组件之间的数据关系，我这边将情况具体分成下面4种：父组件修改子组件的data，并实时更新子组件通过$emit传递子组件的数据，this.$data指当前组件的data(return{...})里的所有...
2020-05-27
JavaScript判断日期时间差的实例代码
js判断日期时间的代码如下所示：alert(GetDateDiff("2018-02-27 19:20:22","2018-02-27 09:20:22","hour"));function GetDateDiff(startTime, endTime, diffType) { //将xxx...
2020-05-27
在vue中封装可复用的组件方法
本次封装的组件以toast组件为例以前使用移动端ui插件时，通过一句代码比如 $.toast( ‘ 需要显示的内容 ' )，从而在页面上展示这段文字，并在一定时间后消失。现在我们也尝试自己...
2020-05-27
Vue中的slot使用插槽分发内容的方法
本文题材来自：https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9<slot></slot>标签，简单来说就是...
2020-05-27
vue.js 获取select中的value实例
如下所示：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="./vue.js"></script></head><body>...
2020-05-27
浅谈Vue Element中Select下拉框选取值的问题
之前写了.一个原生的select的，因为展示效果原因，给删除掉了，忘记保存代码了，现在大家展示使用elementUI的下拉框封装一个组件，供咱们项目中经常调用，减少代码量。html：<el-select v...
2020-05-27
Vue2.0系列之过滤器的使用
vue2.0已经废弃了过滤器，需要自定义过滤器，用于一些常见的文本格式化。
感觉超级好用！！
过滤器可以用在两个地方：双花括号插值 和 v-bind表达式。过滤器应该被添加在JavaScript表...
2020-05-27
vue项目tween方法实现返回顶部的示例代码
一、场景
tween.js是一款可生成平滑动画效果的js动画库
当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能，不过要更...
2020-05-27
Spring Boot/VUE中路由传递参数的实现代码
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。如：http://localhost:8080/router/tang/101?type=spor&num=12。下面根据代码看一下，VUE 和 Spri...
2020-05-27
vue判断input输入内容全是空格的方法
比如input中的数据和data中的msg双向绑定。那么我们可以 判断先把msg以空格拆分成数组，然后拼接起来，判断字符串的长度，如果长度为0，证明输入的就全是空格了，如下：msg.split(" ")...
2020-05-27
js判断输入框不能为空格或null值的实现方法
实例如下所示： var sno = $('#sno').val(); var sname = $('#sname').val(); if((sno.indexOf(" ") >= 0 || sno == null) || (sname.indexOf(" ") >= 0 || sname == null)){...
2020-05-27
原生JavaScript实现todolist功能
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。
主要功能： 将用户输入添加至待办项 可以对todolist进行分类，用户勾选即将待办项分入已...
2020-05-27
select标签设置默认选中的选项方法
方法有两种。第一种 通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。< select id = "sel" >< option value = "1" >1</ option >< o...
2020-05-27
JS中利用FileReader实现上传图片前本地预览功能
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到URL再渲染到页面上，这样做在图片比较小的时候没什么问题，大一点的话就会比较慢才能...
2020-05-27
vue中添加mp3音频文件的方法
有的时候我们需要在vue中添加音频文件，但是直接将音频文件放置了assets目录下的时候，会发现并不能正常播放，下面是两种常用的配置方法：方法一、将音频文件放置在static目录中，然...
2020-05-27
VUE2.0+Element-UI+Echarts封装的组件实例
本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示，实现了表格和图之间的切换和图和表之间的转置。-html<div class="resultDiv"> <d...
2020-05-27
使用vue-aplayer插件时出现的问题的解决
本文介绍了使用vue-aplayer插件时出现的问题的解决，分享给大家，具体如下：安装
$ npm install vue-aplayer --save使用
<aplayer autoplay :music="{ title: 'Preparation', aut...
2020-05-27
Element-ui table中过滤条件变更表格内容的方法
组件中：<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column prop="sex" label="性别" width="100" :formatt...
2020-05-27
vue将时间戳转换成自定义时间格式的方法
1、首先建立一个date.js文件，写入如下代码：export function formatDate (date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').subs...
2020-05-27
利用vue和element-ui设置表格内容分页的实例
html代码因为我写在template中，也就是新建了组建中，贴出代码。<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"></el-p...
2020-05-27
浅谈FastClick 填坑及源码解析
最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时，光标点击总是不好定位到正确的位置：如上图，具体表现是较快点击时，光标总会跳到 textarea 内容的...
2020-05-27
vue2.0 + element UI 中 el-table 数据导出Excel的方法
1、安装相关依赖主要是两个依赖npm install --save xlsx file-saver如果想详细看着两个插件使用，请移步github。https://github.com/SheetJS/js-xlsx https://github.com/eli...
2020-05-27
详解vue2.0+vue-video-player实现hls播放全过程
起因最近公司想做一套视频点播服务，因为考虑到成本问题，领导希望一切都用开源系统来完成。基于这个出发点，那就肯定排除了各大云视频平台（腾讯云 音视频点播VOD、网易云视频、七...
2020-05-27
vue2.0+vue-dplayer实现hls播放的示例
起因之前写了一篇《 vue2.0+vue-video-player实现hls播放》，里边有提到在用vue-video-player之前，我尝试着使用vue-dplayer实现hls播放，但是当时时间紧迫，还没有完成,就换方案了...
2020-05-27
详解node.js 下载图片的 2 种方式
具体代码如下所示：var request=require("request");var fs=require("fs");function download1(url,filename,fn){request(url).pipe(fs.createWriteStream(filename).on("clo...
2020-05-27
vue 使用eventBus实现同级组件的通讯
新创建一个vue实例用于调度事件的绑定和发送可以做到同级组件相互通讯，传递参数，点击第一个组件会修改第二个组件的label值，点击第二个组件会修改第二个组件的label值<!DOCTYPE...
2020-05-27
vue2.0 自定义 饼状图 (Echarts)组件的方法
1、自定义 图表 组件Echarts.vue<!-- 自定义 echart 组件 --><template> <div> <!-- echart表格 --> <div id="myChart" :style="echartStyle"></div> </div></template> <s...
2020-05-27
vue slot 在子组件中显示父组件传递的模板
父组件使用没有指定slot属性，默认为default在slot中可以使用默认值，如果父组件没有传递对应的slot，则会显示默认值<!DOCTYPE html><html><head> <meta charset="utf-8"> <scr...
2020-05-27
vue实现裁切图片同时实现放大、缩小、旋转功能
本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下：实现效果： 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 form...
2020-05-27
浅谈React组件之性能优化
高德纳: "我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。"不要将性能优化的精力浪费在对整体性能...
2020-05-27
vue element-ui table表格滚动加载方法
添加全局注册事件，用来监听滚动事件window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap...
2020-05-27
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。知识点：组件的写法及运用组件之间的数据传递（props的运用）组件之间的数据传递（$emit的运用）动态数据的绑定（v...
2020-05-27
完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中，我遇到这样一个问题，在Model中使用select下拉框组件。但是当弹出框超过一屏需要滚动时，select的下拉选项会出现错位（下图1为正常，图2为滚动后，下拉选项错位。...
2020-05-27
解决vue 更改计算属性后select选中值不更改的问题
先上代码：//...<body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <...
2020-05-27
关闭Vue计算属性自带的缓存功能方法
使用Vue的小伙伴都会知道，vue的计算属性。这个是这个样子解释的，当某些依赖值发生变化的时候，其自身的值也会发生变化，与之先关的DOM也会发生变化，通常呢，这个计算属性里面都会有...
2020-05-27
AjaxUpLoad.js实现文件上传功能
AjaxUpLoad.js的使用实现无刷新文件上传，如图。图1 文件上传前图2 文件上传后1、创建页面并编写HTML上传文档:
<div class="uploadFile"> <span id="doc"><input type="te...
2020-05-27
在Vue中使用Compass的方法
写作动机
拖了蛮久的，总算下定决心要给自己写一个个人网站，不仅要看起来狂拽酷炫，技术也要OK，所以趁此机会也将自己不熟悉的技术拿来锻炼一下。网站打算用Vue来作为前端框架，Css...
2020-05-27
Vue的轮播图组件实现方法
今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。本文章采用Vue...
2020-05-27
