![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端常用方法
GG·bond
这个作者很懒,什么都没留下…
展开
-
vue+h5移动端音乐自动播放
无原创 2022-06-02 10:59:53 · 1944 阅读 · 0 评论 -
判断iframe是否加载完成的完美方法
判断iframe是否加载完成的完美方法需求:vue某个组件引入iframe,需要判断iframe是否加载完毕,不然用户进入是白屏加载中created (){使用加载提示框} mounted () { const iframe = document.querySelector('#iframe') // 处理兼容行问题 if (iframe.attachEvent) { iframe.attachEvent('onload', () => {原创 2022-04-25 16:15:36 · 8357 阅读 · 0 评论 -
移动端自适应
一. 利用rem+js该方法利用rem根据html元素字体大小变化,例如html的font-size=16,则1rem等于16px;但是html的font-size是不会自己变的,需要利用js来改变不同设备下的font-size的大小1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 设置 html的meta2. http原创 2022-04-12 23:02:08 · 1076 阅读 · 0 评论 -
vue-生成二维码+下载二维码
<div class="img" ref="code"> <qrcode-vue :value="link" size="175" level="H" /></div><p class="down" @click="code()">下载二维码</p>import html2canvas from "html2canvas";import QrcodeVue from "qrcode.vue";components:{ Qr原创 2022-03-08 12:37:13 · 1330 阅读 · 0 评论 -
多行文本收起/展开功能
多行文本收起/展开功能1. 效果图(默认设置超过2行才显示 按钮)文字未超过两行超过两行2. 优点缺点1.按钮和文字是环绕型,不会遮挡文字,文字避开会换行,不会像用定位做的,不会遮挡刚刚顶满最后一行的文字,定位的按钮和部分文字出现遮挡2. 默认超过两行出现 收起、展开功能;可以修改-webkit-line-clamp: 2;改变行数3.兼容性问题:IE浏览器不能生效3. 代码<template> <!-- 按钮和文字是环绕型,不会遮挡文字,文字避开会原创 2022-01-22 14:08:21 · 1324 阅读 · 0 评论 -
实际技能二:常用的校验
/** * @param {string} path 判断字符串是否是https?:|mailto:|tal: 开头的 * @returns {Boolean} */export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path)} /** * @param {string} str //检验字符串是否是 admin editor * @returns {Boolean} */expo原创 2021-12-22 15:50:10 · 115 阅读 · 0 评论 -
打印功能window.print()
打印功能window.print()1. window.print()打印其实打印的是整个当前网页2.3. 样式问题如果使用less,scss 是不会生效的只能使用css语言格式, 就是不能像less、scss嵌套写//在style中,使用@media print{}//不要嵌套写@media print { div{ font-size:12px; ··· } ···}背景颜色可能不会生效,字体颜色生效了...原创 2022-01-05 10:58:15 · 5461 阅读 · 0 评论 -
前端-文件上传
文件上传1. vue+element 文件上传<el-upload class="upload-demo" //必选参数,上传的地址 action="https://jsonplaceholder.typicode.com/posts/" //是否支持多选文件 multiple //最大允许上传个数 :limit="3" //覆盖默认的上传行为,可以自定义上传的实现 :http-request="uploadFn" > <el-butt原创 2022-01-06 15:52:25 · 7065 阅读 · 0 评论 -
不常见的方法
1. object.hasOwnProperty()object.hasOwnProperty()是用来检测属性是否为对象的自有属性,如果是,返回true,否者falselet person={ name:"胡歌", age:18, eat:{ food:"面条" }}person.hasOwnProperty("name") //trueperson.hasOwnProperty("age") //trueperson.hasOwnProperty("eat") //true原创 2022-01-11 17:58:41 · 139 阅读 · 0 评论 -
遇到问题四:接口返回一个Blob类型,转化为URL使用
接口返回一个Blob类型,转化为URL使用//html<img :src="verifyIMG" alt="">//方法getVerify().then(res => { let url = window.URL.createObjectURL(res); // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 // 你可以像使用普通 URL 那样使用它,比如用在 img.src 上。原创 2022-01-11 14:50:42 · 1486 阅读 · 0 评论 -
鼠标相关事件
鼠标右键自定义菜单原生js书写思路: 鼠标右键点击事件,先阻止鼠标右键的默认事件;在把自己书写的html展示出来;再点击任意地方消失//html<li>胡歌</li>//自定义的鼠标右键菜单 采取绝对定位,top、left默认为0,默认隐藏<div class="menu"> <div class="item">一级菜单</div> <div class="item">一级菜单</div>原创 2022-01-15 12:01:53 · 433 阅读 · 0 评论 -
粘粘定位:吸顶效果
吸顶效果1. 才用 position:sticky 粘性定位这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景;元素定位表现为在触发条件前为相对定位,触发条件之后为固定定位top, right, bottom,left 就是条件;跨越它们设定的值,就是触发条件设置的top、left的值等就是相当于设置fixed定位的位置兼容性:position:sticky 的兼容性不乐观案例://html<b原创 2022-01-18 10:38:44 · 1084 阅读 · 1 评论 -
video截取视频内容作为封面
上述方法不知道为什么不能用了poster属性还是可以用图片地址直接作为video的封面,如果没有poster属性,默认用第一帧做封面原创 2021-11-24 09:55:45 · 2175 阅读 · 0 评论 -
实用技能一:防抖与节流
防抖与节流1. 用途防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。举例来说,一个点击事件会发起一次请求,用户拼命去快速点击,就会发起许多次请求,这显然不合理,防抖节流就是限制这种行为。注意:防抖是控制次数,节流是控制频率2. 防抖(debounce)防抖是无论触发多少次事件,只执行最后一次;具体来说就是:规定时间内回调函数只能执行一次,如果在规定时间内又触发了该事件,则会重新开始算规定时间案例:点击.box元素,1s后输出123;在点击了之后,1s内再点多少次,都以最原创 2021-12-18 11:13:59 · 694 阅读 · 0 评论