weixin_44610025的博客

原创 vue项目登录页背景图百分百铺满屏幕宽高自适应

vue项目背景图百分百铺满屏幕宽高自适应.login{ background: url(../../../static/img/login/beijing@2x.png); background-size: 100% 100%; width: 100%; height: 100%; position: fixed; }

原创 a标签锚点跳转路径不变且平滑过渡

a标签的定位锚点跳转非常好用，但是存在两个小问题：1、路由发生变化2、跳转过于生硬解决办法：<ul> <li >top</li> <li><a @click = "jump('#hot')">推荐</a></li> <li><a @click = "jump('#first')" >1楼</a></li> <li><a @cli

原创 vue+element项目 PC后台管理图片可点击查看并旋转

后台认证审核管理页面，需求：图片可点击放大查看且能够旋转。思路：图片可点击放大可以使用element的Dialog，旋转就用C3的rotate就可以。效果：初始图片：点击放大后：点击按钮左，往左旋转90°后：实现代码：结构：<div> <h3>身份证照片：</h3> <div class = "card_box"> <div class="one"> <div cl

原创 vue+element项目动态添加删除数据div

vue+element项目动态添加删除数据div效果如下：1、初始状态2、点击添加两条数据3、删除第一条数据代码如下：<el-form-item> <p>任务内容：</p> <el-button type="primary" v-on:click="addTest">添加</el-button></el-form-item><div> <el-form-item v-for

原创 vue+element项目打包后样式变化问题

vue+element项目打包上传后，element样式失效。经搜索查找，解决办法如下：先引入element组件，再引入routermain.js

原创 网页上传到正式服后报404

原创 css让背景色和背景图同时使用出现

css让背景色和背景图同时使用出现background: url(../../../static/img/intro/gsjj_wave.png) rgba(244,251,255,1) 100% bottom no-repeat;效果图：

原创 var、let、const的区别

总结：1、var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；2、var 存在变量提升现象，而 let 和 const 没有此类现象；3、var 变量可以重复声明，而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改。var 如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域， 如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。 var a = 1; //此处声明的变量a为全局变量

原创 微信小程序 选项卡 swiper默认高度150px（让高度实现自适应）解决方法

微信小程序并没有tab选项卡，但是有一个swiper，所以用swiper写了一个选项卡，写完之后存在一个问题，swiper的默认高度为150px，不能通过给他auto或者百分百自适应，所以经过查阅，用js实现了想要的效果。wxml<view class = "tab"> <view bindtap = "titleClick" class="{{0 == currentIndex ? 'active' : ''}}" data-idx='0'>全部</view&g

转载 小程序 弹窗组件

本文主要分成了两个部分，第一部分为微信小程序弹窗组件的具体步骤，第二部分为小程序的多种弹窗类型。第一部分 微信小程序弹窗组件的具体步骤1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图2.组件布局和样式...

原创 list列表无缝滚动

第一种 无停顿的滚动html<div id="box" class = "marquee_box"> <ul id="ul1" class = "marquee_list"> <li v-for="(item, index) in marqueeList" :key="index"> <p class = ...

原创 vue报错：Invalid prop: type check failed for prop "total". Expected Number with value 0, got String wit

vue报错：Invalid prop: type check failed for prop “total”. Expected Number with value 0, got String wit翻译：vue报错:无效的道具:类型检查失败的道具“总”。值为0的期望值，得到字符串期望得到的是Number类型，结果给了它个字符串，检查一下数据设置，修改一下就可以了如图所示，total应该...

原创 vue项目鼠标移入，图片切换 图片路径切换

vue项目鼠标移入，图片切换 图片路径切换UI想要鼠标移入，图片切换的效果。html<div> <img class = "prev pointer" :src="prevImg" alt="" @click='change("prev")' @mouseenter="changeImageSrc(1, 'hover')" ...

转载 vue项目中el-carousel默认高度300问题

vue项目中el-carousel默认高度300问题项目需要适配PC端的各种宽度以及移动端缩放看起来不乱，但是banner图设置固定高度之后，宽度变小之后图片会变形，不能自适应。.banner, .banner .block, .banner >>> .el-carousel .el-carousel--horizontal, .block >>> .el-...

原创 vue项目PC端项目适配移动端，页面不自动缩放

PC端项目适配移动端，页面不自动缩放使用了响应式和媒体查询，可是页面看起来还是不适配，整体很大，没有缩放，解决方法：找到index.html，删掉后半部分，解决。 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">...

原创 vue页面跳转，不保留滚动位置，回到顶部

