Vue
哪有那么可爱的小蝈蝈
吃得好饱
展开
-
图片上传获取图片基本信息(原始分辨率等)
// beforeUpload(file) {// console.log(file)// return new Promise((resolve, reject) => {// const url = window.URL || window.webkitURL// const img = new Image()// img.onload = function() {// file.width = img.width// file原创 2021-05-27 11:36:26 · 1729 阅读 · 0 评论 -
视频上传前获取视频源信息(时长,分辨率等)
视频上传前获取视频源信息(时长,分辨率等)因为视频与图片不同,没有 new video 这种创建方法,所以使用document.createElement(‘video’),其他方式与获取图片源信息的方法一致,在这里使用了vue+element ui,在el-upload标签中的beforeupload方法,在文件上传前进行信息获取,进行校验并拦截videoSize(file) { return new Promise((resolve, reject) => { co原创 2021-05-27 11:44:23 · 1710 阅读 · 0 评论 -
vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素
vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素在form表单中做url验证,但是input框是动态数组可添加的,渲染时使用v-for遍历数组生成对应数量的input输入框,此时使用表单验证,他只会绑定在第一个渲染的input上,此时就需要使用到from的动态验证要渲染的表单input结构如下 <el-form-item label="标签"> <div v-for="(item, index) in form.input"原创 2021-04-29 18:26:19 · 4198 阅读 · 1 评论 -
vue+element-ui点击按钮实现图片全屏预览
vue+element-ui点击按钮实现图片全屏预览点击随便一个自定义按钮实现图片全屏遮罩预览效果如下按钮代码<el-button icon="el-icon-full-screen" class="clicktobig" type="primary" @click="openViewer" />利用element-ui中的el-image组件,使用el-image-viewer组件实现,组件代码如下<el-image-viewer v-if="payVou原创 2021-04-14 18:49:48 · 4198 阅读 · 2 评论 -
Vue.js 实现ToDoList 待办事项列表(详细注释)
Vue.js 实现ToDoList 待办事项列表(详细注释)实现目标1、添加删除事件2、点击多选框将事件移到已完成事件或未完成事件中3、双击未完成事件可以修改该事件名称(已完成事件不可修改名称)4、点击clear清空全部事件5、点击每个事件后的a标签删除该事件6、利用LocalStorage本地存储实现将数据保存在客户端中7、实现数量统计变化效果实现工具Vue.js实现代码:<!DOCTYPE html><html lang="en"> <head&原创 2020-12-19 22:55:19 · 3514 阅读 · 2 评论