S_mile1992-CSDN博客

转载 CSS 滚动条样式

1. 概述1.1 说明有时候为了美观会对默认的滚动条样式通过css去进行美化1.2 滚动条内容1.2.1 滚动条外观查看　　　　1.可滑动的内容(中间的实体内容)，即滑块。　　　　2.滚动条边框(轨道)，滑块在此里边进行滑动，即轨道1.2.1 滚动条样式::-webkit-scrollbar 定义了滚动条整体的样式::-webki...

2019-09-19 10:37:00 237

转载 JavaScript 防抖和节流

1. 概述1.1 说明　　在项目过程中，经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题，而往往我们只需去调用一次处理函数即可。有时也会遇到需要在某一规则内有规律的去触发对应的处理函数，所以就需要使用到函数防抖与函数节流来帮助我们实现我们想要的结果以及避免不必要的问题产生。1.2 函数防抖(debounce)定义：当持续触发事件时(如连续点击按钮多此)，一定时间...

2019-09-12 16:14:00 197

转载 JavaScript 数字滚动countup.js

1. 概述1.1 说明在项目过程中，有时候需要动态的去展示一些数据的加载状态，如一个数字为10000，需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。1.2 countup.jscountup.js是一个无依赖性、轻量级的javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。详见countup.js1.3 co...

2019-07-08 15:57:00 684

转载 VUE ECharts人际关系图

1. 概述1.1 说明　　项目中需要对某个人的人际关系进行展示，故使用echarts中的关系图进行处理此需求。2. 代码2.1 代码示例<template> <div class="echartLayout"> <div id="container" style="width:100%; height:100%; ov...

2019-05-24 14:04:00 1994

转载 CSS animation动画

1. 概述1.1 说明在项目过程中，有时候需要使用动画效果来展现某一效果，实现动画效果的方式有很多种，而css3提供的animation属性则可直接使用样式进行控制动画效果。1.2 动画使用　　注意：IE10以前版本不支持animation属性1.2.1 animation 集合使用　　示例：div横向移动效果<!DOCTYPE html>...

2019-05-15 16:20:00 114

转载 CSS user-select文本是否可复制

1. 概述1.1 说明在项目过程中，有时候需要网页中内容信息不可被复制进行保护数据信息，故可使用css属性user-select进行控制用户能否选中文本。1.2 语法user-select : none | text | all | contain | autonone：文本不能被选择，即不可选中复制text：可以选择文本，即可以选中复制文本信息a...

2019-05-13 11:01:00 395

转载 VUE 滚动插件(better-scroll)

1. 概述1.1 说明better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等)，没有滚动条显示却实现了滚动功能。1.2 better-scroll安装　　npm install better-scroll --save 安装至项目中1.3 better-scroll使用　　bette...

2019-04-11 15:49:00 282

转载 VUE 父组件与子组件交互

1. 概述1.1 说明在项目过程中，会有很多重复功能在多个页面中处理，此时则需要把这些重复的功能进行单独拎出，编写公用组件(控件)进行引用。在VUE中，组件是可复用的VUE实例，此时组件中的data必须是一个函数，因为data是一个函数时，每次引用此组件时相当于重新对返回对象进行独立的拷贝(实例化/new)，如果data不是一个函数而是一个对象，那么多个引用同一组件时其中一个引用...

2019-03-18 15:28:00 161

转载 CSS div内文字显示两行，超出部分省略号显示

1. 概述1.1 说明在项目过程中，有时候需要控制div内文字最多显示两行，超出的使用省略号进行处理。使用识别码/前缀-webkit进行处理可直接得到相应效果。1.2-webkitWebKit内核的css前缀为“-webkit-”，Comodo Drangon(科摩多龙)，苹果，安卓，搜狗高速浏览器3，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版...

2019-02-22 17:35:00 1104

转载 JavaScript 当月第一天和最后一天

1. 概述1.1 说明在项目过程中，有时候需要默认展示一个月的查询条件，即当月的第一天和最后一天。2. 代码2.1 代码示例　　直接调用getFirstAndLastDay()即可得到当月的第一天和最后一天。 /** * 获取当前月份的第一天和最后一天 **/ function getFirstAndLastDay()...

2019-02-15 17:39:00 145

转载 JavaScript 变量声明：var、let、const

1. 概述1.1 说明在ES5 声明变量的方法：var命令和function命令。在ES6 声明变量的方法：var命令、function命令、let命令、const命令、import命令、class命令。以下内容主要是对 let 、var 、const 命令的理解与记录。1.2 let 命令1.2.1 let 说明　　let命令的声明变量用法类似于var，如 ...

2019-02-15 14:27:00 131

