ZPD_zpd的博客

Vue+Element UI 侧边导航与标签页同步

ZPD_zpd — Fri, 23 Apr 2021 13:57:28 +0800

在之前的文章中完成了侧边导航 1、现在完成了侧边导航、标签页和内容的联动， 2、重复点击侧边导航时，标签页不会重复出现， 3、路由状态的保持（切换路由后内容不变化）， 4、标签页删除显示右侧标签页（右侧没有则显示左侧）我看了其他人写的，但是我自己实现的时候始终没有实现，我的是导航栏和标签页可以联动，但标签页和内容不能联动。后来我就干脆不用他们的方法了，跳转路由直接用 this.$router.push() 进行跳转。原理：侧边导航和标签页的联动：点击侧边导航时将点击的数据存放到 store 中.

微信小程序修改placeholder颜色

ZPD_zpd — Wed, 14 Apr 2021 10:58:20 +0800

先写个文本框，默认显示 “请输入姓名” 然后添加属性 placeholder-class 自定义一个名称这里使用 placeholderStyle 这是默认样式之后在 WXSS 页面修改样式 input{ border: 1rpx solid black; } .placeholderStyle{ color: r

微信小程序 CSS 解决子元素图片在父元素div宽高小的时候超出div范围

ZPD_zpd — Tue, 13 Apr 2021 11:56:35 +0800

今天写小程序的时候发现了这么个问题，在div内添加了图片，给div一个边框，然后我就发现我的图片不在div的范围内了，而是向下偏移了一点 html：

css： .container .content .person .per .tel { width: 30rpx; height: 30rpx; border:

Vue和Element UI 路由跳转，侧边导航的路由跳转

ZPD_zpd — Wed, 07 Apr 2021 16:42:43 +0800

首先看布局，因为我的用于页面显示的是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。

element UI 中表单输入框的样式修改，深度选择器

ZPD_zpd — Fri, 02 Apr 2021 11:06:58 +0800

输入框代码：修改前：修改后查看修改前的CSS样式：如果我们直接在CSS中修改输入框的样式，会发现修改后的样式并没有被应用上为了解决这个问题我也找了很多文章，发现可以用 /deep/ 深度选择器 ,也就是在选择器前面加上 /deep/ /* 使用 scoped 后，父组件的样式将不会

CSS+div布局，上中下三行div，上下固定高度，中间铺满

ZPD_zpd — Thu, 01 Apr 2021 23:27:38 +0800

方法一：使用定位，父元素相对定位 position:relative; ，子元素绝对定位 position:absolute; 上下div固定高度，中间div的 top 和 bottom 偏移量为上下div的高度

&l.

Element UI设置侧边栏高度占满全屏，Y轴滚动条隐藏，不影响滚动

ZPD_zpd — Thu, 01 Apr 2021 10:36:46 +0800

先看效果：实现了高度占满全屏，隐藏滚动条，但可以滚动这里采用的是Element UI的Container布局，使用文档中给出的举例解决了aside和main的独立滚动条效果。布局：在布局上采用的就是文档给举例的布局，然后在 el-aside 外套了一个 div .aside ,用于设置隐藏滚动条。

vue脚手架

ZPD_zpd — Mon, 22 Mar 2021 08:45:22 +0800

安装脚手架：在命令行输入： npm install -g @vue/cli 卸载脚手架：在命令行输入： npm uninstall -g vue-cli 查看是否安装上及版本：在命令行输入： vue --version /*************************************************************************************************/ 创建项目：打开项目文件夹，在地址栏输入 cmd 回车确认之后弹出这

JSMath常用对象属性、对象方法

ZPD_zpd — Wed, 24 Feb 2021 16:48:55 +0800

PI 属性 PI 属性就是 π，即圆的周长和它的直径之比。这个值近似为 3.141592653589793。 document.write("PI: " + Math.PI); 对象方法 abs() 方法 abs() 方法可返回数的绝对值。参数： x：必需。必须是一个数值。 document.write(Math.abs(7.25) + "
"); document.write(Math.abs(-7.25) + "
"); document.wri

JS Date对象及对象方法

ZPD_zpd — Tue, 23 Feb 2021 16:54:43 +0800

Date() getDate() getDay() getMonth() getFullYear() getHours() getMinutes() getSeconds() getTime() toLocaleString()

HTML5 拖放、拖放到div追加、拖放到div删除

ZPD_zpd — Sun, 21 Feb 2021 15:31:12 +0800

设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：源对象即需要拖动的对象，有三个事件： ondragstart ondrag ondragend box1.ondragstart = function (event) { console.log("开始拖动"); } ...

交叉合并数组

ZPD_zpd — Thu, 18 Feb 2021 17:11:40 +0800

编写一个将两个字符串交叉合并的函数merge(s1,s2)。例如merge(“123”,“abc”)的返回结果是"1a2b3c"，如果二个字符串的长度不同，那么就将多余的部分直接合并到结果字符串的末尾，如merge(“123456”,“abc”)的返回结果是"1a2b3c456" function merge2(s1, s2) { // 获取字符串长度 var len1 = s1.length; var len2 = s2.length; // 定义空字符串存放新字符 var str = "

验证码

ZPD_zpd — Sun, 07 Feb 2021 16:58:13 +0800

点击按钮获取验证码，文本框失去焦点判断验证码是否输入正确。 html：

css: #text { width: 200px; height: 25px; float: left; } #VerCode { widt.

JS——压缩连续重复字符串

ZPD_zpd — Sun, 07 Feb 2021 15:22:08 +0800

通过键盘输入一串小写字母(a~z)组成的字符串。请编写一个字符串压缩程序，将字符串中连续出席的重复字母进行压缩，并输出压缩后的字符串。压缩规则： 1、仅压缩连续重复出现的字符。比如字符串"abcbc"由于无连续重复字符，压缩后的字符串还是"abcbc"。 2、压缩字段的格式为"字符重复的次数+字符"。例如：字符串"xxxyyyyyyz"压缩后就成为"3x6yz"。 var str = "xxxyyyzzcc"; var a1 = []; //定义空数组存放字符 var a2 = []; //定义空数组存放

CSS——固比固布局、圣杯布局、双飞翼布局

ZPD_zpd — Thu, 04 Feb 2021 11:44:55 +0800

固比固布局、圣杯布局、双飞翼布局。这三种布局都是为了做到页面左右两侧固定，中间部分随窗口大小改变而改变。固比固布局：使用弹性盒子的方式 html:

css: #box{ width: 100%; /* 弹

JS高级——call() 和 apply()

ZPD_zpd — Wed, 03 Feb 2021 16:48:30 +0800

一、方法定义：每个函数都包含两个非继承而来的方法：call()方法和apply()方法。两个方法的作用是一样的：都可以改变this的指向（在特定的作用域中调用函数）一般this总是指向调用某个方法的对象，但在使用call()、apply()后会改变this的指向。 call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2…); 即A对象调用B对象的方法。 apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, [

JS高级——原型、构造函数的继承

ZPD_zpd — Wed, 03 Feb 2021 11:46:30 +0800

定义父类的Person的构造函数 function Person(name) { this.name = name; } 定义父类Person的原型 Person.prototype.sayName = function () { console.log("名字：" + this.name); } 继承原型：定义子类构造函数Student function Student(name, age) { this.name = name; this.age = age; }

JS高级——判断对象是否有某属性in，判断对象是否有自己的某属性hasOwnPorperty

ZPD_zpd — Wed, 03 Feb 2021 10:20:22 +0800

为了验证，在构造函数中添加属性，在原型中添加属性，给实例化对象添加属性 // 创建构造函数 function Person() { // 添加属性到构造函数中 this.job = "班长"; } // 添加属性到原型中 Person.prototype.name = "张三"; // 实例化对象p1 var p1 = new Person(); // 添加属性到实例化对象中 p1.school = "实验小学"; 判断实例化对象p1是否含有某属性，使用 in 操作符。有，返回tru

jQuery 拖拽div

ZPD_zpd — Mon, 01 Feb 2021 11:42:46 +0800

功能实现： 1、鼠标按下拖拽div 2、div不能超出边框 3、鼠标抬起停止拖拽 HTML实现

css选择器:nth-child和:nth-of-type之间的差异

ZPD_zpd — Thu, 21 Jan 2021 16:44:49 +0800

两个都是伪类选择器，效果近似，但又不同。例1：HTML部分

第一个p标签

第二个p标签