- 博客(31)
- 资源 (3)
- 收藏
- 关注
RSS订阅
转载 关于移动端布局(响应式布局)，你必须要知道的
前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。视口移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等...
2019-01-07 19:41:12
4754
原创 CSS 渐变色 （超好看）
分享两个个人感觉超级好看的渐变色：下面贴出代码： .rainbow { width: 200px; height: 50px; background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%); } .azure { widt...
2018-09-20 17:58:54
35546
10
原创 /deep/和＞＞＞和::v-deep
在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox /deep/ .el-input__inner{ padding:0 10px;}注意，/deep/在vue 3.0会报错如果/deep/报错，可采用::v-deep，效果基本一样.conBox ::v-deep .el-input__inner{ padding:0 10px;
2022-02-11 15:50:18
432
原创 【无标题】CSS实现漂亮按钮
一.弹跳效果 创建一个静态的按钮； 然后利用animation属性，创建动画，当变换到50%时，按钮变换到1.2倍，到动画100%时按钮又恢复原样。 <div class="button1"> <span>立即下载</span></div>.button1 { width: 200px; height: 46px; line-height: 46px; background: #2e.
2021-12-30 19:35:39
640
原创 gitlab-ci
1.注册一个Runner： gitlab-runner register ；回车之后让输入url和token；在gitLab=>项目=>settings=>CI/CD =>Runner => Specific runners 中获得;并且给其起一个好识别的别名；tags填写自己想监听的分支即可；语言直接shell2.通过gitlab-runner list可以查看当前正在运行的runner3.编写job文件.gitlab-ci.yml；在项目根目录下创建该文件；并且编.
2021-12-24 18:05:54
227
原创 Jenkins + gitlab 自动部署 + 部署结果消息通知
Jenkins中设置相关信息（如果发现jenkins有最近的插件；而咱们的并没有的话；可能是没有安装；可以找到对应的安装包给运维同学；让用admin账号给安装了以后就有最新的插件了）配置步骤： 项目config -> 构建触发器 -> BuildURL(复制url) -> 高级 -> Allowed branches(监听分支) -> Secret Token (复制该token) gitlab中: 项目gitlab -> 设置 -> Webhooks ；将Jen
2021-12-24 18:02:21
771
原创 vue自定义组件上的v-model如何与子组件数据绑定
写组件的时候，好多时候子组件需要主动修改父组件的值，或者绑定。这时候再用单纯的父子组件通信显得不合适，最好是让父组件不在过多的自己去操作数据，不然就不像一个本分的组件了，这时候就需要v-model。子组件：this.$emit('自定义属性', data.ids)父组件：<child @自定义属性='方法'/>v-model父组件写法：<div> <child v-model='text'></child>&...
2021-02-26 20:24:19
768
原创 Vue项目自动转换 px 为 rem，高保真还原设计图
而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem技术栈vue-cli：使用脚手架工具创建项目 postcss-pxtorem：转换px为rem的插件。自动设置根节点html的font-size因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。具体原理网上有很多文章分享，这里不具体解释。1、创建rem.js文件很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES
2021-01-23 15:56:25
228
原创 微信浏览器返回键 阻止返回上个界面
可以指定点击回退按钮时跳转的url，代码如下pushHistory(); window.addEventListener("popstate", function(e) { window.location.href='aaaaa.html';//指定回退的地址 }, false); function pushHistory() { var state = { title: "title", ..
2020-08-11 12:12:17
1273
原创 H5 与 原生APP交互(安卓 IOS )
H5与安卓交互：自己规定好的参数.自己规定好的参数() 例如：rich.callShareForMoreVipShare() 如果需要带参数： const imgUrl = 'https://111111.jpg'; rich.callShareForMoreVipShare(qrUrl)H5与I...
2019-10-21 20:10:25
450
原创 Web Notification消息通知的使用（桌面消息通知）
如果没有效果，请开启浏览器的消息通知权限。 下面上代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" co...
2019-08-19 20:12:01
533
1
转载 vue插件大全汇总，你要的都这里，赶紧收藏下！
Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！一、UI组件及框架element- 饿了么出品的Vue2的web UI工具套件mint-ui- Vue 2的移动UI元素iview-...
2019-07-03 20:18:33
3906
原创 js获取客户端计算机硬件信息与系统信息
<html><head> <script>var info = allinfo();document.write(info); var locator = new ActiveXObject ("WbemScripting.SWbemLocator"); var service = locator.ConnectServer(".");inf...
2019-07-02 12:05:22
1647
原创 babel-cli的使用 -- ES6转ES5 （解决浏览器兼容问题）
现在ES6盛行，开始大量使用ES6的特性敲代码，但限于Node.js本身对ES6的特性支持的不够完备，那么需要借助于其他工具来完成。基本上，现在都直接写ES6的代码，然后使用babel-cli提供的babel转换成ES5或者使用babel-node直接运行ES6的代码。虽然网上有好多babel使用的帖子，但是我发现，我按照网上的教程在各别版本的手机上并不好使。于是记录一下自己的：安...
2019-05-29 18:12:08
2011
原创 Vue Bable 兼容低版本浏览器（PC端 移动端）
Vue项目 打包后，运行在一些低版本手机浏览器里可能会出现白屏情况。首先安装：$ npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react然后，新建一个.babelrc文件{ "presets": ["@babel/preset-env", "@babel/pre...
2019-04-26 20:10:46
622
原创 VUE 文字无缝滚动 及 停顿滚动 --CSS动画
大家可以直接把下面代码完整的copy到自己项目里，看一下效果，效果就是在电商项目抽奖里名单公布的那种效果<template> <div> <h1>demo11</h1> <h2>文字无缝滚动+停顿滚动 -- CSS动画</h2> <div class="text-container"> ...
2019-04-20 18:47:37
4133
原创 vue 组件之间通信的几种方式
这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的几种组件通信方式与相关操作注意事项，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。1. props和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。Vue.component('child',{ data(){ ...
2019-03-12 17:50:20
416
原创 Flex布局及在移动端的应用
前端发展很快，以前在移动端使用Flex布局还要想三想的文章也许已经过时了，这篇文章主要介绍使用Flex进行常规布局及在移动端的处理。Flex语法Flex布局意为"弹性布局"，用来为盒模型提供更多灵活性。此外，Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex;)生效，需要注意的是，如果父元素设置了Flex容器，则子元素的fl...
2019-03-06 11:48:31
290
原创 module.exports | exports | export | export default的区别
1、首先上是用法上的不同module.exports和exports的用法是后面加一个等号，再接具体的导出module.exports=...exports=...export和export default的用法是后面直接接具体的导出，没有等号export ...export default ...2、exports其实是module.exports的引用在...
2019-03-04 20:41:34
155
原创 vue-cropper 图片裁剪 图片跨域问题
vue-cropper是一个很好用的图片裁剪插件，目前在项目中用到了，图片上传后，是存储到阿里云的，等拿到后端反给的图片路径去渲染到页面时，会提示图片跨域。解决方法：imgTrick(src) { const img = new Image() img.src = src img.crossOrigin = 'anonymous' retu...
2018-11-27 11:33:17
8699
6
原创 npm安装依赖 及安装指定版本的方法
比如使用npm下载jquery依赖npm install [email protected] --save在package.json文件中可以看到："jquery": "^2.0.0"全局安装：npm install xxx -g //模块将被下载安装到【全局目录】中信息写入：npm install xxx --savenpm install xxx --save-d...
2018-11-02 18:07:33
11519
原创 js 原生js获取一个元素的距离
分享一个js 原生获取一个元素的距离，比较全的api： document.getElementById().getBoundingClientRect()打印效果如下：DOMRect { bottom: 692 height: 600 left: 443 right: 817 top: 92 width: 374 x: 443...
2018-11-01 17:41:54
1919
转载 五个小技巧让你写出更好的 JavaScript 条件语句
在使用 JavaScript 时，我们常常要写不少的条件语句。这里有五个小技巧，可以让你写出更干净、漂亮的条件语句。1. 使用 Array.includes 来处理多重条件举个栗子
2018-10-24 16:07:53
229
转载 js-异步机制,同步机制,promise,async,await
Javascript的优势之一是其如何处理异步代码。异步代码会被放入一个事件队列，等到所有其他代码执行后才进行，而不会阻塞线程。1 理解异步代码:1.1 JavaScript最基础的异步函数是setTimeout和setInterval。setTimeout会在一定时间后执行给定的函数。它接受一个回调函数作为第一参数和一个毫秒时间作为第二参数。console.log(1);set...
2018-08-16 17:03:02
291
原创 前端性能优化+代码示例
前言现在确实有好多性能优化方面的文章，但好多都只是文字讲解，马上下班了，抽点时间总结总结。前端性能优化的原则其实就是更好的用户体验，具体实现的目标大体有两个：合理使用内存或缓存，减少请求； 减少CPU或者GPU的计算，达到更快的展现。前端在性能优化的方向大体有两个：减少页面体积，提升网络加载 优化页面渲染正文一.减少页面体积，提升网络加载1、静态资源的压缩合并（JS...
2018-08-03 18:06:52
742
原创 JS中回调函数(callback)理解
前言今天有个刚入行的小兄弟问到了回调函数，讲解了一番以后觉得不能白讲，得把这些东西记下来，虽然很基础。。。介绍首先从英文介绍开始A callback is a function that is passed as an argument to another function and is executed after its parent function has complet...
2018-07-24 17:46:16
58203
29
原创 JavaScript数组去重 多种方式及性能测试
JavaScript数组去重，一个老生常谈的问题了，但这次是解锁多种JavaScript数组去重姿势。对以下所有的实现算法，都使用以下代码进行粗略测试：双重循环双重循环去重实现比较容易。实现一：实现二：Array.prototype.unique = function () { const newArray = []; let isRepeat; for (let i = 0; ...
2018-07-10 17:03:18
338
1
原创 JS 通过百度地图获取详细地址及经纬度
下方代码可以通过百度地图获取到经纬度和详细位置地址注意：<script type =“text / javascript”src =“http://api.map.baidu.com/api?v=2.0&ak=********”> </ script>'********' 位置是百度的秘钥，得自己去申请申请地址：HTTP：//lbsyun.baidu.com/api...
2018-06-14 17:14:22
10081
1
原创 Webpack4 搭建项目初试
what is webpack？webpack可以看做一个模块化打包机，分析项目结构，处理模块化依赖，转换成为浏览器可运行的代码。初始化项目// 这里不做过多描述npm init新建src文件夹，并新建index.js，随便写几行js。安装webpackwebpack4.0以上抽离出了webpack-cli,所以我们需要下载2个依赖(npm i -D 是 npm install --save-d...
2018-06-12 15:53:34
491
原创 Vue.js数据双向绑定的实现原理
Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。本文仅探究双向绑定是怎样实现的。一、访问器属性访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。 var obj = { }; // 为obj定义一个名为 hello 的访问器属性 Object.definePropert...
2018-05-25 10:53:34
392
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人