随笔分类 - 前端
HTML、css、JavaScript、vue、jQuery
摘要：/** * @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch * @constructor * @param {object} opts - 构造参数. @default {data:{},watch:{}}; * @argument {object} data
阅读全文
摘要：一、概述 主要是用Object.defineProperty实现类似vue2的数据绑定。 二、示例 const data = { name: "lihua", age: 18 } Object.defineProperty(data, "name", { get(){ return "name被读取
阅读全文
摘要：一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大
阅读全文
摘要：一、问题描述 开发的时候免不了有时候需要向某个节点appendchild，添加子节点， 但是如果是在vue中，就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。 二、解决思路 通过查看原始的节点与新增的节点发现，原始节点与新增节点的class都一样，但是原始的
阅读全文
摘要：一、问题描述 项目中在dom结构里遇到了shadow-DOM(open)，如下 是一个表格组件，主要感觉滚动条有点low，需要自定义 但发现自己写的样式渗透不进去╮(╯▽╰)╭ Shadow DOM Shadow DOM 这款工具旨在构建基于组件的应用。因此，可为网络开发中的常见问题提供解决方案：
阅读全文
摘要：::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-
阅读全文
摘要：<el-tree :data="layersName" :props="defaultProps" node-key="id" :default-checked-keys="checked" show-checkbox @check-change="handleCheckChange" dragga
阅读全文
摘要：问题 el-button点击了按钮之后，将鼠标移出按钮，会出现保留点击的状态 再查看它的css样式后，可以看到官方默认设置有:focus的状态规则 解决办法 在el-button的css里自定义或者复制原有的color、border-color、background-color三条样式， 然后再重写
阅读全文
摘要：HTML <!-- 打印的内容会生成两页纸 --> <div id="report"> <h1>..</h1> < 重点 <div>..</div> </div> JS function printpage() { // 打印的整体思路是：获取body的内容进行存储，然后获取打印区域的内容填充到bo
阅读全文
摘要：var arr =[0,2,4,6,8] var index = Math.floor((Math.random()*arr.length)); console.log(arr[index])
阅读全文
摘要：<el-tree :data="treeData" node-key="id" draggable :allow-drop="allowDrop" @node-drop="handleDrop" > </el-tree> 主要是用到了allow-drop这个方法，然后去判断元素被放置的位置是否和当前
阅读全文
摘要：js脚本 export function dragBox(drag, wrap) { // 用于获取父容器的样式属性值 function getCss(ele, prop) { // getComputedStyle返回值是带单位的字符串，所以得parseInt return parseInt(wi
阅读全文
摘要：修改样式 ::v-deep .el-menu { border-bottom: 0 ; } 改成下面所示 ::v-deep(.el-menu) { border-bottom: 0 ; } ::v-deep用法
阅读全文
摘要：按需引入 官方文档介绍 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先 安装 babel-plugin-component： npm install babel-plugin-component -D 然后 将 babel.config
阅读全文
摘要：Win+R输入cmd打开命令终端 输入指令netstat -ano即可
阅读全文
摘要：vue页面访问正常，但是一刷新就会404的问题? 为什么会出现404? 我们打开dist文件夹，可以看到只有一个 index.html 文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转; 接着我们再来分析一下后端 n
阅读全文
摘要：Ajax基本使用 1.Ajax的基本使用 1、核心对象 XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。 2、发送ajax请求（4个步骤）： 创建xhr对象，初始化open方法，设置请求方式和请求路径，接着send方法发送请求，从而接收服务端响应回来的数据（通过绑定事件onr
阅读全文
摘要：HTTP报文 用于HTTP协议交互的信息被称为HTTP报文。客户端的HTTP报文叫请求报文，服务端的HTTP报文叫响应报文。 请求报文 是由请求行（请求方法、协议版本）、请求首部（请求URI、客户端信息等）和内容实体（用户信息和资源信息等，可为空）构成。 响应报文 是由状态行（协议版本、状态码）、响
阅读全文
摘要：运行 npm run build命令打包之后发现多了很多.map文件，占体积最大 搜索之后发现 map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 解决办法：去conf
阅读全文
摘要：在win10 下安装yarn后，在终端中运行yarn命令的时候会出现： 解决方法 1：搜索powershell，以管理员方式运行powershell 2：使用命令更改计算机的执行策略 执行： set-ExecutionPolicy RemoteSigned
阅读全文
