hsCBY-CSDN博客

原创 vue2.0 @contextmenu 右键点击事件

<div @contextmenu.prevent="openMenu($event)"> 右键点我 </div><ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <li >刷新</li> <li >关闭</li> <li >关闭其他&l

2021-03-10 13:40:02 1375 1

原创在vue中使用svg图标

以下为傻瓜式教程，亲测有效，不行请联系博主首先：下载 svg-sprite-loader命令：npm i svg-sprite-loader -S其次配置vue.config.js ( vue-cli3 )这里只讲vue-cli3的配置//这里注意路径问题,跟后面创建的文件位置有关const path = require('path')function resolve (dir) ...

2019-11-06 15:29:31 714

原创语言国际化

下载npm i vue-i18n -S在main中导入import Vuei18n from 'vue-i18n'Vue.use(Vuei18n)//这里只做两个demo文件，想要其他语言，照猫画虎就行const i18n = new VueI18n({ locale: "zh", messages: { "zh": require('@/languages/zh.jso...

2019-10-16 10:31:52 248

原创 vue导出表格

下载cnpm install file-savercnpm install xlsx -Scnpm install script-loader -D//导出表格的方法ExportXlsx(state, list) { console.log(list) //这里导入的是 Export2Excel.js文件路径 import('@/vendor/Export2Ex...

2019-10-14 17:58:05 471

原创 vue上传图片到阿里云

下载 ali-ossnpm i ali-oss -S在vue中使用在main中导入import oss from ‘ali-oss’window.oss = oss在方法中使用://这里的四个参数都是后端给的var client = new oss({ region: "", //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端...

2019-10-14 17:51:48 1284

原创一键复制黏贴

方法一：原生js 不兼容ios，这里不详细写了，有需要请百度其他文章DOM.select()document.execCommand("copy"); 方法二：使用 clipboard 插件下载 npm i clipboard -S在要使用的文件中导入import clipboard from ‘clipboard’html部分：<input type="text" ...

2019-10-14 17:49:43 522

原创使用html2canvas生成海报

下载 npm i html2canvas -s导入 import html2canvas from ‘html2canvas’//第一个参数是盒子容器html2canvas(document.body,{ //设置海报的大小和宽度 height: document.body.offsetHeight+50, width: document.body.offsetWid...

2019-10-14 17:44:11 1825

原创 vue使用QRCode.js制作二维码

安装 npm install qrcodejs2 --save页面使用 import QRCode from “qrcodejs2”; // 引入qrcode制作一个盛放二维码的容器 <div id="qrcode"></div>生成二维码//获取容器document.getElementById("qrcode").innerHTML = "";let q...

2019-10-14 17:40:45 337

原创深拷贝和浅拷贝

浅拷贝是是复制一个对象的属性和方法，类似地址复制案例:function copy(obj1,obj2){ for(key in obj1) { obj2[key] = obj1[key]; }}obj1 = { age: 5, name: "name"}obj2 = {};copy(obj1,obj2);console.dir(obj...

2019-09-05 11:23:14 144

原创 javaScript中的this指向

1.函数中this的指向，与函数声明无关，与函数调用有关2.如果函数是通过对象调用，那么函数内部this就是该对象(谁调用函数，this就是谁):否则this指向window3.构造函数中的this,指向每次创建的对象*普通函数中的this是谁?-----window案例:function f1() {console.log(this);}f1();对象.方法中的this是...

2019-09-05 10:53:30 135

原创 js常用内置对象

常用的内置对象Math1).MathMath.abs()-Math.abs(x): 返回x的绝对值-console.log(Math.abs(“1”)); 1-console.log(Math.abs(-1)); 1-console.log(Math.abs(“你好”)); NaN-console.log(Math.abs(undefined)); ...

2019-09-05 10:51:31 467

原创 jQuery的动画函数

显示隐藏:1.show([speed],[easing],[fn]) 显示元素， speed为速度，easing切换效果(先快后慢)，fn回调函数，当全部隐藏后执行fn，它们都可以省略2.hide([speed],[easing],[fn]) 隐藏元素3.toggle([speed],[easing],[fn]) 切换显示/隐藏，隐藏调用时显示，显示调用时隐藏//一般情况下都不加参数滑动...

2019-09-05 10:35:55 1108

原创 jQuery事件

单个事件注册:$("div").click(function(){});多个事件注册:1.on()方法在匹配元素上绑定一个或多个事件,并且可以注册jQuery没封装的事件（例如 input）$("div").on({ mouseenter: function(){}, click: function(){}});如果注册事件处理的方法相同则可以使用下面这种方法:$...

2019-09-05 10:32:39 107

原创 localStorage和sessionStorage

sessionStorage: 数据保存在浏览器中，网页关闭删除存储的数据，不同网页不可以共享数据，除非这个网页是由上一个网页打开的，存储空间为5MB左右1.生命周期为关闭浏览器窗口2.在同一个窗口(页面)下数据可以共享3.以键值对的形式存储使用语法:存储数据: sessionStorage.setItem(key,value);获取数据: sessionStorage.getItem...

2019-09-05 10:27:05 145

原创 fetch和axios

1.前后端交互模式***原生ajax***基于jQuery的ajax***fetch***axios2.URL的地址格式（1）传统地址格式: 协议://域名(或者id地址):端口(默认为80端口，可以省略)/路径?参数#锚点(用来定位页面中的某个位置)例:http://ithema:80http://ithema:80/index.htmlhttp://ithema:80/in...

2019-09-05 10:23:18 531

原创 vue 路由

1.后端路由概念：根据不同的url用户请求，返回不同的内容本质: URL请求地址和服务器资源的对应关系*后端渲染，就是在后端先将字符串模板拼接好以后再返回到前端(存在性能问题)*Ajax前端渲染 (前端渲染提高性能，但是不知此前进和后退操作)*SPA(Single Page Application) 单页面应用程序,整个网站只有一个页面，内容的变化通过AJax局部更新实现，同时支持浏览器...

2019-09-05 10:16:27 245

原创重绘和回流

浏览器的渲染过程首先我们简单的介绍一下浏览器的渲染过程：浏览器会将 html代码解析成一个 Dom 树(Dom tree),html中的每个标签(tag)都是 Dom tree中的一个节点，根节点就是document对象， Dom tree 中包含了所有的html标签其中有 display: none 隐藏元素和js动态添加的元素等浏览器把所有样式(主要包括css和浏览器的样式设置...

2019-09-05 10:01:48 666

原创 vue里面使用quill-editor富文本编辑器

在vue里面使用quill-editor富文本编辑器这里默认大家已经把项目框架都搭建完毕，直接说明怎么使用下载：npm install -s vue-quill-editornpm install quill在main.js( 项目入口文件 )中进行引入import VueQuillEditor from 'vue-quill-editor'//加载css样式资源，必不可少impo...

2019-09-05 09:42:18 546

原创防抖和节流

防抖和节流防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。非立即执行防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...

2019-09-05 09:29:35 155

hsCBY的博客