vip.khan-CSDN博客

原创 Fullscreen：页面中dom进入全屏模式和推出全屏模式

//进入全屏 openFullscreen(id) { var elem = document.querySelector(id); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } els...

2021-10-29 17:53:44 429

原创 vue中打包获取动态的版本号

我们在网站上线后，每次更新线上的内容，是不是都会出现一个问题：那就是不知道线上代码是否更新成功。那么后面的问题随之而来，如果每次打包的时候都去修改版本号，是不是很麻烦呢？如果我们打包的时候自动获取时间作为版本号或者自己写个版本号自动计算的公式，是不是就方便很多呢？当然版本号的格式可能每个网站要求不同，那就要自己去写函数获取了，我们今天要解决的问题是怎么把这个动态的版本号在打包的时候写入系统，每次打包都是最新版本的。vue的工程项目都有一个开发环境(.env.development)和生产环境(.

2021-09-18 11:45:57 1935 2

原创在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本

1.安装npm install tinymce -Snpm install @packy-tang/vue-tinymce2.把node_modules\tinymce里面的tinymce文件夹复制到public文件夹下面，并在html中引入tinymce.min.js，如下图3.在mian.js中引入@packy-tang/vue-tinymce4.封装组件代码<template> <div> <vue-tinymc...

2021-07-15 11:57:20 3109 5

原创 js图片上传转为base64

本地图片上传之后转为base64使用，函数调用方式是vue的方法哈1.html<input id="file" @change="handleFileChange" type="file" />2.js handleFileChange(e) { const files = e.target.files; var reader=new FileReader(); reader.onload=f

2021-07-12 14:36:22 335

原创在vue中使用pdfjs-dist把pdf文件转为canvas

因为pdf存在分页的情况所以加了个目录，以下就是pdf转为canvas的最终成果上代码1、html<template> <div class="pdfEditor"> <div class="editor-pages" v-loading="loading"> <div id="container_catalog"> <div ..

2021-07-12 14:25:58 1909

原创 js复制文本到剪切板

//复制文本到剪切板 copyText(val){ var input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘 input.setAttribute('value',val); document.body.appendChild(input); input.select(); var res = docume..

2021-03-23 11:25:15 133

原创 js判断变量的值是否为数字

//判断是否为数字 isNumber(val){ var regPos = /^\d+(\.\d+)?$/; //非负浮点数 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数 if(regPos.test(val) || regNeg.test(val)){ return true; ...

2021-03-23 11:24:39 168

原创 js判断是否为json字符串

//判断是否为json字符串 isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); if(typeof obj == 'object' && obj ){ return true; }else{ ...

2021-03-23 11:23:37 420

原创 js使用canvas压缩图片

//压缩图片 Compresspicture(file){ return new Promise((resolve,reject)=>{ let r = new FileReader(); //本地预览 r.readAsDataURL(file) r.onload = function(){ let src=r.result const img = new Imag...

2021-03-23 11:22:39 164

原创 js数组取差集

//数组取差集 arrDifferenceDet(arr1, arr2) { var set1 = new Set(arr1); var set2 = new Set(arr2); var subset = []; for (let item of set1) { if (!set2.has(item)) { subset.push(item); } } retur...

2021-03-23 11:19:21 626

原创 js对象数组去重

// 对象数组去重 arrDuplicateRemoval(arr, id) { const res = new Map(); return arr.filter((arr) => !res.has(arr[id]) && res.set(arr[id], 1)); }

2021-03-23 11:16:29 137

原创 js字符串生成变量对象

//字符串生成变量对象 stringVar(vallist) { let ruleslist = {} vallist.map(val => { let rules = { [window[val] = val]: '' } ruleslist = { ...ruleslist, ...rules } }) re...

2021-03-23 11:14:26 255

原创 JavaScript数组数据转为树结构数据(treedata)

ArraytoTreedata(arr,mid,pid,topPid){letmenuObj={}arr.forEach(item=>{item.children=[]item.label=item.orgNamemenuObj[item[mid]]=item})returnarr.filter(item=>{...

2021-03-23 11:01:32 435

原创零基础学习web前端需要学些什么？

使用HTML和CSS开发web网站（学完之后找网页设计图跟着写网页进行练习）JavaScript核心技术项目一：模仿一个网站jQuery前端技术应用bootstrap ui框架项目二：写一个响应式网站js高级、es6.7.8、html5与css3简单动画练习、场景动画练习vue->vue+element ui 项目练习小程序->小程序+WeUI（官方ui框架）项目练习uniapp->app混合项目练习...

2021-03-23 10:20:32 58

原创 [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.

在基于 Element-ui 写项目的时候，Chrome 提醒：[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Conside翻译过来如下：违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Liste

2021-02-24 14:37:44 1622 1

原创 vue-amap 定位和逆解码

1.安装：npm install vue-amap --save2.main.js引入：import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: 'key',//自己申请的key plugin: ['AMap.Scale', 'AMap.OverView', 'AMa...

2020-01-13 15:52:00 1757

原创 pm2

1、 pm2需要全局安装npm install -g pm22、进入项目根目录2.1 启动进程/应用 pm2 start bin/www 或 pm2 start app.js2.2 重命名进程/应用 pm2 start app.js --name wb1232.3 添加进程/应用 watch pm2 start bin/www --watch2.4 结束进程/应用 pm2 stop...

2019-12-21 12:13:26 127

原创 vue中使用swiper

1.下载cnpm install swiper2.引入swiperjs：在script标签中引入swiper模块import Swiper from "swiper"css：在style标签中引入swiper的css@import url("../../node_modules/swiper/css/swiper.css");3.使用：html部分：&l...

2019-11-30 11:43:14 441

原创 vue中正确使用jquery

1.下载安装npm install jquery --save2.webpack.base.conf.js中修改配置2.1.webpack.base.conf.js最顶部引入var webpack = require('webpack')2.2.webpack.base.conf.js中module.exports添加一段代码//原有代码 resolve: {...

2019-11-30 10:49:04 392

原创杂记

cnpm start //打包"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack",//设置打包命令 "server": "webpack-dev-server"//设置开启服务器命令 },cnpm run server //...

2019-11-01 17:38:15 2292

原创 webpack初级入门教程（二）

1.在根目录创建一个pages文件夹，再在pages文件夹里面创建模块，如下图所示2.再到webpack.config.js中配置js打包模块的入口和打包后的资源存放路径entry:{ // 配置多个入口 index:"./pages/index/index.js", login:"./pages/login/index.js", person:"./pages/pe...

2019-11-01 17:08:34 207

原创 webpack初级入门教程（一）

1.前提条件检测电脑是否安装node环境、npm、cnpm检测：node：node -vnpm： npm -vcnpm：cnpm -v2.安装环境2.1安装node环境：双击node安装包2.2node环境安装完了以后再次检测node -v、npm -v2.3安装cnpm（淘宝镜像）npm install -g cnpm --registry=https://registry.n...

2019-10-31 17:32:16 346 1

原创 webpack安装

1.安装在全局下安装：npminstallwebpack-g安装指定版本：npminstallwebpack@<version>-g例如：npm [email protected] 安装4.8.3版本的，node也是最新的npm，一做...

2019-10-30 17:31:19 181

原创 MySql配置环境变量

完成后安装好MySQL，为MySQL配置环境变量。1、在我的电脑（计算机）上点击右键选择属性--》高级系统设置--》环境变量2、新建MYSQL_HOME变量，并配置:E:\mysql\mysql-5.7.27-win32（你的文件解压的地方）MYSQL_HOME：E:\mysql\mysql-5.7.27-win323、编辑path系统变量，将%MYSQL_HO...

2019-10-11 10:56:40 746

原创 32位、64位mysql安装使用

1、下载https://dev.mysql.com/downloads/mysql/ 1.1、64位1.2、32位2、安装：把刚刚下载下来的压缩包解压到相应的目录，我解压到E:\mysql\mysql-5.7.27-win32中的3、配置mysql配置文件在E:\mysql\mysql-5.7.27-win32中新建my.ini 编辑如下配置信息，my.ini...

2019-10-11 10:41:00 2183

原创原生js实现无限图片滚动轮播：左右滚动，从最后一张轮播到第一张的时候不会一下子从左到右跳回去

原生js实现无限图片滚动轮播：左右滚动，从最后一张轮播到第一张的时候不会一下子从左到右跳回去写代码也要把我家大殿带着，大殿万安1、html部分 <div class="box"> <div class="swiper_box"> <img src="img/a.jpg" /> <img src="img/...

2019-07-28 17:22:41 3786 6

转载 JS实现循环给元素绑定事件的几个常用方法

作为一个JS的初学者，想对一些元素循环绑定事件的时候总是出现各种问题，尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查，果然好多初学者有这个困惑，既然这个问题总是出现，于是在我就总结了以下两个比较好理解的解决方案，分享给大家：（可能还有更好的方式我没有发现，请各位前辈分享）比如下面这个例子：HTML代码：<div class="wrap"> <...

2019-07-25 08:57:32 911

原创安装Git和安装小乌龟TortoiseGit----汉化

1、首先去https://git-scm.com/download/win下载和自己电脑相同位数的Git安装包（32位电脑下载32位的安装包，64同理）2、再去https://tortoisegit.org/download/下载和自己电脑相同位数的TortoiseGit安装包和TortoiseGit-LanguagePack语言包（32位电脑下载32位的安装包，64同理）3、...

2019-07-16 12:08:00 2761

原创使用HTML和CSS开发Web网站（三）

七、WEB标准与页面布局基础1、网站重构与WEB标准1.1、网站重构把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构。1.2、WEB标准网页主要由三个部分构...

2019-07-08 16:45:58 416

原创使用HTML和CSS开发Web网站（二）

五、CSS层叠样式表理解样式表对控制页面元素外观的作用掌握样式规则的语法理解各种选择器理解样式代码在什么位置编写及它们的作用范围掌握常用的样式属性1、什么是CSS？CSS的英文全称为Cascading Style Sheet，中文翻译一般称为层叠样式表或级联样式表。 CSS的作用是定义如何显示HTML元素。它是一门独立的语言，由万维网联盟（W3C）制定。目前...

2019-07-08 15:57:44 321

原创使用HTML和CSS开发Web网站（一）

一、HTML概述与基本标签了解WEB和HTML的关系理解HTML标签在WEB网页中的作用掌握HTML文档的结构掌握常用的HTML标签1、web概述Web，又称为www，英文全称为world wide web，翻译为中文一般为万维网，它是运行在互联网之上的一种服务。1.1、万维网的三个标准---基础核心1、统一资源标识符（URL），是一个世界通用的负责给万维网...

2019-07-04 16:44:24 827

原创 vue项目兼容ie浏览器的问题：在其他浏览器显示都是正常的，在ie下显示空白

1、安装babel-polyfillnpm install babel-polyfill --save-dev2、main.js中引入import 'babel-polyfill'3、webpack.base.conf.js文件里修改代码如下module.exports = {entry: {app: ["babel-polyfill", "./src/main.js"...

2019-05-28 14:46:45 3152 3

原创 vue 路由发生变化修改页面title

在main.js中写router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next()})router文件中export default new Router({ mode: 'hi...

2019-05-13 15:24:56 925

原创在vue中使用echarts,echarts-map:echarts画地图

1、首先安装：cnpm install echarts --save2、然后main.js引入（也可以组件内引入）// 引入ECharts图表公共组件import echarts from 'echarts'Vue.prototype.$echarts = echarts 3、再然后我们来画个折线图，长这个样子，单纯的折线图哈3.1、接下来是折线图的代码<te...

2019-05-09 18:31:32 13313

原创在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片

1.安装# npm install tinymce -S2.把node_modules\tinymce里面的文件包括tinymce文件夹全部复制到static文件夹下面，如下图3.在mian.js中引入tinymce（也可以在组件中引入）import Tinymce from 'tinymce'Vue.prototype.$tinymce = Tinymce...

2019-04-26 15:32:09 40411 15

原创图片403

网络图片出现403在<head></head>里面加上<meta name="referrer" content="no-referrer" />就ok啦啦啦

2018-06-14 16:59:41 488

vip.khan的博客