
Vue
花开花落年年
这个作者很懒,什么都没留下…
展开
-
Electron-vue运行页面process is not defined
.electron-vue/webpack.web.config.js new HtmlWebpackPlugin({ filename: "index.html", template: path.resolve(__dirname, "../src/index.ejs"), minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeCom..原创 2021-03-10 14:26:15 · 355 阅读 · 0 评论 -
Vue手机端页面横屏效果
转载于https://www.cnblogs.com/dreambin/p/8884835.html在mounted生命周期中调用方法 resizeScreen() { const _this = this; // 利用 CSS3 旋转 对根容器逆时针旋转 90 度 const detectOrient = function() { let width = document.documentElement.clientWidth, .转载 2021-01-18 18:19:03 · 3598 阅读 · 1 评论 -
Vue插件
文章目录前言一、图片编辑工具1.tui-image-editor2. npm安装依赖3. 使用方法前言记录项目中用到过的实用插件一、图片编辑工具1.tui-image-editor2. npm安装依赖cnpm i tui-image-editor3. 使用方法<template> <div id="tui-image-editor"></div></template><script>import "tui-image原创 2020-12-24 15:55:26 · 360 阅读 · 0 评论 -
vue监听页面元素宽度和高度变化
参考文档:element-resize-detector的github链接1.安装element-resize-detectornpm install element-resize-detector2.引入到script中<script>import elementResizeDetectorMaker from "element-resize-detector";</script>3.在mounted中使用 mounted() { this.wat.原创 2020-08-18 16:50:29 · 6942 阅读 · 0 评论 -
使用dsbridge实现Android端及Javascript端扫码并返回结果
参考文章:dsbridge官方文档需求在Android的APP中使用webview加载vue项目,项目中需要调用手机摄像头实现扫码并根据扫码的结果跳转到另一页面步骤1.添加 JitPack repository 到gradle脚本中allprojects { repositories { ... maven { url 'https://jitpack.io' } }}2.添加依赖dependencies { implementation 'com.gi.原创 2020-08-06 18:23:50 · 1684 阅读 · 1 评论 -
vue中使用gifshot生成GIF图片步骤
参考文档:gifshot官方文档1.在index.html中引入cdn<script src="https://cdn.bootcdn.net/ajax/libs/gifshot/0.3.2/gifshot.js"></script>2.在vue文件中使用<template> <div class="showGIF" id="showGIF"> <div id="gif"></div> </div&g.原创 2020-08-04 17:27:52 · 2887 阅读 · 1 评论 -
使用setInterval动态改变图片的播放速度(实现GIF效果)
要实现的效果通过改变滑块中的数值动态改变GIF播放的速度。刚开始准备通过gifshot插件实现的,先将GIF按帧拆分成一张张图片,再设置每张图片之间的帧间隔,最后再拼接成一个新的GIF图片。但是用这个方法实现的话,在页面中通过滑块改变帧间隔的时候,需要重新绘制渲染GIF,导致中间的等待时间太长,体验很差。所以没有使用这种方法,如果是只要改变一次,不需要重新改变可以使用gifshot实现。参考文档:gifshot文档本文中是通过setInterval添加定时器,通过改变定时器的时间间隔实现的。原创 2020-08-04 17:19:15 · 1208 阅读 · 0 评论 -
vue-router传递参数跳转路由,刷新或从下级页面返回后参数消失
问题项目中碰到一个问题,从页面A->B->C之间携带参数跳转,刷新B页面或从C页面返回B页面时,A传给B的参数消失了,变成了undefined。跳转路由的方式this.$router.push({ path: "/form", query: { row } });解决方法在A页面跳转路由之前用JSON.stringify()将query中的参数从object类型转换为string类型的JSON对象,然后再在B页面用JSON.parse()转换回来即可。修改后的代码跳转之前的页原创 2020-07-28 10:38:29 · 2000 阅读 · 2 评论 -
el-checkbox的change事件
<template> <div> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">原创 2020-06-17 18:14:09 · 31218 阅读 · 2 评论 -
vue中使用HTML5的audio标签实现播放音乐
<audio :src='url' controls="controls" ref="player" preload="true" @canplay="startPlay" @timeupdate="timeupdate" @ended="ended"> <!--(1)属性:controls,preload(2)事件:canplay,timeupdate,ended(3)方法:play(),pause() --> <!--controls:向用户显示音频控件(播放/原创 2020-06-12 11:16:41 · 3485 阅读 · 2 评论 -
Vue+Element UI实现登录表单验证功能
代码: <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="demo-ruleForm" > <el-form-item prop="username"> <el-input placeholder="用户名" v-model="loginForm.username"></el-input> </el-f原创 2020-06-09 19:35:52 · 2941 阅读 · 1 评论 -
VSCode报错:vue : 无法加载文件 D:\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。
问题:cmd终端输入vue -V显示vue版本:VSCode的终端输入vue -V报错:vue : 无法加载文件 D:\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。 PS D:\code\vuecli> vue -Vvue : 无法加载文件 D:\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 abou原创 2020-05-28 22:57:50 · 13535 阅读 · 17 评论