随笔分类 - 前端
【前端】鼠标捕获元素信息
摘要：function getElementXPath(element) { if (element.id !== '') { return '//*[@id="' + element.id + '"]'; } if (element document.body) { return '/html/body
uniapp将图片base64绘制到画布中
摘要：html <view class="content"> <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas> </view> js // 获取图片的完整base64 this.qrurl = res.d
前端纯原生js数据监控，更新视图
摘要：还没完善好，先记录一部分 binding.js // 定义Model类，用于存储数据和监听数据变化 function Model(value = "") { this._value = value; // 存储数据的值 this._listeners = []; // 存储监听数据变化的函数 } /
前端用画布去除图片多余的透明区域
摘要：传入图片的base64即可。 function clearblankimg(imgData){ var img = new Image(); //创建图片对象 img.src = imgData; img.onload = function() { var c = document.createEl
Fabric.js 选中元素不置顶（防止显示到顶层挡住其它元素）
摘要：初始化画布的时候把preserveObjectStacking的属性改成true，默认是false this.canvas = new fabric.Canvas('mycanvas',{ preserveObjectStacking: true }); 其它 【Fabric.js 元素被遮挡的部分
前端调用设备摄像头
摘要：新建一个video标签，设置大小，ref命名 <video ref="video" autoplay width="700" height="500" class="videoElement" ></video> video获取摄像头内容 可以这么写，没有回调提示 查看代码 // video标签获取
【elementUi】组件el-scrollbar监控滚动事件
摘要：ElementUi的el-scrollbar组件 <el-scrollbar style="height: 50vh" ref="scrollbar"> </el-scrollbar> 写个事件来监听该组件的滚动事件 handleScroll() { let scrollbarEl = this.$
【vue】打包后dist无法运行和显示问题
摘要：执行 npm run build 生成dist静态目录 打开index.html无法显示，是因为找不到目录，将里面的引用路径修改即可 修改后可能部分图片无法正常显示，因为还有其它路径的需要切换，但是这时候里面找不到修改的地方 需要去配置文件，直接全局改 vue.config.js里面 module.
vs code配置vue用户代码模板
摘要：新建代码 vue.json模板 { "Print to console": { "prefix": "!v", "body": [ "<template>", " <div>", "$0", " </div>", "</template>", "", "<script>", "", " e
【Vue】axios请求拦截器+封装统一接口管理
摘要：1.安装axios npm install --save axios 2.创建请求拦截器 request.js 配置请求拦截器，可以在请求发送前进行统一预处理请求， 不用每次在请求的时候手动添加协议头 token 等配置 // axios二次封装 import router from "@/rout
Vue 手动配置路由
摘要：不用一键创建项目的方式 手动引用 1.安装路由组件(vue2) npm i vue-router@3 2.创建路由映射js 创建 src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' //导入界面组件
Vue 访问路径开启history 模式
摘要：router 里面的index.js配置里面 // 引用 Vue 和路由组件 import Vue from 'vue'; import VueRouter from 'vue-router' // 使用路由组件 Vue.use(VueRouter) // 引入路由页面 import Home fr
Vue 动态页面标题
摘要：页面 const routes = [ { path: '/user', name: 'user', meta: { title: '个人中心', auth: true }, component: () => import(/* webpackChunkName: "user" */ '../pag
vue 前端守卫 登录验证权限
摘要：举例子写三个页面 home需要token，login和register页面不需要，直接放行 在routes内加上meta属性标记 页面路由加上标志： import Vue from 'vue'; import VueRouter from 'vue-router' // 使用路由插件 Vue.use
基础-npm创建vue项目
摘要：安装nodejs 官网安装 安装完进cmd 输入 node -v 出现版本号则安装成功 node 全局安装 -g 的库都在 C:\Users\用户\AppData\Roaming\npm\node_modules 直接局部安装的都在项目目录下 \node_modules 里面 1.安装vue npm
vue 前端生成二维码
摘要：npm下载 npm install vue-qr --save //导入vue-qrcode import VueQr from 'vue-qr'; vuejs注册vue-qr组件 components: { VueQr, } 组件参数说明： 属性名称属性说明 text 二维码内容 correctL
css 样式 记录
摘要：CSS CSS语法规范： 写css样式前建议加上样式 * {margin:0；padding:0；} 将网页所有边距清零，方便后面写样式 建议直接css初始化，代码可以从京东，淘宝等大网站偷 CSS规则由两个主要的部分构成:选择器以及一条或多条声明。 选择器是用于指定CSS样式的HTML标签，花括号
vue 实现页面 懒加载
摘要：常规配置路由（非懒加载）： 1.导入对应页面文件 2.填写路由配置 实现懒加载方式： 1.不需要导入对应页面文件，如果需要懒加载，就不能导入，否则懒加载会无效，会变成常规加载方式。 2.直接填写路由配置即可！ 浏览器查看效果： 这里的 Test.js 名字 是刚刚在上面绿色注解里面填的内容 ，自己随
前端布局
摘要：一、Float圣杯布局&双飞翼布局 圣杯布局和双飞翼布局的出现，都是为了实现左右两侧宽度固定，中间内容宽度自适应的三栏布局，且三栏布局的特点是中间内容优先渲染显示（一般情况下重要内容都是放置在布局的中间），也就是在布局结构中，中间内容的结构位于最上面（不是传统的上下，左右结构）。两种布局方式的目的一
