前端笔记
会飞的胖达喵
胖达是只爱打架的猫,而且还会飞~
展开
-
elementUI el-radio 无法点击的问题
1、:label="item.id" 属性是Number类型还是String类型,要与Model绑定也要保持一致。2、不支持先创建对象再赋值的方式,可以改成如下这种。这里有两个坑,看你碰到哪一个。原创 2023-07-19 21:33:03 · 2079 阅读 · 0 评论 -
Vue中父组件向子组件传递数据的几种方法
总结了几种vue中父子组件传递数据的方法。转载 2023-06-28 18:12:05 · 6425 阅读 · 0 评论 -
elementUI 省市区的功能
【代码】elementUI 省市区的功能。原创 2023-06-18 14:19:54 · 337 阅读 · 0 评论 -
&#x开头的是什么编码?
你好」二字分别是Unicode字符U+4F60和U+597D,十六进制表示的codepoint数值「4F60」和「597D」,同时也就是十进制的「20320」和「22909」。解析网页时,输出的中文内容都是以&#x开头的一堆像乱码一样的东西,尝试过各种编码都无效,而且神奇的是,将这一堆“乱码”保存成网页后,通过浏览器打开又可以正常显示。//有x则表示是16进制,$1就是匹配是否有x,$2就是匹配出的第二个括号捕获到的内容,将$2以对应进制表示转换。都会显示为“你好”。...转载 2022-07-29 09:11:26 · 4060 阅读 · 0 评论 -
echarts柱状图x轴文字纵向显示
方式一 xAxis: { data: dataOrderAxis, axisLabel: { inside: true, textStyle: { color: '#fff' }, interval: 0, rotate: 270, }原创 2022-03-26 15:47:57 · 2243 阅读 · 1 评论 -
encodeURIComponent与encodeURI的区别
完美的js URLEncode函数当需要通过查询字符串传值给服务器时需要对get参数进行encode。escape()函数,不会encode@*/+(不推荐使用) encodeURI()函数,不会encode~!@#$&*()=:/,;?+'(不推荐使用) encodeURIComponent()函数,不会encode~!*()这个函数是最常用的我们需要对encodeURIComponent函数,最一点修改:function urlencode (str) { ...转载 2022-01-10 18:39:39 · 114 阅读 · 0 评论 -
vue 编辑弹框,编辑页面,列表数据也会跟着变
vue 编辑弹框,编辑页面,列表数据也会跟着变 editPoster(row) { // this.form = JSON.parse(JSON.stringify(row)) //避免引用传递,做一次数据拷贝 this.form = row this.dialogTitle = '编辑海报' this.dialogType = 'edit' this.dialogFormVisible = true}this.form = JSON.parse(JSON.strin原创 2021-12-25 10:06:52 · 1674 阅读 · 3 评论 -
css 水波浪效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>波浪特效</title> </head> <style type="text/css"> body{ background-color:thistle; } .waveWrapper{ width: 100%; height: 100px; ...原创 2021-12-13 14:25:24 · 966 阅读 · 0 评论 -
cdn使用vant的组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入样...原创 2021-12-13 14:21:50 · 3183 阅读 · 3 评论 -
el-cascader超出屏幕问题
el-cascader超出屏幕问题,在全局样式里添加即可.el-cascader-panel { height: 300px; }原创 2021-10-28 10:06:25 · 1039 阅读 · 0 评论 -
error gyp ERR! stack Error: Could not find any Visual Studio installation to use
今天安裝 npx create-react-app my-app 报错。 其他报错的方法这里就不讲了,其他好多站都有解决办法,这里把没有提到过的说下。 报错信息 gyp ERR! find VS gyp ERR! find VS msvs_version not set from command l…今天安裝 npx create-react-app my-app 报错。其他报错的方法这里就不讲了,其他好多站都有解决办法,这里把没有提到过的说下。先给几个依赖的命令。 npm config set p转载 2021-09-11 15:57:57 · 15202 阅读 · 0 评论 -
vue中命名空间
Js 命名空间./router.jsexport const router = { namespaced: true,//命名空间 state: { asyncRouters: [], routerList: routerList }, mutations: { setRouterList (state, routerList) { state.routerList = routerList }, // 设置动态路由 setAs原创 2021-09-11 13:58:29 · 1043 阅读 · 0 评论 -
js赋值与逻辑运算的疑问
看到一行代码感觉有点疑问 const asyncRouter = asyncRouterRes.data && asyncRouterRes.data.menusasync SetAsyncRouter ({ commit }) { const baseRouter = [{ path: '/layout', name: 'layout', component: 'view/layout/index.vue', m原创 2021-09-11 11:59:21 · 104 阅读 · 0 评论 -
JS异步操作新体验之 async函数
JS异步操作新体验之 async函数1、初识 async 函数ES6中提供了两个很好的解决异步操作的方案 Promise 和 Generator,ES2017标准中引入的 async 函数就是建立在 Promise 和 Generator的基础之上,它是 Generator函数的语法糖,使异步操作更加方便先通过一个异步读取文件的小栗子来对比下Promise、Generator 和 async 的异同点const fs = require('fs')function read转载 2021-09-04 09:58:58 · 973 阅读 · 0 评论 -
async 函数的含义和用法
异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步。async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案。二、async 函数是什么?一句话,async转载 2021-09-04 09:38:04 · 530 阅读 · 0 评论 -
webrtc之onicecandidate的 event handler的一点疑惑
// 监听的ICE候选人信息变动,如果收集到,就添加给对方 async onicecandidate() { //var _this = this; this.peerStudent.onicecandidate = (event) => { if (event.candidate) { console.log("candidate", event.candidate) let jsonDa原创 2021-09-04 09:24:36 · 2825 阅读 · 0 评论 -
async/await和Promise区别
async/await 的优势:可以很好地处理 then 链对于单一的 Promise 链其实并不能发现 async/await 的优势,当需要处理由多个 Promise 组成的 then 链的时候,优势就能体现出来了,接下来直接上代码:/** * 传入参数 n,表示这个函数执行的时间(毫秒) * 执行的结果是 n + 200,这个值将用于下一步骤 */function takeLongTime(n) { return new Promise(resolve => {转载 2021-09-03 11:00:22 · 563 阅读 · 0 评论 -
JS事件循环 Event Loop
前言刚学前端的时候一直听别人说 JS 是单线程、单线程、单线程的,其实完整的应该是在浏览器环境下 JS 执行引擎是单线程的。那么什么是线程?为什么JS是单线程的?1. 进程和线程进程和线程的主要差别在于它们是不同的操作系统资源管理方式。进程有独立的地址空间,一个进程崩溃后,在保护模式下不会对其它进程产生影响,而线程只是一个进程中的不同执行路径。我的理解,一个程序运行,至少有一个进程,一个进程至少有一个线程,进程是操作系统分配内存资源的最小单位,线程是 cpu 调度的最小单位。打个比方转载 2021-09-03 09:08:49 · 135 阅读 · 0 评论 -
关于meta标签中的http-equiv属性使用介绍
关于meta标签中的http-equiv属性使用介绍meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!meta标签的组成:meta标签共有两个属...转载 2019-10-22 09:22:18 · 462 阅读 · 0 评论 -
CSS中box-sizing: border-box;的作用
转载:https://blog.csdn.net/qq_37453240/article/details/79216205box-sizing 属性可以被用来调整这些表现:content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器去理解你设...转载 2018-08-29 19:12:57 · 69116 阅读 · 0 评论 -
使用Modernizr探测HTML5/CSS3新特性
转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.html使用Modernizr探测HTML5/CSS3新特性HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升转载 2015-01-08 17:22:17 · 542 阅读 · 0 评论 -
手机端滚动屏幕加载更多
别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); i转载 2016-08-19 13:49:49 · 7801 阅读 · 0 评论 -
bootstrap 树形菜单
http://jsfiddle.net/jhfrench/GpdgF/http://runjs.cn/detail/jspmxwka原创 2017-03-07 09:30:49 · 1868 阅读 · 0 评论 -
bootstrap inputfile.js
下载地址:https://github.com/kartik-v/bootstrap-fileinput例子:http://plugins.krajee.com/file-basic-usage-demo#top相关资料: http://www.cnblogs.com/wuhuacong/p/4774396.html http:/原创 2016-07-01 10:28:28 · 494 阅读 · 0 评论 -
Bootstrap研究3-基础html元素
Bootstrap研究3-基础html元素正如很多朋友所言,学习Bootstrap最简单的方式,就是跟着官方文档做一遍就可以了。这句话怎么说呢,它对也不对。说其对,是因为计算机科学是实践性非常强的学科,所有的东西如果不能落实到“做”这个字上面,一起都是扯淡;说其不对是因为,计算机科学还跟一般的应用科学不大相同(比如英语,你只要会背就“可以”了),计算机的实践还是需要非常强烈的理论作为支撑的转载 2013-05-08 12:34:35 · 792 阅读 · 0 评论 -
Bootstrap研究2-布局系统杂记
Bootstrap研究2-布局系统杂记上一篇文字Bootstrap研究1-精巧的网格布局系统,里面谈到了使用固定grid布局的原理和操作实践。关于布局部分还有一些要交代,权且凑为一篇。除了固定网格布局外,Bootstrap还提供一种流式布局Fluid grid system,其就是计算当前页面的宽度,给每个span乘以一个百分比。使用的时候,跟固定布局类似,所不同的是两级容器的类分别为转载 2013-05-08 12:33:31 · 925 阅读 · 0 评论 -
Bootstrap研究1-精巧的网格布局系统
Bootstrap研究1-精巧的网格布局系统本网格布局系统属于Scaffolding(框架,布局)部分。在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System)。本文讨论第一种固定网格布局。Bootstrap采用的是12列布局格式,即在页面一行之内最多可以布置12列。当然我们通常不会那么变态。我们通常是使用2列,或者3转载 2013-05-08 12:32:36 · 898 阅读 · 2 评论 -
Bootstrap研究0-概述
Bootstrap研究0-概述首先来讲这个东西来源于大名鼎鼎的Twitter团队,其开源已经有一段时间了,并且其版本更新很快2011年11月才刚刚推出1.*版本,2012年初马上就开始了2.*。Bootstrap目标是为开发人员快速构建页面前端提供了一系列的基础设施。从Bootstrap这个名字也可以看出,开发团队的一个愿景-希望Bootstrap能成为构建一切web前端的“入口点”,“引转载 2013-05-08 12:31:29 · 702 阅读 · 0 评论 -
图片绑定file上传并获取图片的base64
<!-- 影像上传 start --><div class="yx-upload-box" style="display:none;"> <span class="op-box"> <img onclick="closeUpload()" src="{$Think.config.APP_PUB}img/icon-close.png" alt="关闭"> </span> <div class="item-bo.原创 2021-05-13 15:00:15 · 259 阅读 · 0 评论 -
vue中标签自定义属性的使用
在vue中,尽量避免对dom的操作,通过对状态的管理实现需要的功能举个例子:vue获取dom元素可以使用ref要想获得自定义属性,可以通过设置ref实现<span data-num="21" ref="dataNum" @click="getData">55</span>getData:function () { console.log(this.$refs.dataNum.dataset.num);}但是vue不推荐这样做,你可以这样做...转载 2020-11-30 13:47:53 · 1973 阅读 · 0 评论 -
css定位,的重新理解,仔细理解描述即可
原创 2020-11-02 16:23:12 · 94 阅读 · 0 评论 -
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢?如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性。下面来转载 2020-10-26 16:26:00 · 780 阅读 · 0 评论 -
swiper根据图片切换不同的背景色
swiper根据图片切换不同的背景色var mySwiper = new Swiper('.swiper-container', { autoplay: true, //可选选项,自动滑动 loop: true, paginationClickable: true, navigation: { nextEl: ' .swiper-button-next ', prevEl: ' .swiper-button-prev ', },原创 2020-08-27 15:23:57 · 1738 阅读 · 1 评论 -
Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash模式的话,那么访问变成http://localhost:8080/bank/page/count/#/这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/coun..转载 2020-08-25 09:12:33 · 1230 阅读 · 0 评论 -
vue-cli本地的一个websocket
今天跑本地vue-cli项目,看到了一个websocket,如下图:解惑如下:vue本质上还是编译成h5就是说node相当于一个服务器 你执行npm run dev就是让node服务器编译vue 然后暴露端口然后开了一个ws监听代码改动实时刷新像vue的代理跨域啥的 你看为什么编译打包之后就没有了就是因为代理是node搞得 你编译之后就只有单纯的h5代码 没有这个node了编译之后也就是说其实随便丢到后端一个文件夹就可以访问了。是这个意思不...原创 2020-08-14 09:35:15 · 605 阅读 · 0 评论 -
google浏览器记住密码自动添加input框背景色问题
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #bddaf0 inset !important;}原创 2020-08-13 10:56:16 · 463 阅读 · 0 评论 -
什么是 JS 原型链?
我们知道 JS 有对象,比如var obj = { name: 'obj' } 我们可以对 obj 进行一些操作,包括「读」属性 「新增」属性 「更新」属性 「删除」属性下面我们主要来看一下「读」和「新增」属性。为什么有 valueOf / toString 属性呢?在我们没有对 obj 进行任何其他操作之前,发现 obj 已经有几个属性(方法)了:那么问题来了:valueOf / toString / constructor 是怎么来?我们并没有给 ob..转载 2020-08-07 15:27:47 · 391 阅读 · 0 评论 -
你可能不太熟知的布局技巧
mark一下晚点再看https://mp.weixin.qq.com/s/HYUgb8jEI-aQhbN4sBajNw原创 2020-07-21 14:30:31 · 158 阅读 · 0 评论 -
display:none的表单也会被提交
如题1、单区域设置为display:none也会被提交2、设置为disabled属性的表单的不会被提交3、表单多个同名字段,在前面的生效,多个字段可以用数组的形式原创 2020-07-04 09:21:32 · 5034 阅读 · 0 评论 -
vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下。1.通过url传输数据:(一般是在入口页面传下app的用户信息进来供vue h5使用)由交互引发的对vue生命周期的思考开发时遇到一个经典问题,需要在页面刚载入时与app交互判断是否显示一个弹窗。看似很简单,进入页面调一个交互方法即可,但这个需求的解决经历了几个步骤:1、created因为created时,实例就创建完成了,我开始的选择是在此生转载 2020-06-24 14:22:30 · 1800 阅读 · 0 评论