vue页面跳转，不保留滚动位置，回到顶部解决vue项目页面跳转后，不保留上一页的位置，下一页直接到顶部。直接在router文件夹下的index.js里加入：scrollBehavior (to, from, savedPosition) {  return { x: 0, y: 0}}const vueRouter = new Router({ mode: 'histor...

原创 vue项目抽离头部导航栏以及底部

vue项目抽离头部导航栏以及底部如果不抽离出来，而是在每个页面里都写一遍的话，那你如果要改个跳转地址，或者名字，极其费劲儿。首先，在src/components下新建一个layout文件夹，新建head.vue，把头部导航html、css及js剪切过来就可以。然后，在App.vue中：引入Headimport Head from './components/layout/head'...

原创 vue项目上传服务器后，背景图片路径找不到

vue项目上传服务器后，背景图片路径找不到项目打包上传后，html的图片路径可以找到，但是style里的图片路径找不到，经过查阅，解决。在build文件夹下的utils.js中配置：publicPath:’…/…/’ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, ...

原创 vue history模式打包后Uncaught SyntaxError: Unexpected token <

vue history模式打包上传后报错Uncaught SyntaxError: Unexpected token <vue项目history模式下去掉url中的“#”，本地没有问题，打包上传后，发现在url中拼接id的页面刷新页面白屏，并报错Uncaught SyntaxError: Unexpected token <。关掉history模式后，不再报错，但是问题还是没有解决。...

原创 鼠标移入图片，效果缓慢出现，鼠标移出，效果缓慢消失

@TOC鼠标移入图片，效果缓慢出现，鼠标移出，效果缓慢消失鼠标移入图片，效果缓慢出现，鼠标移出，效果缓慢消失UI或者产品一般会想要网页更加生动，活起来，这时候鼠标移入，图片慢慢放大，移出，图片慢慢还原的效果就十分简单实用。当鼠标移入 .el-col 时，下面的图片就会X,Y放大1.03倍，但是鼠标移出你就会发现，效果嗖~的一下就没了，看起来非常生硬。.solution .el-row &g...

原创 闭包 什么是闭包 闭包的好处 闭包的应用

1、什么是闭包首先先来了解一下，什么是闭包。如果用一句话来形容闭包，就是能够读取其他函数内部变量的函数就是闭包。那么，闭包有什么特点呢？闭包有以下三个特点：1、函数嵌套函数2、内部函数可以引用外部函数的参数和变量3、参数和变量不会被垃圾回收机制所收回举一个最简单的我们经常在用的例子window.onload = function(){ var oDiv = document.get...

原创 通过JQuery实现购物车的效果

今天，主要来说一下如何通过JQuery来实现一个简易版的购物车效果。首先，通过ajax来进行请求。// 1、通过ajax来进行请求$.ajax({ url: "data.json", success: function(arr){ // JQuery在下载数据的时候，根据下载的数据，自动进行数据类型转换 // 加入购物车设置id，id和当前按钮所在的【商品的id】相同。 ...

原创 面向对象的特点——继承、封装和多态

面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物。对象指的是类的集合。类是指具有一类相同特征事物的抽象概念。对象是指具体某一个实例，唯一某一个个体。在JavaScript中之前是没有类这个概念的，但是ECMA6中将类的概念加回来了。今天，我们一起来了解一下面向对象的继承、封装、多态。首先先看一下封装。封装封装就是把客观的事物封装成抽象的类，并且类可以把自己的数...

原创 cookie可选项

cookie概念储存在用户本地终端上的数据，用来存储用户的数据。在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）cookie一般情况下需要在服务器环境下加载。火狐支持本地加载。cookie的组成cookie 由名/值对形式的文本组成：name=value。完整格式为：name=value;[expire...

原创 JavaScript逻辑训练题（二）

1、一个新入职，月工资为2000元的员工，每年涨上一年年工资5%，到20年时的月工资是多少？var money = 2000;for(var i = 0; i &lt; 20; i++){ money *= 1.05;}alert(money);2、山上有一口缸可以装50升水，现在有15升水。老和尚叫小和尚下山挑水，每次可以挑5升。问：小和尚要挑几次水才可以把水缸挑满？var wa...

原创 JavaScript逻辑训练题（一）

1、计算1-100的和var i = 1;var sum = 0; //用于记录累加的和while(i &amp;amp;lt;= 100){ sum += i; i++;}alert(sum);2、求出1-1/2+1/3-1/4……1/100的和var i = 1;var sum = 0; while(i &amp;amp;lt;= 100){ //判断分母是否是奇数 if(i % 2 == 0...

原创 进制转换（十进制转二进制 二进制转十进制）

进制转换进制转换十进制转二进制 及 二进制转十进制二进制转八进制 及 八进制转十进制二进制转十六进制 及 十六进制转十进制进制转换进制转换是人们利用符号来计数的方法。今天主要说一下十进制、二进制、八进制、十六进制之间的相互转换。十进制转二进制 及 二进制转十进制十进制转二进制采用“模二取余”法。52除以2，为26，无余数，记0。26除以2，为13，无余数，记0。13除以2，6余1，记1...