转载 VUE 导出Excel(iframe)

1. 概述1.1 说明在开发过程中，有时候需要导出某数据表格(excel)以便客户使用，使用iframe对返回二进制文件进行下载处理。记录此功能，以便后期使用。2. 示例2.1 vue示例代码<template> <div> <button class="btnClass" @click="downExcel"&g...

2019-02-13 15:44:00 366

转载 HTML5 图片下载

1. 概述1.1 说明在项目过程中，有时候需要下载某一展示图片，html5中定义了<a> download属性，download属性规定被下载的超链接目标，该属性可以设置一个值来规定下载文件的名称(名称值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件，如.img,.txt等)。在<a>标签中必须设置href属性值。1.2 注意　　<a...

2019-01-26 10:03:00 174

转载小程序模态对话框自定义组件(modal)

1. 概述1.1 说明小程序中使用wx.showModal(Object object)打开一个模态对话框，但是目前小程序所提供的modal中的内容显示比较死板，不能够完全满足工作中所遇到的功能信息，故做一个自定义组件来处理相关的功能任务。自定义组件所需功能：全屏蒙版模态对话框的显示内容：标题、内容、操作按钮对模态框的操作，如显示与隐藏，取消按钮是否显示，...

2019-01-22 15:09:00 681

转载小程序第一个学习示例(TodoList)

1. 概述1.1 说明在微信开发者工具环境下开发一个简易的TodoList功能,以便能够进行学习与熟练小程序相关功能与信息.。示例中,初步计划包含以下功能:1.能够进行新增计划信息2.计划信息可分为已完成与未完成两种状态信息3.数据信息可列表显示4.可以对列表中数据进行标记完成与删除操作5.可进行分页操作(此处仅为一数据示例)　...

2019-01-17 18:10:00 224

转载 VUE 多页面配置(二)

1. 概述1.1 说明　　项目开发过程中会遇到需要多个主页展示情况，故在vue单页面的基础上进行配置多页面开发以满足此需求，此记录为统一配置出入口。2. 实例2.1 页面配置　　使用vue脚手架搭建后将默认index.html，app.vue，main.js三个页面删除，然后在src目录下新增pages文件夹，增加所有的多页面文件。2.1.1 首页一　　sr...

2019-01-03 16:01:00 235

转载 VUE 多页面配置(一)

1. 概述1.1 说明　　项目开发过程中会遇到需要多个主页展示情况，故在vue单页面的基础上进行配置多页面开发以满足此需求。2. 实例2.1 页面配置2.1.1 默认首页　　使用vue脚手架搭建后的首页信息：index.html，app.vue，main.js2.1.2 测试首页　　单独创建的首页信息：home.html ，home.vue，home...

2019-01-03 14:08:00 149

转载 VUE (vue-cli)脚手架项目说明

1. 概述1.1 说明　　使用vue-cli快速创建的vue项目目录如下：build -- webpack相关配置以及服务启动文件，配置多依赖于下边的config文件夹中内容config -- vue基本配置文件，如监听端口，打包输出等配置node_modules -- 安装依赖包的目录文件src -- 页面以及业务逻辑文件夹，在此文件夹下进行项目开...

2019-01-02 14:47:00 531

转载 CSS 三角形与圆形

