wang_xuan_1992的博客

原创 vue3 引入element-plus

1.首先安装element-plus。2.main.js配置。

原创 Vue3 ＜script setup＞ 单文件组件 组合式 API 相关语法

2.vue3 用router 和 route。3.vue3 使用 ref。1.vue3使用vuex。

原创 CSS3鼠标穿透

CSS3鼠标穿透

原创 伪元素（对象）选择器的权重

伪元素（对象）选择器的权重

原创 网页优化 浏览器兼容

网页优化 浏览器兼容

原创 网页优化（布局优化、图片优化）

网页优化（布局优化、图片优化）

原创 css定位 position

css 定位 position

原创 新建vue项目首行报错Parsing error: No Babel config file detected

vue文件首行报错 Parsing error: No Babel config file detected 解决办法

原创 创建vue项目的几种方式

注意：创建完成后，直接打包，访问是不能正确访问的，要在vue.config.js里配置一下publicPath。

原创 ES6_1字符串和正则表达式_codePointAt() String.fromCodePoint()

这个方法完全支持UTF-16,接受编码单元的位置而非字符位置作为参数，返回与字符串中给定位置对应的码位，即一个整数值。

原创 ES6_1.块级作用域绑定_临时死区TDZ

JavaScript引擎在扫描代码发现变量声明时，要么将它们提升至作用域顶部（var声明），要么将声明放到TDZ中（let、const）。访问TDZ中的变量会触发运行时错误。只有执行过变量声明语句后，变量才会从TDZ中移除，然后正常访问。即便是相对不易出错的typeof操作符也是无法阻挡引擎抛出错误。但在声明的作用域外对该变量使用typeof则不会报错，typeof在声明的块作用域外执行，此时value并不在TDZ中。也就意味着不存在value这个绑定，最终返回undefined。

原创 ES6_1.块级作用域绑定_块级声明

块级声明用于声明在指定块级作用域之外无法访问的变量。

原创 ES6_1.块级作用域绑定_var 声明及变量提升机制

如果你不熟悉JavaScript，可能会认为只有当condition的值为true时，value才会被创建。事实上，无论如何value都会被创建。通过关键字var声明的变量，无论实际上在哪声明的，都会被当成当前作用域顶部声明的变量，这就是常说的变量提示（hoisting）机制.需要注意的是声明被提升到顶部，但初始化操作依旧停留在原处。var 声明及变量提升机制。

原创 注册监听事件

//注册监听事件$(window).off(“message”).on(“message”, function (e) {var origin = e.originalEvent;var data = {};if (origin.data) {data = JSON.parse(origin.data);st_id = data.ID;st_name = data.NAME;getImage();var iframe = document.getElementById(“tabList”)

原创 js判断元素含有指定class

1.$(‘元素’).hasClass(‘类名’)；返回true和falseif($('#id').hasClass('myClass')){}//判读两个classif($('#id').hasClass('myClass1 myclass2')){}2.$(‘元素’).is(‘类名’)；用法和hasClass()一致

原创 jQuery选择器大全

原创 jQuery_ajax()详解

