- 博客(29)
- 收藏
- 关注
RSS订阅原创 scorll-header
整个preHeader实现,核心是滚动区域。先看整体分为左右div以及中间的preHeader组件通信：（其中headerList为标题列表数组[ [{},{},{},…] ,title为当前标题 [ ‘’ ]）:headerList=‘headerList’ :title=‘currentModel’ @change=‘shouldSave’以下是圈住的是preHeader表面区段，其中slot是要考虑到父组件没将title传来时不去加载div以下是控制滚动区域出现的核心部分其中,isO.
2021-01-07 19:10:46
180
原创 element-ui页面加载正确，页码错误
期望效果：进入详情前第二页，从详情返回后还在第二页先说我之前的误区：哈哈，之前想的是路由跳转时传参到详情页，详情页跳回时再传回来，绕了一圈，并不是最好的解决方案。解决办法（sessionStorage或localStorage.）：本质上最正确的是：每次点击分页，将当前页存到session中,并且初始化以及页面跳回时，都会经历created阶段，在这个阶段判断session中是否有值，没有默认为1handleChange存取created判断问题原因：element页码组件在creat.
2020-12-31 16:04:05
888
1
原创 querySelector，querySelectorAll与getElementByxxx
querySelector(只能获取到一个，若没有返null)querySelectorAll(获取所有，若没有返[ ])通过querySelectorAll得到的集合是静态的，类似于一个快照，而是用getElementsByClassName得到的是动态的集合，也就是说每一次调用都会去对dom节点进行一次查询。做个例子：var ul = document.getElementById('ul');var lits = ul.getElementsByTagName('li')for(var i
2020-12-28 14:17:52
310
原创 浮动配合相对定位
如图一标记部分正是图二class为col-right部分。先来看css.col-right{position: relative;float: right;top: 20px;right: 10px;}有意思的是先浮动，再让元素根据根据自身定位再看编辑 <img src="../../assets/baisheng/edit.png" alt="" v-if="nItem.preIsEdit === 'Y' && nItem.hhrSysTabl..
2020-12-28 10:21:31
185
原创 vue移动端empinfo详情页面
直接说offer信息开始的主体内容：主体分为区段标题和区段内容可以看到，附件信息和工作经历等区段都是v-for遍历出的，但是附件是区段内容默认展开而其他默认关闭先说区段标题涉及到：1.默认样式除附件外其他内容默认关闭，可以data中来个openFlag:{},初始化数据时将每个title的hhrSysTableName赋予默认值 this.openFlag[hhrSysTableName] = false this.openFlag['hhr_pre_emp_file_info'..
2020-12-25 17:24:56
278
原创 页面布局
1.页面布局首先要有个最外层元素，给出窗口的宽高以及居中保证元素缩小时向中间靠拢这样的话，最外层给出大小，左右两测元素就可以给出百分比进行布局2.要考虑页面上的内容那些要从后台来，那些直接写死，用到前端框架中的什么内容...
2020-12-04 15:21:07
96
原创 React报错误及其解决方案
1.Import in body of module; reorder to top (import/first)解决方案：import开头代码写在最前面
2020-12-01 11:11:48
564
原创 React表单-受控组件与非受控组件
受控组件通过setState，e.target.vaule修改value，非受控组件通过ref操作dom获取value点击提交都能拿到value受控组件import React, { Component } from 'react';class FormDemo extends Component { state = { value:'' } handlerSumbit=(e)=>{ e.preventDefault();
2020-11-29 11:17:53
174
原创 React-组件传值
父传子：父组件引用子组件时传递数据，子组件中通过this.props接收子传父：父组件引用子组件时传递事件，子组件触发事件时通过this.props调用父组件传递的事件，并且可以在调用时传递参数基本结构：app.jsx(父组件)中引入ComponentLive.jsx组件(子组件)，再挂载到index,js中React中实现这样的功能：给出app.jsx中代码import React, { Component } from 'react';import ComponentLive from '
2020-11-28 18:53:36
84
原创 React组件复用传递数据+列表渲染
效果:总思路：在app.jsx组件中使用MyNav.jsx组件，然后将app.jsx组件挂载到index.js中MyNav.jsx: import React, { Component } from 'react'; class MyNav extends Component { render() { console.log(this.props.nav); return ( <div> .
2020-11-28 15:57:12
255
原创 react元素渲染-当前时分秒
react-create-app项目下src/index.js:import React from 'react';import ReactDOM from 'react-dom';function tick(){ const element=( <div> <h1>Hello World</h1> <h2>It is { new Date().toLocaleTimeString() }</h2>
2020-11-28 14:39:42
533
原创 dva-day2路由跳转
路由跳转(components/Product.jsx：使用的都是类组件Product)1.Link跳转(视图中)import {Link} from 'dva/router'render(){ return ( <div><Link to='/'>去首页</Link></div>)}2.事件跳转(history对象中的push方法跳转) 1.withRouter拿到this.props.history对象
2020-11-27 22:52:05
135
原创 dva-day1
1.dva项目创建 1.安装dva-cli:cnpm install dva-cli -g 查看版本 dva -v 2.创建项目:dva new dvaapp 3.进入项目目录并启动 cd dvaapp npm start2.dva目录components:可复用的UI组件models:数据仓库，底层是redux,redux-sagaroutes/pages:页面组件services:所有要访问的后台请求utils:request封装了fet
2020-11-27 21:53:58
151
1
原创 将文本中的‘中国‘变红
这样的需求：p标签中所有‘中国’都变红原生js实现思路：先获取p标签内容，然后正则表达式匹配字符串‘中国’并替换,再将替换后的内容重新赋值给p
2020-11-16 09:57:54
125
原创 vue项目搭建--登录
vue-element-admin：登陆重新配置：原理：1.通过用户名+密码返回token值2.将token设置给状态机中的state将token设置给本地混存cookie3.携带token，请求用户信息 user/info拿到用户信息后才能够进行页面跳转 配置： 1.配置基路径 .env.development：开发环境的基路径 VUE_APP_BASE_API = 'http://47.100.76.121:8
2020-11-07 15:57:08
430
2
原创 前端最有成就感一—-封装
这样的需求：点击不同的标签页显示不同的分页数据同样的标签，不同的内容，我是有几种内容就写几个标签吗？**成就感一：只写一次el-tab-pane，label动态绑定data中的nameList数组的每一项(item)运用知识点:v-bind动态绑定属性，v-for遍历数组的每一项，key给每一个节点做唯一标识点击el-tab-pane显示不同表格内容，我是直接在该标签内写吗？成就感二：通过使用动态组件，完成点击不同标签页时的页面切换。同一文件夹下声明子组件-》父页面导入子组件-》compo.
2020-11-05 23:02:15
1079
原创 vue项目3-通过与拒绝审核
这样的需求：点击拒绝审核状态变为审核不通过，反之为审核通过。首先进行数据处理，显示当前内容特别注意！给每一项添加’examine’属性，让其随着status改变而改变，这也为之后调用接口改变status进而改变examine埋下了伏笔上面表格内的细节是通过作用域插槽scope.row对象获取当前行的所有属性；之后，只需要判断当前行examine调用相关接口，并且刷新表格数据就可以了...
2020-11-01 22:11:28
2767
原创 vue项目-2
这样的需求：点击所需项目，加载出父栏目pid，注意如图二pid可能为null首先要明白，最好是先根据后台接口加载出所有pid再去加载分页按钮请求所有数据，因此有了下面的代码先是声明了两个请求函数，当页面被创建时调用查询栏目的返回值（承诺对象）调用then方法，进行数据处理，包括遍历数组，数组项的pid不为null时，追加给data中声明的空数组a，用 […new Set() ] 方法实现数组去重，再去分页请求栏目，接下来就是在html内容遍历数组拿值:value=‘item’,v-for遍历a.
2020-10-22 00:47:39
106
原创 vue项目日志1-按钮内容切换
如上图有这么一个需求：当状态为 ‘审核通过’ 时，操作内第二个button内容为 ’拒绝审核‘ ;反之为 ‘通过审核’ (!!已知状态内容可从后台获取，button2中内容无法获取)首先先通过axios异步请求到表格中数据，对应请求函数如下tableData是从后台获取到的表格数据，要通过计算属性对其进行数据处理—再添加一个属性’examine’，对应status的变化之后在对element-ui引入的表格进行修改—data v-bind绑定newTableData；添加插槽访问每一行的新增的e...
2020-10-20 22:03:01
311
原创 jquery项目遇到的问题
需求：该页面点击添加按钮以及表格中每一个的修改按钮弹出同一模态框，并且点击修改模态框获取当前行内容插入到模态框添加模态框如下修改模态框如下修改按钮事件绑定首先需要获取当前行id，然后调用请求函数拿到后台数据，将当前id与后台数据的每一项id进行比较，相同时给每一个input框写入内容添加按钮事件绑定！！！有意思的是‘保存’按钮，只绑定一次事件，但需要选择修改时的事件处理还是添加时的事件处理（根据id是否为undefined判断）！由后台得知,修改和新增都是请求的 ‘baseUser/saveO
2020-10-13 22:23:27
280
原创 axios
axios异步请求实现点击按钮获取请求成功后的结果html代码：<body><div id='app'> {{response}} <button @click='findAllCustomers'>查询所有顾客信息</button> <button @click='findAllCustomersById'>通过id查询顾客信息</button> <button @click='login'
2020-10-08 14:44:09
99
原创 iconfont的引入
1.打开iconfont图标库，找到想使用的图标并添加到项目（建议将一个项目使用的图标放一个项目中）2.点击生成代码，复制代码链接浏览器打开，全选并复制，在vscode中新建一个icon.css文件，将复制的代码粘贴过来3.使用 1.导入使用link标签<link rel=“stylesheet” href=“icon.css”》2.在body中插入i标签或span标签，class为’iconfont icon-xxx’(到图标库把想引入的图标复制代码，为icon-xxx)3.可以通过 .
2020-09-15 15:01:34
476
原创 原型链
var F=function(){} Object.prototype.a=function(){ console.log('a()'); } Function.prototype.b=function(){ console.log('b()'); // console.log('c()') } var f=new F() f.a(); f.b(); F.a(); F.b();以上为一
2020-09-14 20:21:16
55
原创 html,css补充
1.html字符实体&: nbsp;quot(一个引号);lt(<);gt(>)…2.html特点：从上到下依次解析；容错性高；标记语言，不具有逻辑行为能力3.css盒子：内容盒子(w3c标准盒子)和边框盒子(ie盒子),盒子区包括content,padding,border,margin,盒子的相互转换是用box-sizing设置的，当设置为content-box时即为内容盒子,此时width=content;当设置为border-box时，即为边框盒子，此时width=conte
2020-09-14 20:05:03
66
原创 HTML面试题2
html部分1.前端三要素：html css js2.谈谈你对B/S架构的认识？B是browser指浏览器，S是server指服务器.B/S架构就是浏览器/服务器模式3.html网页的结构doctype 声明部分html Html的根元素，用来包含html文档的所有元素head 不会显示到浏览器视口中title 显示在浏览器选项卡的标题meta 用于设置元信息，配置charset=utf-8 编码编辑器 UTF-8解码浏览器
2020-08-17 22:23:19
358
1
原创 锚点
点击顶部，回到最上方，需要用到锚点首先给出最简单锚点应用举例，代码如下效果如下点击前点击蓝色区域后由此锚点用法核心，首先在body标签首行插入一个id为mao的div< div id=‘mao’>< div >中间为其他占据高度的内容之后给出一个href为#mao的a标签，并嵌套点击部分（如上例div蓝色区域）< a href="#mao"> < div class="a"> < /div >< /a >
2020-08-17 22:16:08
194
原创 浮动与绝对定位
以上是浮动与绝对定位测试。可以看出，div1浮动，div2中文本依然会为浮动元素让出位置，而绝对定位时div2不会让出位置且会被绝对定位元素遮挡内容
2020-08-06 20:11:35
121
原创 ## HTML面试题
HTML面试题DOCTYPE 的作用是什么？DOCTYPE是document type(文档类型)的简写,声明位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档（哪种HTML或XHTML）标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现标准模式与兼容模式各有什么区别？标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东
2020-07-29 22:53:50
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人