1. 概述1.1 说明通过边框(border)的宽度与边框圆角(border-radius)来设置所需的三角形与圆形。1.2 边框　　宽高都为0时，边框设置的不同结果也不同，如下：　　1.四个边框都为10px的实线时，页面上会显示出一个宽高都为20px(边框组织起来的)的正方形 .div1{ width: 0; ...

2018-12-29 16:26:00 173

转载 VUE 图片验证码

1. 概述1.1 说明在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期使用。2. 示例2.1 vue示例代码<template> <el-form style="width: 400px;"> <el-form-item style="height: 4...

2018-12-29 11:01:00 217

转载 JavaScript 输入小数点(event.key或event.code)

1. 概述1.1 说明在开发过程中，有时候需要仅输入数字与小数，故记录下使用过的功能，以便后期使用。1.2 key定义：按下按键时返回的标识符，按键标识符是表示键盘按钮的字符串(如1，2，a等)。使用：event.key去获取按下按键的字符串。1.3 keyCode　　定义：按下按键时此按键值所对应的字符代码（如ESC键为27）。　　使用：event.ke...

2018-12-28 13:55:00 629

转载 VUE 数据请求和响应(axios)

1. 概述1.1 简介　　axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库，用于浏览器和 nodejs 的 HTTP 客户端。具有以下特征：从浏览器中创建 XMLHttpRequestsXMLHttpRequest对象用于在后台与服务器交换数据，可做到在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据或接...

2018-12-26 14:49:00 570

转载 VUE 脚手架项目搭建

1. 概述1.1 说明　　vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目。GitHub地址是：https://github.com/vuejs/vue-cli。2. 搭建2.1 node环境　　首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。　　安装完成后，可以命令行工具中输...

2018-12-25 15:37:00 98

转载 CSS 媒体查询@media

1. 概述1.1 定义@media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式，在响应式页面中，@media非常有用。重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。1.2 使用　　css语法：@media mediatype and|not|only (media feature) { CSS-Code;}　　媒体类...

2018-12-22 10:42:00 280

转载 CSS rem长度单位

1. 概述1.1 说明rem是css3中新增的一个单位属性(font size of the root element)，根据页面的根节点(html)的字体大小进行转换的单位，通过此单位属性可以进行自适应性布局开发。1.2 示例说明　　rem的初始值是16px，即默认值为1rem=16px;若在根节点html中设置了对应的font-size值，则1rem等于所设置的值，如...

2018-12-19 16:34:00 259

转载 HTML 页面meta标签

1. 概述1.1 说明<meta>标签提供了HTML文档的元数据【元数据(Metadata)是数据的数据信息】，即页面的元信息，元数据不会显示在客户端，但是会被浏览器解析。meta元素通常用于指定网页的描述，关键词，使用字符，作者等信息。元数据可以被浏览器(如何显示内容或重新加载页面)，搜索引擎(关键字)，或其他Web服务调用。注：所有主流浏览器都支持<me...

2018-12-13 13:16:00 175

转载 VUE 生成二维码(qrcodejs)

1. 概述1.1 引入二维码生成模块npm install qrcodejs2 --save　　注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。1.2 引入使用import QRCode from 'qrcodejs2';　　备注：在main中设置全局可使用Vue.prototype...

2018-12-11 10:53:00 174

转载 VUE 密码验证与提示

1. 概述1.1 说明　　vue项目中，为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求，开发一个组件来满足此需求(当密码输入时进行密码验证操作，当密码的长度在8到24位之间，密码中包含数字/小写字母/大写字母/特殊字符中的三项或三项以上则位正确)。1.2 条件与思路　　1.密码框得到焦点显示提示信息　　2.验证密码长度在8到24位之间　　3.验...

2018-12-10 15:26:00 1231

转载 JavaScript 加解密库(crypto-js)

1. 概述1.1 说明crypto-js(GitHub)是谷歌开发的一个纯JavaScript的加密算法类库，可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有：MD5,SHA-1,SHA-256,AES,Rabbit,MARC4,HMAC,HMAC-MD5,HMAC-SHA1,HMAC-SHA256,PBKDF2。常用的加密方式有MD5和AES，...

2018-12-10 13:48:00 328

转载 VUE 浏览器关闭时清空localStorage

1. 概述1.1 说明vue项目中，为了解决页面刷新时vuex数据丢失问题，使用localStorage进行存储对应的vuex数据(判断对应localStorage是否为空，不为空则为vuex中数据进行赋值)，而localStorage的存储时间为长久存储，故为了数据安全则需在浏览器关闭时进行清空存储。1.2 条件与思路1.vue项目对应的单个网页刷新数据不丢失 --...

2018-12-05 14:52:00 4184

转载 CSS 重置默认样式

1. 概述1.1 说明css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准，使HTML元素样式在跨浏览器时有一致性的效果。备注：浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果不对css初始化往往会出现浏览器之间的页面显示差异。但是初始化样式也会对SEO有一定的影响，故初始化时尽量使影响最小。1.2 重置文件reset.css：传统的重置样式文...

2018-12-04 16:50:00 312

转载 HTML5 WebSocket 协议

1. 概述1.1 说明WebSocket：是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket原理是使用JavaScript调用浏览器的API发出一个WebSocket请求至服务器，经过一次握手，和服务器建立了TCP通讯，因为它本质上是一个TCP连接，所以数据传输过程中稳定性强，数据传输量比较小。1.2 属性值objSocket.rea...

2018-12-04 15:56:00 182

转载 CSS Position 定位

1. 概述1.1 说明position属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。1.2 属性值absolute：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为body文档本身。元素的位置通过"left"、"top"、"right"以及"bottom"属性进行...

2018-09-04 21:45:00 110

转载 CSS Box Model 盒子模型

1.概述1.1前言css盒子模型具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)；而日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以用盒子模式来理解。生活中的盒子说明：内容(content)：盒子里装的东西。填充(padding)：怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其他抗震的辅料。...

2018-08-31 21:33:00 123

S_mile1992的博客