语法$.ajax([settings])settings参数$.ajax({ type: "post", //请求的类型，get,post url:"", //请求地址 async: false,//表示是否异步处理，默认true beforeSend:function(XMLHttpRequest){//发送请求前运行的函数 }, timeout:'',//设置本地的请求超时时间 cache:true,//表示浏览器是否缓存被请求的页面，默认true contentType.

原创 根据浏览器高度设置div高度

根据浏览器高度设置div高度//javascript代码// 修改尺寸 autodivheight(); function autodivheight() { //函数：获取尺寸 //获取浏览器窗口高度 var winHeight = 0; if (window.innerHeight) winHeight = w

原创 实用前端标注图片剪裁工具-AILabel.js

AILabel类库是一款集打点、线段、多段线、矩形、多边形、圆圈、涂抹等多标注形式于一体，附加文本（Text）、标记（Marker）、缩略图（EagleMap）、Scale（比例尺）等控件以及Util等辅助工具的在线Web端标注工具库。目前已被广泛应用于多标注项目中文档目录源代码：https://github.com/dingyang9642/AILabelAPI文档：http://ailabel.com.cn/public/ailabel/api/index.htmlDemo文档：http://a

原创 json格式化显示

//格式化jsonJSON.stringify(JSON.parse(d.send_msg_content),null,4)

原创 css cursor 悬浮 手

// 手cursor:pointer;

原创 注册监听 message

// An highlighted block$(window).off("message").on("message", function (e) { var origin = e.originalEvent; var data = {}; if (origin.data) { data = JSON.parse(origin.data); st_id = data.ID; st_name = data.NAME; }});

原创 父页面 调用 iframe的方法

父页面<div class="image_content"> <iframe scrolling="yes" id='imgCon' scrolling=yes name="frame0" src="./imgContent.html"></iframe></div>// An highlighted block//获取iframevar iframe = document.getElementById("tabList");var iwi

原创 href的URL 传josn格式参数

// An highlighted block $("#test").click(function () { var json = { Name: "李某", Age: 22, Like: "Movies" } document.location.href = "index3.html?jsonData=" + encodeURIComponent(JSON.stringify(json));//编码传值 });index3.htmlvar urlParams = w

原创 js base64 压缩

// An highlighted block 压缩function imgBase64(demo, file, wh, mark, bs, callback) { if ((file.size + "").length > 6) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (e) { var image = new Image() //新建一个img标签（

原创 async 与 await

async 函数函数的返回值为 promise 对象promise 对象的结果由 async 函数执行的返回值决定await 表达式await 右侧的表达式一般为 promise 对象, 但也可以是其它的值如果表达式是 promise 对象, await 返回的是 promise 成功的值如果表达式是其它值, 直接将此值作为 await 的返回值注意await 必须写在 async 函数中, 但 async 函数中可以没有 await如果 await 的 promise 失败了,

原创 三、promise 的几个关键问题

1. 如何改变 promise 的状态?(1) resolve(value): 如果当前是 pending 就会变为 resolved(2) reject(reason): 如果当前是 pending 就会变为 rejected(3) 抛出异常:如果当前是pending就会变为rejected2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?当 promise 改变为对应状态时都会调用3. 改变 promise 状态和指定回调函数谁先谁后?(1) 都有可能, 正常

原创 二、Promise 使用

API1. Promise 构造函数: Promise (excutor) {}(1) executor 函数: 执行器 (resolve, reject) => {}(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行2. Promise.prototype.then 方法:

原创 一、Promise 的理解

Promise 是什么?1.抽象表达:Promise 是一门新的技术(ES6 规范)Promise 是 JS 中进行异步编程的新解决方案备注:旧方案是单纯使用回调函数2. 具体表达:从语法上来说: Promise 是一个构造函数从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值Promise 的状态实例对象中的一个属性 『PromiseState』pending 未决定的resolved / fullfilled 成功rejecte

原创 CSS滚动条样式

统一隐藏滚动条统一隐藏滚动条谷歌 *::-webkit-scrollbar { width: 0 !important;}ie10* { -ms-overflow-style: none;}火狐* { overflow: -moz-scrollbars-none;}修改滚动条样式/*修改滚动条样式*//* 设置滚动条的样式 */div::-webkit-scrollbar{ width: 5px; height: 5px;}/* 滚动槽 */div:

原创 BFC-格式化上下文

BFCBFC（Block Formatting Context）格式化上下文,是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。形成BFC条件根元素或包含根元素的元素（）浮动元素（float 不是 none）（left、right、inherit（要看继承父类值））定位元素（position 为 absolute 或 fixed）行内块元素（display 为 inline-block）表格单元格（display为 table-cell，HTML表格单

原创 HTML语义元素

语义元素语义= 意义语义元素 = 有意义的元素一个语义元素能够清楚的描述其意义给浏览器和开发者。//无语义 元素实例: <div> 和 <span> - 无需考虑内容.//语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.<header> //元素描述了文档的头部区域//<nav> //标签定义导航链接的部分元素用于定义页面的导航链接部分区域，但是，不是所有的链接

原创 calc()语法规则

css计算属性calc()calc() 只作用于属性值CSS有很多长度，它们都可以与calc() 一起使用：px % em rem in mm cm pt pc ex ch vh vw vmin vmax不能在媒体查询中使用@media (max-width: 40rem) { /* Narrower or exactly 40rem */}/* 无效 */@media (min-width: calc(40rem + 1px)) { /* Wider than 40rem *

原创 @import语法规则

@import定义和用法@import <media_query_list><url>：使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url<media_query_list>：指定媒体类型和查询条件指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。IE使用@import无法引入超过35条的样式表。//以下3种方式都有效。

原创 !important语法规则

!important定义和用法Selector{sRule!important;}!important说明提升指定样式规则的应用优先权。IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。// An highlighted blockdiv{color:#f00!important;color:#000;}//在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f

原创 Vue引入components(组件)以及父子组件方法调用和参数传递

Vue引入components以及父子组件方法调用和参数传递父组件parent.vue引入 组件 child.vue// 父组件引入子组件<template> <div> <dataSource @getLink="getMyLink" :objData="data" ref="dataSource"></dataSource> <el-button @click="getDataSource">获取</el-bu

原创 CSS文字超出部分显示省略号

@CSS文字超出部分显示省略号一行内超出显示省略号overflow:hidden; /*超出的部分隐藏起来*/ text-overflow:ellipsis;/*超出文本以省略号 */white-space:nowrap;/*不换行*/超出两行显示省略号 overflow: hidden; /*超出的部分隐藏起来*/ text-overflow: ellipsis;/*超出文本以省略号 */ display: -webkit-box; -webkit-line-