没有咸鱼的梦想-CSDN博客

原创 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 313

转载 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 3418 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 274

原创 CSS自定义滚动条样式

/* 滚动条整体 */.el-col::-webkit-scrollbar { width: 10px;}/* 滚动条内部滑块 */.el-col::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.2); background: #66b1ff;}/* 滚动条外部容器 */.el-col::-webkit-scrollbar-track {

2020-12-23 15:04:02 137

原创 sheetjs导入Excel(.xlsx)文件并解析为JSON或HTML格式

sheetjs github地址sheetjs 效果演示使用sheetjs将excel文件解析为HTML/JSON等格式安装使用上传文件监听上传事件效果源文件(.xlsx)转换后的效果转换方法安装npm install xlsx const XLSX = require("xlsx");使用上传文件 <input type="file" ref="upload" accept=".xls,.xlsx" class="o.

2020-12-02 11:48:52 2134

原创 TypeScript学习笔记

TypeScript笔记对象类型对象类型的几种形式类型注解(type annotation)类型推断(type inference)对象类型对象类型的几种形式对象类型any string number boolean null undefined symbol voidconst demo: string = "Hello World";数组类型在基础类型后面加上[]变为对应对象的数组类型const demo: string[] = ["Hello","World"];

2020-12-01 09:52:21 293

原创 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 6812

原创 JavaScript获取字符串数组的最长公共前缀

代码var longestCommonPrefix = strs => { if (!strs.length) return ""; // 数组为空的情况 let res = strs[0]; // 获取数组中第一个字符串 for (let i = 1; i < strs.length; i++) { // 遍历剩余字符串 let j = 0; for (; j < res.length && j < strs

2020-08-13 15:37:37 1015

原创使用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 1531 1

原创复制百度文库内容方法

1.在文章页面按F12进入控制台2.输入document.body.contentEditable = true;后回车3.crtl+x就可以剪切选中的内容了

2020-08-05 18:45:50 12153 7

原创 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 2730 1

原创使用setInterval动态改变图片的播放速度(实现GIF效果)

要实现的效果通过改变滑块中的数值动态改变GIF播放的速度。刚开始准备通过gifshot插件实现的，先将GIF按帧拆分成一张张图片，再设置每张图片之间的帧间隔，最后再拼接成一个新的GIF图片。但是用这个方法实现的话，在页面中通过滑块改变帧间隔的时候，需要重新绘制渲染GIF，导致中间的等待时间太长，体验很差。所以没有使用这种方法，如果是只要改变一次，不需要重新改变可以使用gifshot实现。参考文档：gifshot文档本文中是通过setInterval添加定时器，通过改变定时器的时间间隔实现的。

2020-08-04 17:19:15 1066

原创添加文字下划线动画效果，通过IntersectionObserver监听事件实现页面滚动展示

参考文章：IntersectionObserver API 使用教程实现效果图页面刚滚动的文字位置时动画效果结束后HTML给mark标签内的文字添加动态下划线效果 <h1>JavaScript 的歷史及現況</h1> <p>1990 年，科學家 Tim Berners-Lee 在互聯網的基礎上發明了萬維網 (World Wide Web)，<mark>World Wide Web 這個詞在互聯網早期經常提到，還一直影響至今，.

2020-07-31 00:22:53 594

原创 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 1935 2

原创 Android调用H5相机报错java.lang.IllegalArgumentException: Failed to find configured root that contains

问题在android中使用webView调用其中的相机时遇到的问题如下：App闪退报错信息如下这是存储的照片的路径根据报错信息 Failed to find configured root that contains /storage/emulated/0/793.jpg猜测问题出在了存储路径上，查看资料后发现external-path对应 Environment.getExternalStorageDirectory() 指向的目录，对应的路径是/storage/emulate/0，

2020-07-23 17:42:34 329

原创 el-checkbox的change事件

2020-06-17 18:14:09 29444 2

原创 vue中使用HTML5的audio标签实现播放音乐

<audio :src='url' controls="controls" ref="player" preload="true" @canplay="startPlay" @timeupdate="timeupdate" @ended="ended">  <!--controls：向用户显示音频控件（播放/

2020-06-12 11:16:41 3365 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 2862 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 13255 17

nineteenthdog的博客