- 博客(25)
- 收藏
- 关注
RSS订阅原创 video视频自适应缩放显示
视频是可以按比例缩放显示的，现在大部分视频的宽度与高度比例是16:9，我们可以通过CSS将视频按照这个比例进行缩放显示。通过百分比设置宽度，根据宽高比16:9，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把视频百分百填充到设置的区域里面<div class="video-box"> <video src=""></video></div>.video-box { padding-bottom: 56.25%; wi
2021-10-27 12:51:51
11372
1
原创 css className 不要以 ad 开头
当className以ad开头时，你会发现在某些浏览器上，这个元素死活出不来，这是为什么？其实是因为 Adblock、Adblock Plus 等浏览器插件会自动屏蔽一些以 ad 开头的标签和文件。装上这些插件，浏览器会认为ad开头的元素是广告，就自动屏蔽了，js 和img路径名字都最好避免以ad开头来命名。...
2021-08-20 15:39:55
157
原创 消除input框自动填充背景色
有时form表单不是纯白色，浏览器自动填充后会有背景色，很影响美观，像这样：利用伪类来消除白色的背景色：input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s;}效果如下：自动填充的字体颜色默认是黑色，如若改变自动填充的字体颜色，可用如下代码：-webkit-text-fill-co
2021-08-18 09:49:48
1519
原创 vue 中 computed 传参
<ul class="product-list clearfix"> <li v-for="(item, index) in wishList" :key="index" :class="{ 'edit-style': show }" > <p v-if="!hidePriceModule(item)" class="price"> {{ ite
2021-06-09 14:22:34
642
原创 vue 中怎样使用lodash debounce函数
methods: { handleFocus() { // to do }, handleInput: debounce(function() { // to do }, 500), goSearchList() { // to do } }
2020-11-02 14:27:25
3011
转载 el-select在移动端/ipad上搜索功能不能弹出软键盘进行搜索的问题最佳解决方案
首先这个问题我解决了一天，但结果发现他是个小问题，这里先不浪费大家时间，直接给解决方案：去除下拉框的readonly属性即可。懂的自然懂，具体方案可以看最后，先看下过程，可能对你有帮助。 <el-select placeholder="请选择产品花型" filterable id="fuck" v-model="flower"> <el-option v-for="(item,index...
2020-09-17 12:02:58
2029
3
原创 git 删除远程分支后，在本地依然能看到的解决办法
当同事删除远程分支后，在自己电脑上git branch -a查看分支时，依然能看到删除过的远程分支这时候通过git remote prune origin清理一下，再执行git branch -a就看不到了
2020-08-25 13:56:23
1215
原创 nuxt.js 中使用vue-awesome-swiper不兼容ie11
问题：在nuxt.js中使用vue-awesome-swiper 在ie11浏览器下报错，导致页面一片空白
2020-08-05 17:39:16
1500
原创 解决Promise.all一个被rejected，整个都被rejected的缺陷
先看下Promise.all的具体用法const p = Promise.all([p1, p2, p3]).then(() => { // 当 p1、p2、p3 都是relsolved状态时，调用此回调方法}).catch(() => { // 当有一个是rejected时，就调用此回调方法})当p1的状态为rejected时，p2、p3都不会再执行，很显然这是一个大缺陷，但是，如果作为参数的 Promise 实例（p1、p2、p3），自己定义了catch方法，那么它一旦被r
2020-05-18 17:08:45
2040
原创 loading封装
1.支持设置loading延时出现的时间，比如接口响应很快，就没必要显示loading了，否则loading闪一下就消失了很多余2.支持设置loading是否出现，虽然loading是封装在axios拦截器里的，但是某些接口可能不需要有loading显示3.以服务的方式调用,引入 element ui Loading 服务基于nuxt $axios模块，代码如下：import { Mes...
2020-03-20 15:17:18
672
原创 前端无感刷新token
单个接口的刷新token很好解决，难点是多接口并发首先将token过期后的请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新token后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢？为了解决这个问题，我们得借助Promise。将请求存进队列中后，同时返回一个Promise，让这个Promise一直处于Pending状态（即不调用resolve或reject），此时这...
2020-03-19 10:31:25
5678
1
转载 vue单页面应用无感刷新当前页面
刷新当前页面常用的方法是：第一种方法是：`window.reload()；`第二种方法是：this.$router.go(0);这两种方法是可以刷新当前面，但刷新的那一瞬间，页面会有一瞬间空白闪烁；这样用户体验不好。今天给大家介绍第三种方法：使用provice和inject结合的方法。此方法着实有效，不会有闪烁的空白出现。如下：首先在App.vue组件里声明这个方法，写法如下：...
2020-02-21 17:49:07
2881
2
原创 将数据下载导出为CSV文件
var resultsData = require('./results.json'); //results.json是数据源var itemArray = [];resultsData.forEach(function(oneUrl) { oneUrl.results.forEach(function(item) { var obj = {}; var myGroupLi...
2019-10-09 11:23:53
484
原创 使用nightwatch框架爬取数据
话不多说直接上代码，简略教程见上一篇const urls = [ 'https://www.facebook.com/search/groups/?q=Vape Vapor Ottawa&epa=SERP_TAB' //......];var successResults = [];var search = (browser, url) => { brows...
2019-10-09 11:12:02
216
原创 初探自动化测试（爬虫）框架nightmare&nightwatch
一、nightmareNightmare 是一个基于 Electron 的框架，利用了 Electron 提供的 Browser 的环境，用于 Web 自动化测试和爬虫(其实爬虫这个是大家自己给这个框架加的功能)，可以在页面上模拟用户的行为触发一些异步数据加载。具体的安装使用方法见官网http://www.nightmarejs.org/ 。小贴士：二进制的 Electron 依赖有点大，...
2019-10-09 11:07:30
1646
原创 vue怎样定义全局变量
项目需要定义一个全局变量供所有vue实例使用，首先在common.js中：import axios from 'axios';const api = { async getLanguagesList() { const url = `${baseUrl}/xxxxxx`; const res = await axios.get(url); return res;...
2019-08-23 17:38:15
302
原创 prop“数据双向绑定”
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。2.3.0+ 新增.sync 修饰符，可以实现prop双向绑定。举个例子，在一个包含title prop的子组件中，props: { title: '', },可以用以下方法赋新值：this.$emit('update:title', newTitle)然后在父组件中：<child-component :...
2019-08-22 16:08:22
1109
原创 解决Stylelint --fix后会把vue文件中css以外的部分删除掉
问题：–fix自动修复会把Vue文件中所有内容都移除掉,只剩css代码解决方案：移除配置中的processors项原因: 网上一些过时的教程包括 github 上的讨论都推荐使用 stylelint-processor-html 或者 @mapbox/stylelint-processor-arbitrary-tags 来解析 html 或 vue 中的 css ，这本身并没有什么问题，但是这...
2019-08-21 15:18:46
2680
原创 vue重置data数据
我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取该组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态了。ps: Object.assign() 合并对象时，同名属性，后边的会覆盖前边的。...
2019-08-02 11:11:41
1613
转载 vue数组/对象更新，视图不更新解决办法
3.还有个小技巧当数据已经更新了 但是视图没有更新的时候 比如 这里 视图并没有更新说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效在data中写一个msg对象 执行aa方法让msg自增一 这样aa中所有的数据都会更新到视图中注意：msg一定要在页面中展示出来 如果不想让他显示 可以用v-show隐藏掉 不能用v-if...
2019-07-10 16:18:37
2318
转载 Element-ui中自动验证问题的解决
原文链接：https://www.jianshu.com/p/d2c900f7b730Element-ui中的el-form组件自带了验证功能，方便了我们的开发。然而，在开发中经常会遇到一些莫名其妙的问题，比如表单一出来就触发了验证、验证提示出现英文等等。通过查看源代码的方式，我终于找到了问题的根源，也有了解决方法。在我的项目的一个页面中，需要弹出表单框并填入旧数据。然而，我只要拿到旧数据并赋...
2019-07-10 16:06:29
3356
3
原创 兼容safari浏览器遇到的坑~~~~~
今天测试哥哥丢过来一个小bug，说是在safari浏览器下表单验证的错误提示出不来，看了半天百思不得其解，后经对面精通css的设计师MM的提醒下，做了如下修改，bug竟神奇的解决了，上图~修改前修改后总结：复写样式时复写前复写后选择器要写的一模一样才行...
2019-07-03 16:24:24
2536
2
转载 npm install 你很明白吗
【当我们敲 npm install 的时候会安装哪些依赖，dependencies 和 devDependencies 都会安...
2019-06-28 10:19:26
160
原创 如何构建基于vue-cli3的个人组件库
创建一个Vue-cli3项目如何创建请参考：https://cli.vuejs.org/zh/创建examples目录将项目中src的文件夹名修改为examples，该文件夹用于存储组件库的示例。因为修改了src的文件夹名，在构建时本应该打包src中的内容无法被正常打包了，所以我们要添加examples目录到webpack配置文件中。(后续段落介绍如何修改配置)创建packages目录...
2019-06-27 13:30:59
416
原创 将本地vue-cli3创建的项目关联到github远程仓库
首先进入需要关联到远程仓库的项目文件夹中，执行如下命令：1、git initgit init 初始化项目。2、git remote add origin < remote-repository-address >将本地的项目与远程仓库关联起来，remote-repository-address为远程仓库地址，可以去github去获取，然后执行git remote -v查看是否关...
2019-06-19 13:24:15
1082
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人