- 博客(31)
- 收藏
- 关注
RSS订阅原创 el-select中自定义搜索方法后，模糊搜索时，已经在搜索框中输入了“上”，但是搜索框在输入内容后自动清空
el-select中自定义搜索方法后，模糊搜索时，已经在搜索框中输入了“上”，但是搜索框在输入内容后自动清空。由于定义的下拉内容不是正常的key，value值，将:key的值定义为自己定义的index，修改:key="item.securityCode"即正常。
2023-03-24 15:10:11
1826
1
原创 el-table中:data = “tabledata“，和watch监听的从父级传过来的prop中的变量名为data的参数之前存在影响，改变tabledata，会直接影响data，触发watch
el-table中:data = "tabledata"，和watch监听的从父级传过来的prop中的变量名为data的参数之前存在影响，改变tabledata，会直接影响data，触发watch
2022-11-01 14:20:39
971
原创 el-cascader实现第三级菜单多选，一二级菜单单选，并且父节点禁用
el-cascader实现三级菜单多选，一二级 菜单单选，父节点禁用另：返回值仅为子节点的值，要求指定部分选项单选其他为多选，例如：同一三级菜单下存在某一菜单只能单选，其他为多选设置emitPath: false， 只返回该节点的值
2022-08-25 15:48:36
4885
1
原创 vue3+typeScript+vite项目开发的一些基本配置
对于兼容多个后端服务器的代理设置vite.config.ts在serve中设置proxyproxy: { '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, '^/fallback/.*':
2021-12-28 18:14:00
998
原创 带表格的邮件，预览与发送
cellpadding="0"意思是table表格的单元格子的内容与单元格子四边边界之间空白距离为0像素。在html语言中，cellspacing="0"意思是table表格中的单元格子之间的空白距离为0像素。在个别邮箱中，会出现表格下框线消失的情况，可在表格最后添加，一行tr，但是只设置0.1px的高度设置表格为可编辑状态，为td增加属性 ： contentEditable=“true”利用v-for循环遍历数组，实现根据内容动态增加表格行数利用HTML格式直接返回后端的内容，可以实现兼.
2021-09-06 18:08:32
257
原创 进度条实现（非文件上传、下载）
使用场景：接口请求时间较长，加进度条表示等待代码示例：html部分：<el-dialog title = '正在发布' :visible.sync = 'progressDialogVisible' width = '30%' :before-close = 'handleClose' center> <el-progress :stroke-width="8" :percentage="progress"></el-progress></.
2021-08-31 17:56:06
110
原创 vue实例与容器之间的关系
vue实例与容器之间是一一对应的关系，每个实例只能被一个容器接管模板语法插值语法：功能：用于解析标签体内容（一对标签中间夹杂的内容）写法：{{ xxx }} , xxx 是 js 表达式，且可以直接读取到 data 中 的所有操作指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）举例：v-bind:herf=“xxx” 或 简写为 :herf=“xxx”, xxx同样要写 js 表达式且可以直接读取到data中的所有属性备注：vue中有很多的指令，且形式都是：
2021-07-31 21:56:35
586
原创 http请求 tcp三次握手四次挥手，状态码
tcp三次招收建立连接，客户机向服务器发送请求，等待服务器确认服务器收到报文，进行确认，将确认信息一并发送给客户端客户端收到确认消息，发送建立连接到客户端为什么要三次握手为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。具体例子：“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求
2021-07-27 10:51:07
192
原创 列表中某一行数据的获取
element - ui 中使用 scope ,在点击事件后加参数scope.row，vue 点击某一行的按钮，获取当前行的数据如果template里定义了其他的内容，只要传相应的参数到点击事件后就可以了，这里要注意点击事件的js代码中，也要传相应的参数过去如下图所示：html部分js部分原生的table标签datas是一个数组item是每行的信息index是行数：key是为了保证渲染的时候不会出现污染情况注意：可以为点击事件传参数，打印出来的参数就是指定行的数据..
2021-07-26 17:59:10
1374
原创 关于盒模型的几个相关知识点的总结，以及三列布局的几种方法
盒模型盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容三栏布局（左右固定，中间自适应）BFC<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
2021-03-18 22:41:38
677
原创 rem+bootstrap
rem 单位媒体查询一般媒体查询从小到大会有优势，利用代码的层叠性，代码更简洁语法规范mediatype查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化引入资源less基础维护css的弊端less是一门css预处理语言，它扩展了css的动态特性less变量less编译通过easy LESS插件将less编译为css文件less嵌套...
2021-03-05 10:21:09
665
1
原创 flex布局
flex布局体验传统布局与flex布局建议：如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
2021-03-04 16:10:13
103
原创 移动端、流式布局、京东移动端首页案例
视口**视口（viewport）**就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口布局视口 layout viewport一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题iOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上显现，只不过元素看上去很小，一般默认可以通过手动缩放网页视觉视口 visual viewport字面意思，它是用户正在看到的网站的区域。注意：是网站的区域我
2020-12-26 09:44:52
845
原创 2D转换+CSS3动画（包含部分例子）
2D转换**转换（transform）**是CSS3中具有颠覆性的特征之一，可以实现元素的位移（translate）、旋转（rotate）、缩放（scale）等效果二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系，x轴水平向右，y轴垂直向下延伸2D转换之移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位语法重点定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点：不会影响到其他元素的位置
2020-12-22 23:19:52
201
原创 品优购项目
品优购项目规划网站制作流程项目整体介绍项目名称：品优购项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作品优购项目的学习目的电商类网站比较综合，里面需要大量的布局技术，包括布局方式，常见效果以及周边技术。品优购项目能复习、总结、提高基础班所学布局技术写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知为后期学习移动端项目做铺垫开发工具以及技术线开发工具Hbuilder、Photoshop（fw）、主流浏览器（以Chrome浏览器
2020-12-16 23:29:05
953
原创 HTML5和CSS3
HTML5的新特性HTML5的新特性主要是针对以前的不足，增加了一些新的标签、新的表单、新的表单属性等这些新特性都有兼容性问题，基本都是IE9+以上版本的浏览器才支持，如果不考虑兼容性的问题，可以大量使用这些特性HTML5新增的语义化标签以前布局我们基本用div来做，div对于搜索引擎来说，是没有语义的，比如：新增了一些语义化的标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要把这些元素转换为行内块元素其实，我们移动端更喜欢使用这些标签HTM
2020-12-02 22:41:22
141
原创 CSS高级技巧
精灵图为什么需要精灵图？为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了精灵图（sprites）的使用使用精灵图是核心：例如用精灵图拼名字：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title&g
2020-12-01 22:19:03
167
原创 定位、淘宝焦点图、显示遮罩
定位浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置定位模式定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：静态定位：元素的默认定位方式，无定位的意思语
2020-11-14 22:09:24
463
原创 学成在线案例
学成在线确定版心.w {width:1200pxmargin:auto;}头部制作导航栏注意点：实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法li+a 语义更清晰，一看这就是有条理的列表型内容如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名注意：banner模块制作精品推荐小模块精品推荐大模块底部模块HTML代码如下<!DOCTYPE html><h
2020-11-11 21:37:00
351
原创 CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：普通流（标准流）浮动定位标准流所谓标准流：就是标签按照规定好默认方式排列块级元素会独占一行，从上到下顺序排列常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行常用元素：span、a、i、em等以上都是标准流布局，我们前面学习的就是标准流，
2020-11-10 20:28:35
333
原创 盒子模型一些小案例
快报模块注意：新知识点：去掉li前面的项目符号（小圆点）语法：/*页面中所有的li*/ li { /*去掉li前面的项目符号（小圆点）*/ list-style: none; }新闻快报<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>新闻快报</title> <style> /*注意：首先要清除整
2020-11-06 19:11:09
1619
原创 CSS3（盒子模型、ps基本操作）
CSS的三大特性css有三个非常重要的特性：层叠性、继承性、优先级层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式例如：<style> div { color:red; } div { color:pink; }</style>结构中的div中的文字就会呈现粉色，红色被覆盖- 样
2020-11-06 11:48:19
327
1
原创 CSS2（五彩导航）（背景相关）
CSS背景背景颜色backround-color：颜色值；背景图片background-image：描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）背景平铺默认的情况下，背景是平铺的背景图片不平铺：background-repeat：no-repeat；图像按照x/y轴平铺background-repeat：repeat-x/y；页面元素既可以添加背景颜色也可以添加背景图片，只不过
2020-10-28 21:13:12
1312
原创 CSS2（小米商城列表）
Emmet语法快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后按tab键，就可以生成<div></div>如果想要生成多个相同的标签 加上 * 就可以 比如 div*3 就可以生成3个div如果有父子级关系的标签 可以用 > 比如 ul > li 就可以了如果有兄弟关系的标签，用 + 就可以 比如 div + p如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以如果生成的div类名是有
2020-10-27 23:25:21
254
原创 CSS1（新闻案例）
CSS语法规范由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。CSS 主要美化网页、布局页面CSS规则由两个主要的部分构成，选择器以及一条或多条声明选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式展开格式，一行一个属性属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等属性和属性值之间用英文“：”分开多个“键值对”之间用英文“；”进行区分<!DOCTYPE html>&
2020-10-21 11:13:44
486
原创 综合案例（注册页面）
列表：用于布局无序列表：多个并列的，简单的无序的内容有序列表：有顺序的，其他与无序一致自定义标题标签：有一个小标题，里面还有多个并列内容dl：定义列表，与dt，dd一起用，只能包含dt，...
2020-10-10 17:42:51
367
原创 小说排行榜案例（表格标签）
表格标签表格是用来显示，展示数据的（也可以说是布局页面的）<table>定义表格<tr>定义行<th>这是表头标签<tb>定义表格内的数据</tb></th></tr></table>表头单元格：表格第一行或者第一列，突出重要，文本内容加粗居中显示表头单元格标签表格相关属性注意：这里的属性要写到table标签里边去，不常用，通常通过设置css样式来实现align 表格相对周围元素的对齐方式（le
2020-09-29 21:39:31
1784
原创 圣诞节的那些事（链接标签+路径）
文本格式化标签加粗：<strong></strong> or <b></b>倾斜：<em></em> or <i></i>删除线：<del></del> or <s></s>下划线：<ins></ins> or <u></u>注意：以上内容均推荐使用第一种，语义更强烈，表示强调div 和 span 标签
2020-09-28 23:40:51
5123
原创 体育新闻（初识标签练习）
文章目录标签的结构标题标签段落与换行标签简单的案例：体育新闻效果截图标签的结构两种结构：包含结构，例如：<head><title>体育新闻</title></head>中两个标签的关系同级结构，例如：<head></head><body></body>标题标签标题一共六级选文字加粗一行显由大到小一次减从重到轻随之变语法规范书写后具体效果刷新见注意：标题标签的内容比较重要，只显示在一行，
2020-09-27 11:07:15
653
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人