- 博客(102)
- 收藏
- 关注
RSS订阅原创 网站中接入谷歌地图
谷歌地图接入文档一 开发平台配置地图开发者平台链接流程参考1 创建项目2 创建凭据增加API密钥，然后将API密钥保存起来。3 修改API密钥配置，设置使用限制
2022-02-28 23:59:08
842
原创 Vue2.x+Element UI 密码规则组件封装
一 效果图二 组件封装步骤1 组件目录结构如下2 组件是需要一个密码输入框和一个pop 框，在input获取焦点的时候展示popover,popover 中的每一项都要根据输入内容实时匹配是否满足某一规则，因此里面的内容需要动态渲染，如下结构<template> <el-popover popper-class="gt-password-popper" v-bind="popoverOptions"> <template slot="reference"
2021-07-27 14:39:51
974
1
原创 在 Vue项目中如何使用GraphQL
什么是GraphQLGraphQL 官方文档Vue中项目中如何配置支持GraphQl首先需要提前了解一下Vue apollo安装需要的依赖npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag apollo-link-error vue-cli-plugin-apollo在项目根目录下创建Apollo文件夹，创建 apo
2021-01-06 13:48:38
3131
原创 Vue+Element项目中根据业务状态封装业务对应的颜色，用于标识某一行数据的颜色
背景几乎每个页面都有自己的状态，所以经过和产品以及设计师沟通后确定了适用于业务的状态色。虽然Element 中已经有了el-tag 可以表示一些状态，但是每个项目的业务需求会有差异，伴随着这些差异，并结合自己项目的特点，封装了适用于项目的状态。假设每个页面都有自己的状态表示，虽然表示状态的颜色在整体项目上来说是一致的，但是由于每个页面的业务不一样，表示每个页面的各自的状态值也会有所差异，直接让后端返回颜色值也不现实，所以封装了统一的公共组件。全局组件内容如下<template>
2021-01-04 17:48:59
1273
1
原创 如何在Vue+Element项目中配置国际化
Vue I18nVue.js 的国际化插件官网地址建议通读。使用前需要先在项目中install Vue-i18n1 创建i18n文件夹在项目根目录，即src目录项创建i18n目录，此目录下用于存放多语言的翻译如zh.js存储中文翻译,en.js存储英文翻译，id.js 存储印尼语等。// en.jsexport default { basic: { a: "Hello Word!" }}// zh.jsexport default { basic: {
2021-01-04 16:13:00
883
原创 Element 表单表格，且前端校验以及后端校验展示在输入框下面
表格表单1 背景有时候可能会有一些需求需要可编辑一张表格，表格的提交可能是按行来提交，也可能是整张表格提交。按行来提交整张表格的数据一起提交2 类似于以上这种场景都需要用一个表单去嵌套一个表格，这种嵌套表格在绑定数据的时候需要注意以下两点，如下图：el-form-item 的 prop 绑定为各自行上的属性，idx为当前行号，这样绑定 prop 不会修改同一个引用对象。在校验的时候也可用于区分是哪一行需要报ERROR。el-form-item 中的输入框需要绑定为行的属性3 给部分
2021-01-04 15:02:56
2552
原创 vue 项目中引入 md 文件并展示
一 安装依赖vue-markdown-loader 内部使用markdown-it将Markdown文件转换为Vue组件。 github-markdown-css GitHub Markdown样式的mini cssshighlightjs-line-numbers.js 高亮Markdown 样式并插入行号二 添加配置vue.config.js 中添加如下配置让 webpack 可以编译并解析 md 文件chainWebpack: config => { conf
2020-07-14 19:45:01
5866
4
原创 Vue 项目如何使用阿里 iconfont 的 symbol 类型的图标并封装为组件
1. 首先介绍下 Symbol 类型的图标参考阿里巴巴矢量图标库官方说法:Symbol 是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。兼容性较差，支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般，还不如png。2. 使用 Symbol 图标原本按照官方网站的介绍
2020-05-19 15:51:59
3882
原创 Vue Element table 组件表头处如何添加 icon
1.首先附上 Element-ui 官方文档中的说明https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot2 如何使用首先在需要添加 icon 的地方，绑定 render-header attribute ,如下： <el-table-column icon="el-icon...
2020-03-03 10:27:48
4504
7
原创 Vue 自定义指令——滚动加载
1 定义自定义指令export default Vue => { Vue.directive("loadmore", { bind(el, binding) { // 获取element-ui定义好的dom const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dr...
2020-03-02 18:00:58
643
原创 前端通过响应头获取后端传输的信息
前端通过响应头获取后端传输的信息工作中碰到后端在请求头中带的信息，需要前端获取这个信息。原本可能只是自己的知识盲区，又可以直接获取后端接口请求头中的api，差了很多资料都没与找到相关的资料。又请教了公司的大佬，大佬们也没听说过这样的做法。所以和后端同学商量了下，让他放在接口的响应头中前端再来获取。于是后端同学将我所需的信息通过响应头传递给我，前端项目是用vue + axios：我在axios的...
2019-08-25 19:37:07
5536
1
原创 用 IntersectionObserver api 监听元素曝光
用 IntersectionObserver api 监听元素曝光以前在 H5 页面都是监听 window 的 scroll 事件从而去监测元素的曝光。但是最近接到的一个需求，去监听 scroll 事件监测曝光并不友好，于是 发现了一个从没用过的 api ,试着做了一个demo ，由于不会监听scroll 事件去频繁触发 scroll 事件。所以性能上会提高很多，但是不兼容 ie， MDN 上...
2019-08-22 19:03:10
1455
原创 用vue-cli搭建的项目build后放在服务器中点击index.html 页面空白
用vue-cli搭建的项目build后放在服务器中点击index.html 页面空白写下本文只是为了做笔记或以后遇到同样问题能快速解决.用vue-cli的搭建项目可以参考官方文档 https://cli.vuejs.org/guide/#cli-service.项目完成最终需要 npm run build 打包发布.在dev阶段用webserver打开是完全没有问题的。但是我在b...
2019-08-14 17:21:18
813
原创 必用 vsode 插件
整理一下个人用的Vscode 好用的插件Bracket PairColorizer 花括号配对Chinese Langeage Rack for Visual Studio Code 将编辑器语言转换为中文Document this ...
2019-05-16 11:34:18
486
转载 移动端调试 vConsole && eruda
vConsole 地址 https://github.com/Tencent/vConsoleeruda 地址 https://github.com/liriliri/eruda/blob/master/doc/README_CN.md记给自己和需要的人 ~
2019-04-15 17:48:24
323
原创 ts学习笔记以及实用教程地址
0.ts的核心原则之一是对值所具有的结构进行类型检查。接口的作用就是为这些类型命名和代码定义契约。1.声明全局变量，挂载在window上declare global { interface Window { mqq:any; }}2.interface 接口，即相当于一个约束，让大家都遵循,只要传入的对象满足接口的必要条件，那么它就是被运行的。in...
2019-04-15 17:43:20
776
原创 前端实用小方法
一 提取URL中的某个查询字符串的值getParams() { let url = localtion.search; var param = {}; if (url.indexOf('?') != -1) { let query = url.slice(url.indexOf('?')).slice(1); l...
2019-03-27 20:10:05
148
原创 利用懒加载原理实现曝光上报
1.懒加载原理如下图监听window的滚动事件 ，当 卷曲上去的距离 + 可视区域的高度 &gt; 元素的 offsetTop 元素就会暴露出屏幕的可视区域。let flag = true;window.addEventListener("scroll",function(){ const target = document.getElementById("Slider")...
2019-03-18 11:37:59
337
原创 css 属性 position:sticky (粘滞的) 制作导航吸顶效果
一、position:sticky (粘滞的)1.简介是 position:relation;和 position:fixed ;的结合体.表现为 当有一个元素设置了 position:sticky的时候，这个元素滚动到距离顶部 0 像素的时候就会自动粘滞到顶部。 当然也不一定全部是粘滞到顶部，可以依据情况设置到底部或者左边或者右边。一般适合用于新闻资讯类，有标题的部分可以粘滞在边缘，内...
2019-03-18 11:00:08
4654
原创 初次使用使用chrome的inspect
初次使用 Chrome://inspect 一直遇到各种问题，经过参考各种博客和文章终于搞定了。参考文章：https://www.jianshu.com/p/66896bec620ehttps://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=...
2019-02-14 17:00:47
5092
转载 node.js基础
浏览器的工作原理浏览器的组成用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分浏览器引擎－ 用来查询及操作渲染引擎的接口渲染引擎（浏览器内核）－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同...
2018-12-02 10:15:26
341
原创 HTML5 应用缓存
HTML5 应用缓存1. 是什么？HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。2.什么特点？可以离线访问缓存的css，HTML，js 等文件，减少了请求，从而缓解了服务器的压力。本地读取缓存的资源，提升了访问速度，增强了用户体验。可以配置需要缓存的资源。3.创建方法？首先假设创建名为 demo.appcache ...
2018-11-30 15:06:06
382
转载 初识less
Less简介CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，L...
2018-11-14 21:01:30
129
转载 回流（reflow）与重绘（repaint）
回流（reflow）与重绘（repaint）回流（reflow）与重绘（repaint），在性能优化的时候，经常会提起，因为涉及到浏览器底层的渲染，所以掌握的童鞋并不多，但是面试经常被提及。而且在解决一些bug上，也能派上用场。浏览器渲染机制在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程...
2018-11-14 20:38:44
1000
转载 版本控制系统
版本控制系统为什么要有版本控制系统在开发过程中，经常需要对一个文件进行修改甚至删除，但是我们又希望能够保存这个文件的历史记录，如果通过备份，那么管理起来会非常的复杂。在多人开发时，如果需要多人合作开发一个页面，那么修改以及合并也会非常的棘手。容易出现冲突。什么是版本控制系统版本控制系统（Version Control System）:是一种记录一个或若干文件内容变化，以便将来查阅特定...
2018-11-13 08:51:33
2830
原创 iscroll插件的使用
近期用到 iscroll.js 插件,找了几篇参考，网址如下：有使用的详细步骤和说明： [http://caibaojian.com/iscroll-5/]参考文档(http://www.mamicode.com/info-detail-331827.html)git 下载地址[(https://github.com/cubiq/iscroll)最后本人总结了以下使用主要注意点：...
2018-11-06 11:38:42
459
转载 zepto的定制
因为在zepto的官网http://www.zeptojs.cn/#download下载的文件只包括了默认的几个模块，这并不能全部适应我们所需功 能，还需要按自己需要去添加相应模块。所以需要去构建我们自己的zepto.min.js。可以通过nodejs去bulid.一、安装node.jshttp://nodejs.org/二、从github下载zepto源码https://github.c...
2018-11-05 09:13:41
595
转载 左侧固定右侧自适应，右侧固定左侧自适应，左右两边固定中间自适应的几种方法
1. 左侧固定右侧自适应的方法定位法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .father{ width: 100%; height: 300px; background-
2018-11-01 23:38:16
1662
原创 HTML5新增常用的几个操作
1------- 新增HTML5 中操作类dom.classList.add(" classname ")； 添加类dom.classlist.romove(" classname ") 删除类dom.classlist.contains(" classname ") 判断是否包含某类dom.classList.toggle(" classname...
2018-11-01 11:58:48
165
原创 HTML5新增加的语义化标签用 html5shiv.js解决兼容
IE8以及以下的版本，不支持HTML5新增加的语义化标签。那么这个问题怎么解决呢？其实很简单啊！方法 1 ：（ 1 ） 在浏览器解析之前，动态创建 HTML5 语义化标签。（ 2 ）由于动态创建的新标签元素默认是行内，需要转换显示模式，将类似于header , footer , nav 这样有语义的标签转换为符合语义的块级元素。方法 2 ：如果有多个语义化标签一个个动态创建真的会巨...
2018-11-01 11:46:52
539
原创 flex布局参数详解
首先display的几种显示方式display:block; 转为块级元素display:inline-block 转为行内块元素display:none; 隐藏元素，不占位置。display:inline; 将元素转为行内元素。display :flex; 是一种布局方式。让这个父盒...
2018-10-28 23:36:05
4129
原创 jQuery 的一些方法
** val() 方法**- 有参数： 设置value属性值- 无参数： 获取value属性值** html() 与 text() 方法**- 有参数： 设置元素的内容- 无参数： 获取元素的内容- html() 和 text() 的区别： html() 可以识别HTML标签元素，text() 不可识别，都会当做文字处理。这两个方法相当于原生 js 的 inne...
2018-10-25 11:49:45
116
原创 jQuery提供的几组动画
第一组基动画(show()显示/hide()隐藏)这组动画改变的主要是宽高和不透明度。参数三个依次为 ：speed 表示动画时长，单位是毫秒（在这个参数里面提供个了三个基本字符串，分别是slow对应600 normal对应400, fast 对应 200)easing 动画效果（可选参数） 变速与匀速callback 回调函数（可选参数）动画执行完执行的部分。第二组基本动画（...
2018-10-22 11:20:12
180
1
原创 jQuery 操作节点
1.创建节点$(“html标签对”)2添加节点A.append(B); 将B元素添加到 A元素里面，作为最后一个孩子。注意：对于页面上已经存在的元素会剪切到A元素里面，对于页面上不存在的元素，徽县创建，然后添加到A元素中。appendTo()B.appendTo(A) 将B元素添加到A元素中。prepend()-A.prepend(B) 将元素B...
2018-10-22 10:41:20
111
原创 jQuery操作样式以及操作属性
jQuery操作样式jQuery 操作 style 样式时使用的是 css 方法。参数不同所表达的意思也不同。两个参数css(name,value) 设置单个样式，name是样式名，value样式值，选中的元素都会被设置上同样的样式。一个参数的时候有两种情况：1.如果传入的是一个样式名称 css(name) ，就是获取某样式的属性，获取的是选择到的元素中的第一个元素的样式。2....
2018-10-10 10:26:06
292
原创 jQuery 中$ 的来源以及三种参数
jQuery 中$ 的来源就是一个普通的变量，因为比较容易记忆，又不容易发生冲突选择的一个代表，代表jQuery这个对象，具有jQuery的功能，就是一个普通的变量，因为比较容易记忆，又不容易发生冲突选择的一个代表，代表jQuery这个对象，具有jQuery的功能，就是一个普通的变量，因为比较容易记忆，又不容易发生冲突选择的一个代表，代表jQuery这个对象，具有jQuery的功能，符号可以与j...
2018-10-09 22:38:47
2197
原创 简单认识jQuery
jQuery 是 什么？ jQuery就是js的函数库，jQuery的遵旨就是“Do more and write less”, 相比js 来说，少些了很多代码，功能丰富。简单来说就是封装了很多方法的一个js文件。在使用的时候可以直接引入这个文件，遵循jQuery的语法规则，就可以使用jQuery提供的方法啦。jQuery 的目前的版本？jQuery 目前的版本有1.XXX版本、2.X...
2018-10-09 19:55:58
237
原创 简单了解 html中 meta 标签
简单了解html中meta标签现在很多的编辑器都提供了一键生成HTML骨架的功能，对于一键生成的骨架都不大注意他的意思。下面我简单整理了header里面的meta标签表示的几个意思。<head> <meta charset="UTF-8"> // charset 单词意思为字符编码集。表示字符编码集是UTF-8 <meta na...
2018-10-09 10:28:56
801
原创 正则表达式
标题正则表达式（regular expression）是什么呢？正则表达式是按照某种规则组成的一个表达式。作用就是为了匹配字符串，让它符合某一种规律。那正则表达式到底是什么样的呢？正则表达式也叫规则表达式，就是普通字符和元字符（元字符就是具有特殊含义的的字符）组成的。正则表达式中常用的元字符有哪些呢？. 用这个符号可以表示除了换行和回车之外的任意字符。\d用这个符号可...
2018-09-27 22:36:17
107
转载 JavaScript基本包装类型
基本包装类型为了便于操作基本类型值，ECMAScript还提供了3个特殊的引用类型：Boolean、Number和String。这些类型与其它引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。如：var s1 = “some text”;var s2 = s1....
2018-09-22 20:27:29
903
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人