前端开发
麦兜:)
对学习的新技术分享,对网上优秀代码整理,对工作遇到的问题分享
展开
-
Ant Design Vue组件库,下拉框内容与select分离的问题
问题如下动图:解决方案:select组件的api有一个方法添加上去后就可以了原创 2021-07-27 10:57:00 · 1067 阅读 · 0 评论 -
在html中使用import遇到的问题
1.目前大部分浏览器已经原生支持HTML imports了,浏览器支持性如图:2.可根据如下代码判断浏览器支不支持HTML imports// main.htmlfunction supportImport() { return 'import' in document.createElement('link');}if (supportImport()) { console.log('浏览器支持import特性');} else { console.log('浏览器不支持im原创 2020-05-27 14:48:19 · 14852 阅读 · 5 评论 -
css实现单色或图片背景透明,而文字不透明的方法
一.单色背景方法: 不使用opacity属性,而是使用rgba例子:<style> .bg { background-color:rgba(0,0,0,0.4) }</style><div class="bg">背景是透明度0.4的黑色,文字不透明</div>效果:二.图片做背景方法1: 将图片跟文字设置成兄弟关系,对图片设置opacity属性,把文字设置成绝对定位,然后将其定位到图片上例子:<style&g原创 2020-05-19 11:44:28 · 619 阅读 · 0 评论 -
vue cli3.x以上版本搭配vant配置postcss-pxtorem和lib-flexible
1.下载包npm install lib-flexible --savenpm install postcss-pxtorem --save-dev2.在main.js,加入以下代码import "lib-flexible/flexible";3.在public/index.html,删除<meta name=“viewport” …>原因:flexible会为页面根...原创 2020-05-07 17:03:22 · 948 阅读 · 0 评论 -
vue-cli3.0 axios跨域请求代理配置
假设后端的请求地址: http://127.0.0.1:3000/admin/api1.在根目录下创建vue.config.js文件(vue cli3.x以上版本是没有config文件的),代码如下:module.exports = { devServer: { // 设置代理 proxy: { '/api': { target: 'http:/...原创 2020-05-02 15:04:37 · 1006 阅读 · 0 评论 -
在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装
前后效果图:一.出现这类问题的原因编码格式的问题,默认处理时utf8格式,但可能出现GBK,GB2312…等格式二.解决的方法识别编码,告诉papaparse三.需要的插件jschardet只能检测编码,不能把乱码转成原文四.创建一个文件夹...原创 2020-04-28 22:11:39 · 5224 阅读 · 2 评论 -
纯css3实现可按下动效按钮
效果如下:css代码:<style> body { background: #272822; margin: 0; perspective: 600px; -webkit-perspective: 600px; } /* Button ...原创 2020-03-30 21:23:38 · 1317 阅读 · 0 评论 -
uni-app整合最新版vant-weapp,遇到的问题和解决办法
1.前往github下载vant-weapp组件库,github地址2.在HBuilderX中新建uni-app项目,并在新项目的根目录下新建个目录,用于存放vant-weapp组件,我新建的目录名为wxcomponents为例3.将步骤1的dist文件复制粘贴到wxcomponents目录下,并改名为vant4.使用uni-app提供的easycom组件模式,具体看uni-app文档...原创 2020-03-30 12:41:13 · 14871 阅读 · 16 评论 -
一文彻底弄懂scoped的原理,导致的问题及解决的办法
原理:给元素添加唯一属性(同一组件中所有dom添加的属性值相同),然后通过属性选择器获取该元素(类似于人的身份证,在这个组件中是唯一的)通过 PostCSS 实现以下转换<template> <div class="test">hello</div></template><style scoped>.example {...原创 2020-03-27 15:04:23 · 2584 阅读 · 1 评论 -
解决vue keyup.enter和blur绑定同一事件,触发两次的问题
<el-input ref="editTagFoucus" size="mini" @keyup.enter.native="$event.target.blur" @blur="editCompleteTag(items)" v-model='items.name'> </el-input>原创 2020-03-15 12:28:07 · 1820 阅读 · 0 评论 -
使用css3的网格(Grid),做出瀑布流式布局
效果如下:关于网格grid,就看大神阮一峰的Grid 网格布局教程效果的代码如下:html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...原创 2020-03-09 17:04:14 · 4105 阅读 · 0 评论 -
在vue中实现图片懒加载,并引入promise判断加载状态和优化
为什么需要懒加载?答: 当你的一个网页,图片有几十张,上百张时,同时的加载,有可能会导致网页出现很长一段时间的空白,而且用户并不一定会浏览全部的图片,全部加载完,也会浪费用户的浏览,这样的体验是很不好的.效果如图:那么如何在vue项目中实现懒加载呢?1.懒加载的原理一张图片就是一个标签,浏览器是根据src的属性发起图片请求的.那么我们实现的依据就是当前图片出现在可视屏幕上,就把图片的地...原创 2020-02-25 00:27:52 · 1846 阅读 · 0 评论 -
解决vue cli3.x打包更新版本,浏览器缓存问题
问题: 每次打包更新版本发到服务器上,导致偶尔会出现不能及时更新最新代码,浏览器存在缓存的问题。总不能让用户打开新的无痕窗口吧。解决: 我们可以在打包的文件名中添加一个版本号以便浏览器能区分。1.找到vue.config.js(vue cli3.x生成的项目默认没有这个文件,需要自己创建)2.添加如下代码// 时间戳保证不会版本重复const Timestamp = new Date()...原创 2020-02-24 12:45:45 · 5579 阅读 · 3 评论 -
简单使用Vuex
由例子开始,从中学会简单使用Vuex,需求,把路由的标题应用在网页上,效果如下:环境: 利用了vue cli3.x并在初始化项目时添加了Vuex1.在目录store下的index.js中的代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ sta...原创 2020-02-06 16:23:23 · 195 阅读 · 0 评论 -
使用vh,vw配合媒体查询做pc端的界面自适应
效果如下:前景提要:因为我司后台管理的页面都需要在可视的浏览界面中展示所有内容,不允许在html,body中出现滚动条,查找了很多的布局方法,都不尽人意.后面看到vw,vh单位,惊喜起来.特写此文章前端的环境:利用vue cli3.x搭建,css预编译使用的是less一.全局引入less的变量1.下载style-resources-loader,使用vue add这样会自动在vue....原创 2020-02-03 17:25:47 · 5466 阅读 · 7 评论 -
在cookie中取对应的值的小方法和使用js-cookie插件
cookie里面有多个字段,你想提取特定的字段的,可以用这个这个大佬的代码,就几行。尊重原创,链接:https://stackoverflow.com/a/21125098代码如下// 取得指定cookie值得方法 function readCookie(name) { var nameEQ = name + '=' var ca = docume...原创 2020-01-11 23:22:15 · 285 阅读 · 0 评论 -
canvas制作框内跳动小球
效果如下:思路:1.制定画布,确定好坐标2.绘制出圆形小球3.给圆一个原始坐标,xy轴的速度4.每20毫秒刷新一次,达到变化的目的5.判断边缘全部代码及释义如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...原创 2019-12-27 11:05:19 · 435 阅读 · 0 评论 -
WebGL实现云朵效果,及遇到的问题,已解决
效果如下:1.原代码地址:https://github.com/wdm510708502/webgl-clouds2.打开index.html,有可能你会惊奇的发现,云呢?云呢? 你可能用的是谷歌浏览器或者360浏览器,而使用Microsoft Edge是可以正常显示的,为什么呢?3.打开F12的console,你会发现,图片被跨域拦截了,因为这并不是img的src4.要怎么解决呢?...原创 2019-12-23 16:47:12 · 1146 阅读 · 3 评论 -
vue+element-ui+sortable.js实现表格拖拽功能
效果如下:1.vue使用cli项目就不说了,本人使用的是cli3.x版本2.下载element-uinpm i element-ui -S3.引入element-ui,找到main.js,加入如下代码// 导入element-ui,和全局使用element-ui样式import ElementUI from "element-ui";import "element-ui/lib/...原创 2019-12-23 14:26:12 · 2752 阅读 · 2 评论 -
vue使用cli3.x整合electron桌面应用
注: 使用yarn,相信我,不然你会遇到很多麻烦1.使用cli3.x创建一个vue项目,过程略vue create hello-world2.进入项目,下载依赖包yarn install3.下载electron相关包yarn add electronyarn add electron-packager4.在vue根目录创建electron.js// Modules to c...原创 2019-12-18 17:56:42 · 1823 阅读 · 6 评论 -
在vue中写一段自适应屏幕代码,并在移动端判断横竖屏
效果如下:只需在app.vue中写入如下代码<script>export default { data() { return { screenWidth: document.body.clientWidth // 网页可见区域宽 }; }, watch: { screenWidth(val) { // 为了避免频繁触发...原创 2019-11-21 23:41:08 · 3349 阅读 · 0 评论 -
vue中,本地图片路径写到js中,图片不显示问题
在vue中,平常引入本地静态图片都是直接写在html中的,今天把本地静态图片通过v-bind绑定到html上却发现图片不显示了.原来是,没把图片导出(加上require就行了),代码如下:<template> <div class="ceshi"> <img :src="ceshi" alt=""> </div></temp...原创 2019-11-12 14:37:52 · 3580 阅读 · 3 评论 -
vue利用事件委托实现按钮互斥,并传递对应的值
效果如下:事件委托:也称事件代理原理:事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理这一类型的所有事件。应用场景:我有一个ul标签,下面有很多li标签,每个li标签都需要添加事件,难道我们要获取每个li然后在添加事件吗? 这样太浪费内存了,也不利于网页性能优化,我们要尽可能减少dom操作,所以我们能不能只给ul添加点击事件,然后利用事件冒泡,这样每个li标签都有事件了.效果的...原创 2019-11-06 16:46:18 · 1610 阅读 · 0 评论 -
vue项目通过FormData上传图片并实时显示图片,及elementUI的对话框中遇到的问题
实现的效果如下:所用的技术栈:vue CLI3.x,elementUI本文章只放了关键代码,和部分注意事项1.html的代码 <!-- 对话框 该对话框在mounted时未被挂载--> <el-dialog title="title" :visible.sync="dialogFormVisible"> <el-form :model="for...原创 2019-11-05 15:58:11 · 3719 阅读 · 0 评论 -
分享一些前端使用的工具
1.本地文件搜索神器-Listary用途: 当你的项目多时,这款神奇能帮你很快找到项目2.真正的截图神器-Snipaste用途: 当你要参考代码时,可以用它来固定3.抓屏工具-FSCapture用途: 不仅仅是个抓屏工具,我更多用他来度量页面尺寸4.思维导图软件-XMind ZEN用途: 当你的项目的页面多时,是它能助你理清页面5.网页调试工具-Postman介绍: post...原创 2019-10-29 17:59:47 · 278 阅读 · 0 评论 -
页面超出部分滚动,但不显示滚动条
效果如下:最初看到这效果,是在pc端的知乎登录页.所以就去百度了方法.注意:利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>超出部分...原创 2019-10-29 17:21:03 · 5916 阅读 · 0 评论 -
vue+elementUI表单优化,修改行数据,不用发送请求初始化表单
写出这个优化之前,是因为服务器有点差,每次修改上下架状态的时候,发送修改状态的请求,为了页面显示的"文本"状态也改变,还需要发送一次初始化列表的数据,对于以后数据量大的时候,是很不友好的,而且前端的优化,不就是减少请求么,所以就想着优化一下.思路:1.后端返回的初始化表单数据,我存在了data()的tableData中,上下架的状态( 0:下架 1:下架 )2.html代码,eleme...原创 2019-10-24 16:23:41 · 753 阅读 · 0 评论 -
vue动态增加,删除表单输入框
效果如下:参考代码:url一. html代码<div class="distribution-set-container"> <!-- 面包屑导航 --> <Bread :fromFather="dataPath"></Bread> <!-- 主体内容 --> <div class="content">...原创 2019-10-23 16:01:35 · 3626 阅读 · 0 评论 -
vue+elementUI+表格,实现输入框失去焦点获取当前id和当前输入框改变的内容
实现的效果:步骤:一. html代码 <!-- 用户列表表格 --> <div class="user-list-table"> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="userId" label...原创 2019-10-17 13:26:21 · 15033 阅读 · 2 评论 -
vue实现带省市区三级联动的表单demo
效果如下:插件: v-distpickergithub地址: https://github.com/jcc/v-distpicker效果的部分代码:html代码<div class="content"> <!-- 省市区三级联动 --> <v-distpicker @selected="selected"></v-distpic...原创 2019-10-21 18:21:21 · 1754 阅读 · 1 评论 -
vue+elementUI实现点击按钮互斥效果
先看看实现的效果吧!步骤:一.html代码<!-- 等级筛选 --> <div class="level-screening"> <el-button size="medium" type="primary" :class="index==itemType?'highlight':''" ...原创 2019-10-16 17:09:10 · 2991 阅读 · 1 评论 -
vue+elementUI面包屑组件封装
1.选择用哪种样式2.在组件文件夹下创建组件3.在Bread.vue复制如下代码<template> <!-- 面包屑 --> <div class="bread"> <el-breadcrumb separator-class="el-icon-arrow-right"> <!-- <el-breadcrumb-...原创 2019-10-16 11:10:37 · 1675 阅读 · 0 评论 -
vscode vue项目代码断点调试
1.下载Debugger for Chrome2.点击昆虫图标,设置图标复制以下代码{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch chrom against localhost", ...原创 2019-10-14 01:03:06 · 5642 阅读 · 0 评论 -
vue cli3.x中使用ESlint,及保存自动规范
https://blog.csdn.net/yangfan_357/article/details/99678140原创 2019-10-13 22:39:18 · 1111 阅读 · 1 评论 -
vue全局方法封装
场景:在一个项目中,有个需要下载的功能,但在本地测试和上线的时候,需要把所有下载的url地址改变,实在太麻烦.项目结构:利用的是vue的cli3.x实现:找到 src/assets/js/mydownload.js var sessionKey = localstorage.getItem("sessionkey") export default { mydownlo...原创 2019-10-09 21:04:49 · 1019 阅读 · 0 评论 -
ES6的forEach和filter的使用及区别
需求:去除包含a的数组元素// 使用传统的方法 var arr = ['lla','gsga','ss'] var newArr = [] for(var i = 0;i< arr.length;i++){ if(arr[i].indexOf('a') === -1){ newArr.push(arr[i]) } }...原创 2019-09-28 22:57:00 · 1353 阅读 · 0 评论