- 博客(60)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 css动态传参，attr的妙用
CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。今天再做一个编辑器的功能的时候，发现有一段非常奇妙的代码，使用attr获取div标签的data-label值。属性函数 attr() 目前暂时只能应用于CSS元素中的伪元素（before,after）。想要这么写，可以试试张鑫旭 大佬写的 Polyfill attr()新语法文章。这又是什么鬼东西，emmm。下面就来模仿这个编辑器，做一个改变字体大小的实例吧。
2023-12-29 11:07:38
1263
原创 js表单autocomplete=‘off‘失效问题
众所周知。。。。autocomplete是Html5中的新属性，有‘off’,'on’两个属性。作用是点击输入框时，会打开或者关闭提示信息。部分浏览器也会出现失效的情况（emmmm…，毕竟是html5新增的，有点bug也正常哈）。这个时候应该如何解决呢？百度试了几种方法都不太理想，也有人说网易邮箱使用，autocomplete='new-password’来禁止这个弹窗的。嗯mmm~这倒是也有这属性，但是自己加上真的有用吗?
2023-09-21 15:41:40
483
原创 自定义组件的v-model
在这里我封装一个vant的popup来进行实操，默认我们在父组件中使用v-model传过去一个show。组件上的 v-model 默认用的是，porp里面的 value + input 事件。最后使用input事件，吧默认值value改为false即可。使用vant的popup，通过close事件来监听关闭弹层。子组件用props来接收这个值。
2023-06-28 16:09:17
312
原创 popstate返回上一级问题。
关于监听页面返回上一级popstate，进入页面后，安卓手机必须手指点击页面任何部分之后返回才会触发popstate，IOS正常触发。解决方案为加入如下代码即可。
2023-02-04 16:18:06
779
4
原创 js适配IOS代T时间戳转日期
在IOS机型中,大部分浏览器能正确解释出js中的newDate(‘2022-07-29T023818.000+0000’)的日期对象。但是在IOS低版本中newDate(‘2022-07-29T023818.000+0000’)中返回的永远是"InvalidDate"。这个是因为再次IOS机型中无法解析时间里面的‘-’与T，需要进行处理一下。...
2022-07-29 11:36:03
871
原创 H5中iframe中嵌套的页面无法使用摄像头和麦克风
无法使用的原因：在 webview 的 iframe 中，默认禁止不同域名下的录音及摄像头的访问权限（即使手机在系统设置中已为 APP 开启了权限）。使用：如果需要访问需要对 iframe 的 allow 属性设置访问权限。根据报错提示，给标签加上相应的allow属性。<iframe ref="iframes" src="xxx" allow='microphone;camera;'></iframe>在vue中，直接在iframe上调用，有时候也是不行的；解决方案：
2022-05-14 17:32:06
6449
1
原创 将html转换为string格式
html中<body> <h1 class='h1'>哈哈哈转换string</h1><body>1.jq写法<script> var $html = $('h1'); var str = $html.prop('outerHTML'); console.log(str);</script>2.js写法 var MyNode = document.getElementsByTagName("h1");
2021-12-21 11:18:19
5156
原创 vue性能优化-分片添加数组
介绍在页面中假如一次性给你100w条或者更多数据时，直接对页面进行渲染就会造成卡顿的效果，这时候我们就可以使用到分片渲染。分片渲染分片添加数组就是数据分开每次添加多少条，这样解决了一次性渲染所带来的卡顿。实现逻辑利用递归+闭包+setTimeout+分页。每递归一次截取10条对数组进行添加，总长度<当前数组长度时，停止递归。 // 性能优化，切片渲染 SliceRendering (total, attrs, arr) { /* total 总条数
2021-11-26 11:55:12
811
原创 vue使用markdown
1.使用markdown首先下载mavon-editor npm install mavon-editor --save然后再main.js中引入文件// markdownimport mavonEditor from 'mavon-editor';import 'mavon-editor/dist/css/index.css';Vue.use(mavonEditor);在vue的template中添加以下组件<mavon-editor v-model="context" :to
2021-11-17 14:13:27
8811
3
原创 iframe父子页面传参数
1.子传父子页面中html页面添加一个按钮 <button id="btn">子页面的按钮</button>在js中使用 window.parent.postMessage(date,origin)方法进行跨源传递。第一个参数代表的是数据，第二个参数代表地址，* 代表全部地址。 <script> document.getElementById('btn').onclick = function () {
2021-11-11 14:12:10
860
原创 node.js+MongoDB数据库基本使用
1.下载地址https://www.mongodb.com/try/download/community2.安装这一步的Istall MongoDB Compass可以取消勾选，下载完MongoDB之后再下载。否则下载速度会特别慢点击Install等待下载即可3.测试是否已安装mongod --version出现一下内容就表示安装成功了4.配置环境变量右键此电脑，点击属性把MongoDB路径下面的bin配置进去，然后点击确定即可5.介绍关系型和非关系型数据库
2021-10-21 15:50:25
396
原创 Node基础知识整理
1.fs模块在node中采用EsmaScript进行编码，没有Bom与Dom,和浏览器中的JS不一样。浏览器中的js没有文件操作能力，但是Node中的js可以对文件进行操作。fs是file-system的简写，就是文字系统。在Node中使用这个核心模块就需要引入。1.读文件Node是错误优先的回调函数第一个参数返回错误，并且验证它是否出错；其他参数返回数据。第一个参数就是要读取的文件路径,第二个为编码类型，一般直接填写utf-8即可，否则读取的文件是乱码，第三个参数是一个回调函数。2.写文件
2021-10-19 10:36:47
349
原创 关于swiper PC切换PE轮播失效问题。
问题：swiper进入开发者模式后通过点击小手机把pc切换为pe端，效果不起作用，必需刷新才能起到作用。解决方案：监控屏幕的变化，屏幕只要发生变化，就对swiper进行自动刷新。先来看一个Location的方法：location.reload();reload()方法用于刷新当前文档。reload() 方法类似于你浏览器上的刷新页面按钮。location.reload(forceGet)如果把该方法的参数forceGet设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务
2021-10-12 10:09:20
234
原创 移动端适配
适配js文件，在src下面创建一个js文件夹，将以下代码生产js文件放置进去。export default function(win, px) { var remCalc = {}; var docEl = win.document.documentElement, tid; function refreshRem() { // 获取当前窗口的宽度 var width = docEl.getBoundingClientRect().
2021-09-23 18:10:18
117
原创 常用正则+常用方法总汇（持续更新）
1.验证非法字符（除了汉字、英文、数字、下划线、中划线、空格以外的） var reg = /^[\s\u4e00-\u9fa5a-z0-9_-]{0,}$/; if(!reg.test(this.userMsg)){ console.log("包含非法字符") }else{ console.log("不包含非法字符") } 2.验证手机号 var reg = new RegExp(/^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19
2021-09-02 14:04:54
109
原创 谷歌浏览器安全模式
在写项目时，我们会遇到跨域问题，打开谷歌浏览器安全模式，就能有效解决跨域问题。操作如下：找到桌面谷歌浏览器点击 右键-属性复制浏览器的路径打开命令提示符，系统指令如下： --args --disable-web-security --user-data-dir格式为：浏览器路径+空格+以上的指令如下就表示已经打开浏览器安全模式了，打开后就这样用本地的地址直接访问了。关闭指令为 --disable-web-security...
2021-08-13 11:37:29
2673
原创 Vue路由左右切换动画效果
首先在router里面的每个路由的meta里面配置index，用作你是向左还是向右切换。 { path: '', name: 'index', component: () => import('@/components/index.vue'), meta: { index: 0 }
2021-07-29 15:12:05
512
原创 js中document.execCommand实现复制功能
使用js的方法execCommand实现复制功能，选中复制或者点击复制（不使用插件的情况下）。 var textarea = document.createElement('textarea'); document.body.appendChild(textarea) textarea.value = '复制功能' textarea.select(); document.execCommand("C
2021-07-27 10:03:10
904
原创 vue在v-html使用过滤器。
在{{}}花括号中放数据，花括号不能解析标签，这时候我们就用到了v-html。<div v-html="$options.filters.formatTime(text)"></div>filters:{ formatTime:function(value){ return val = val.replace(new RegExp('&haha', 'g'), `<img style='width:0.6rem' src='${require('..
2021-07-16 14:44:28
1723
原创 vue 评论框里面输入Emoji表情
contenteditable 属性是 HTML5新增的。所有主流浏览器都支持 contenteditable 属性。div设置contenteditable=“true”，即可对其进行编辑。 <div placeholder="写评论..." ref="inputs" @input="changeBtnClick" @focus="focusCustomerMessage" @blur="blurCustomerMessage" contenteditable class="pingluni
2021-07-02 15:34:24
758
1
原创 Vue中动态修改keyframes动画特效
使用一个简单的投票系统来做演示。操作主要使用的是document.styleSheets[0]通过插入规则 insertRule 来添加动画最后通过style进行样式修改代码下面是演示代码：<template> <div> <div class="toupiao" v-if="showTest"> <div class="yes btns" @click="changes('1')">赞同<
2021-05-20 17:16:10
3932
原创 观察者（IntersectionObserver API）的基本使用（入门篇）
用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver介绍一般情况下监听可视区域或者几个元素的相对可视区域状态都不是很容易，传统方式也特别消耗性能，此时就可以使用到IntersectionObserver。操作操作为监听一个列表的首尾是否进入视窗。定义一个new IntersectionObserver（callback,option）注意：此文档只使用到了callback观察者建造 //观察者建
2021-05-18 14:56:13
844
原创 pc端与移动段的互相切换
实现页面切换的话主要是使用到了h5新增的navigator属性。操作：PC页面=>PE页面如果当前是pc端页面，加入以下代码，更改移动段代码，点击F12然后刷新页面即可进行切换。 if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test( navigator.userAgent)) {
2021-05-08 17:47:51
1434
原创 讲解vue中使用防抖，节流
extract() { this.throttle(this.handle, 1000) }, throttle(fn, wait) { if (!this.valid) { return false } //这里写要执行的任务// this.valid = false setTimeo...
2021-05-03 21:19:58
318
原创 解决uniapp在微信小程序显示图片/数据，h5不显示图片/数据。
配置跨域首先在mainifest.json中的源码视图中配置跨域。"h5": { "devServer": { "port": 8080, "disableHostCheck": true, "proxy": { "/dpc": { "target": "https://www.edonguoji.cn", "changeOrigin": true,
2021-04-27 17:06:13
7691
1
原创 git自定义指令(alias)
首先在自己安装的git目录下找到etc文件，然后etc问价找到gitconfig文件，并在编辑器中打开。在文件最下方加入以下代码，可以根据自己的需求进行更改或添加。[alias] i = init #初始化 cmm = commit -m #提交 ad = add . #提交暂存区 lg = log #产看日志 rlg = reflog #回退版本时查看的操作日志 st = status #查看状态 co = checkout #切换分支
2021-04-27 11:06:35
683
原创 微信小程序
1.注册下载开发工具注册在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。下载在https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 中找到适合自己点电脑的开发工具建议微信小程序自带开发者工具，集开发预览调试发布于一身的完整环境。但是由于编码的体验不算好，因此建议使用vs code+微信小程序编辑工具来实现编码vs code负责敲代码，微信编辑工具负责预览框架
2021-04-22 14:36:46
459
原创 vue笔记总结
0.数组字符串的操作0-1.数组Join(‘’) / toString() ----数组转字符串splice(index,n) ---- 删除pop尾部删除 push尾部添加shift头部删除 unshift 头部添加sort()数组排序 reverse()数组反转concat（）合并两个或多个数组/字符串数组去重4方法1，includes 包含2，indexOf3，lastIndexOf 检测 数组的首次和最后一次出现的位置 返回值为-14，new Set0-2.字符
2021-04-09 17:05:35
807
原创 vue-cil脚手架3.0安装环境
1.卸载node.js（如果装了2.0的脚手架想换成3.0的需要先卸载重装，如果没有装过任何vue请从第4部开始）2.C:\Users\18613\AppData\Roaming 目录下删除npm 和npm-cache(如果装了2.0的脚手架,请先删除)3.安装新版本的node.js 参考：https://www.runoob.com/nodejs/nodejs-install-setup.html 》.安装nodejs，自带npm环境。地址：https://nodejs.org/en/do
2021-04-05 21:06:51
158
原创 css背景自适应
<style> * { margin: 0; padding: 0; } .cont { width: 100%; height: 100%; position: absolute; background: url(http://www.chinawanda.com/static/images/in...
2021-04-02 17:32:15
77
原创 js+jq飞机大战
js+jq飞机大战，可以自选难度，显示分数与血量，血量为0即为死亡，死亡显示分数，可以返回主界面。css部分* { margin: 0; padding: 0}#app { width: 512px; height: 768px; border: 1px solid #ccc; position: relative; overflow: hidden}.play_game { cursor: none}.bg {
2021-03-28 10:44:36
202
原创 最简单的原生js拖拽
首先是排版，只有一个色块。再CSS中给盒子加上定位 * { margin: 0; padding: 0;} #box { position: fixed; width: 100px; height: 100px; background: #000; }html部分只有一个div <div id="box"></div>
2021-03-24 09:44:44
145
1
原创 在vue-cil搭建项目使用jQuery
1.下载jq的包：npm i jquery -S2.然后修改配置，在package.json文件中，找到eslintConfig，在env下添加 “jquery”: true 如图所示：3.直接在main.js中引入jQueryimport $ from 'jquery'Vue.prototype.$ = $4.测试是否安装成功：···$(function() {alert(‘jq使用成功······’)})···...
2021-03-01 20:29:21
124
原创 vue-cil切换包管理器
npm下载vue-cil换为yarn下载默认情况下在下载完node，下载脚手架时是使用npm下载的。要改为yarn下载的话进入C:/user/administrator/下回有这两个文件,用编辑器打开.vuerc把npm改为yarn即可。再次创建项目就变为yarn了。...
2021-03-01 16:17:31
120
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人