笔记
关注
分享
扫一扫
记录日常遇到的bug
施玥喵
一只前端小白
展开
-
js base64转图片
js base64转图片原创 2022-07-12 17:56:15 · 7125 阅读 · 1 评论 -
vue 监听数值的变化，并捕捉到
上传头像的例子是完整的，登录没全部展示1. 封装全局监听方法：在main.js中给引入watchsessionStorage（可以放多个函数）。约定监听的sessionStorage的值为"dialogLogin"，“avatarUrl”，然后创建StorageEvent方法，当执行sessionStorage.setItem(k, val) 时，初始化事件，并派发事件//用于登录判断是否有tokenexport function resetSetItem(key, newVal) { if原创 2022-04-19 15:21:15 · 1851 阅读 · 1 评论 -
vue 项目引入 字体文件
亲测无误，不会报错第一步第二步/* 引入字体 */@font-face { font-family: 'FZCHYJW'; src: url('FZCHYJW.ttf'); font-weight: normal; font-style: normal;}@import "./font.css";使用font-family: 'FZCHYJW';效果图...原创 2022-04-11 14:37:02 · 423 阅读 · 0 评论 -
vue 答题（单选，多选，判断）
这里是后台处理得计分，前台这是渲染题目，以及回显用户答得题答题后台数据格式 <ul> <li v-for="(i, index1) in arrlist.pqList" :key="index1"> <h3> <span>{{ index1 + 1 }}、</span> <div class="newtuexam_box">原创 2022-04-09 17:50:24 · 7575 阅读 · 0 评论 -
Vue禁止自动填充浏览器用户名密码
readonly onfocus="this.removeAttribute('readonly')"<el-input readonly onfocus="this.removeAttribute('readonly')" type="password" v-model="passForm.newPassword" show-password placeholder="请输入密码" @input="$forceUpdate.原创 2022-03-30 16:02:23 · 2379 阅读 · 0 评论 -
解决谷歌浏览器控制台缓慢打开
第一步第二步（把uk换成us）原创 2022-03-22 15:29:05 · 668 阅读 · 1 评论 -
el-upload在列表里使用
el-upload 数组得新增删除 <el-upload ref="upload" :action="uploads.url + '?baseDir=' + uploads.baseDir" :headers="uploads.headers" :on-success=" handleUploadSuccess2.bind(null, { index: i, data: ite原创 2022-03-18 16:39:30 · 665 阅读 · 0 评论 -
pc端检测本地电脑是否安装某应用，安装则打开反之则下载（vue 脚手架3）
vue使用protocolCheck需要全局引入**在需要得页面使用这个方法我的需求是1.电脑未下载，调用后台拿到路径用window.href下载到本地2 电脑已下载，弹出浏览器自带得框** window.protocolCheck( 'u3d://', (fail) => { console.log('fail', fail) // 没有安装 弹窗显示 引导去下载原创 2022-03-14 17:45:59 · 3784 阅读 · 7 评论 -
css 毛玻璃
<main> <p>IOS版下载</p> </main> main { position: absolute; top: 584px; left: 300px; width: 225px; height: 200px; line-height: 2; border-radius: 20px; background: rgba(255, 255, 255, 0.05); backdrop-fi.原创 2022-03-08 17:58:41 · 247 阅读 · 0 评论 -
el-input的rules验证
<el-form :model="registerForm" :rules="registerrules" ref="registerForm" > <el-form-item prop="mobile"> <el-input v-model.number...原创 2022-01-06 10:59:52 · 5827 阅读 · 0 评论 -
vue 监听sessionStorage存值的变化
在main.js进行路由监听，点击其他页面如果是未登录得状态，弹出登录页面main.jsimport { resetSetItem} from "@/utils/watchsessionStorage";//路由拦截router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 // console.log(to.meta.requireAuth); // conso原创 2022-01-05 15:24:24 · 2111 阅读 · 0 评论 -
vue 实现导出文件
安装 npm install file-saver --save建立exportFile.js在utilsimport FileSaver from "file-saver";export default class fileSave { /** * 导出Excel文件 * @param {*} res 文件流 * @param {*} name 文件名 */ static getExcel(res, name) { le原创 2021-12-22 13:58:08 · 754 阅读 · 0 评论 -
vue 使用百度地图（全景图）
安装 vue-baidu-map vue-jsonp第一步npm install vue-baidu-map --savemain.jsimport BaiduMap from 'vue-baidu-map'// 百度地图 Vue.use(BaiduMap, { ak: '' // 自己的百度地图ak})第二步 <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">原创 2021-12-15 14:24:19 · 2337 阅读 · 2 评论 -
vue 根据楼层数为7，生成一个7条数据的表格
原型图当用户输入楼层数，出现对应数量数组 getinput() { this.num = Number(this.formone.floorA); this.arrlist = []; for (var i = 0; i < this.num; i++) { this.arrlist.push({ layer: i + 1, houseld: 0, share: 0,原创 2021-11-20 16:04:56 · 562 阅读 · 0 评论 -
日期，Wed Nov 24 2021 08:00:00 GMT+0800 (GMT+08:00) 相互转换
将 Wed Nov 24 2021 08:00:00 GMT+0800 (GMT+08:00) 转换成日期格式 getTime (time) { var date = new Date(time) var y = date.getFullYear() var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) var d = (dat原创 2021-11-16 14:31:18 · 2784 阅读 · 0 评论 -
formdata 传数组的参数
let formDate = new FormData();formDate.append(("file", file);for(let i=0;i<list.length;i++){ formDate.append('list',list[i]) }}原创 2021-11-16 13:43:12 · 839 阅读 · 0 评论 -
css margin：auto； 失效原因
1.要给居中的元素一个宽度，否者无效。2.该元素一定不能浮动，否者无效。3 在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。4.display：table－celldisplay:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。5.行内元素失效解决方法：设置display:block；我遇到的是el-button的display:inline-block;改成display:block；就好了...原创 2021-09-23 16:06:11 · 497 阅读 · 0 评论 -
vue使用vue-seamless-scroll插件 实现无缝滚动（上，下，左，右）
安装 vue-seamless-scrollcnpm install vue-seamless-scroll --save 引用<vue-seamless-scroll></vue-seamless-scroll>import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll}, 官方文档https://chenxuan1993.gi.原创 2021-09-23 10:06:13 · 678 阅读 · 0 评论 -
禁止浏览器拖拽页面的图片
<body ondragstart="return false"></body> // 在页面的body上加上这行代码 ondragstart="return false//（vue项目直接在index.html 的body加上这行代码即可.html页面需要在每个页面加上）原创 2021-09-18 15:32:17 · 925 阅读 · 0 评论 -
jq 导航吸顶
注意html,body不要设置height:100%,window.addEventListener会不生效header_topb 是你要吸顶的页面//导航吸顶window.addEventListener('scroll', function () { console.log('11'); let t = $('body, html').scrollTop(); // 目前监听的是整个body的滚动条距离 console.log(t); if (t > 0) { $('.hea原创 2021-09-18 15:26:37 · 129 阅读 · 0 评论 -
bootstrap中input输入框限制
输入中文、数字、英文:<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">输入数字和字母：<input onKeyUp="value=value.replace(/[\W]/g,'')">输入大小写字母、数字、下划线：<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">只能输入英文字母原创 2021-09-16 10:27:38 · 1867 阅读 · 0 评论 -
jq实现横向轮播（多张图，一个一个切换）
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>显示多张图片的轮播</title> <style type="text/css"> html,body{ padding:0; margin:10px auto; } #warpper{ width:1120px;/*一列展示几个的原创 2021-09-14 17:12:59 · 1074 阅读 · 2 评论 -
vue 防淘宝的放大镜效果和横向轮播
第一部分（简单使用）安装 cnpm install vue-piczoom --save使用 vue-piczoom<template> <div> <div class="box"> <pic-zoom :url="imgurl" :scale="3"></pic-zoom> </div> <div class="list"> <ul>原创 2021-09-06 17:27:46 · 329 阅读 · 0 评论 -
three html 引入本地fbx模型
<!DOCTYPE html><html lang="en"><head> <title>2-1three.js FBX loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.原创 2021-09-01 17:36:23 · 1322 阅读 · 1 评论 -
小程序实现简单选项卡
wxml<!-- 选项卡 --><view class="tabs"> <view class="tabs_title"> <view wx:for="{{tabs}}" wx:key="id" class="title_item {{currentindex == index? 'active':''}} " bindtap="handleItemtap" data-index='{{index}}'>原创 2021-07-09 15:29:31 · 359 阅读 · 0 评论 -
小程序的父传子，子传父
properties: { //要接收的数据的名称 aaa:{ // type 要接受的数据的类型 type:String, value:'' } },<view>{{aaa}}</view><tabs aaa='123'></tabs>原创 2021-07-09 14:30:37 · 192 阅读 · 0 评论 -
element 使用回到顶部
<template> <div class="content"> <!-- 绑定content盒子 --> <el-backtop target=".content" :bottom="100"> <div>UP</div> </el-backtop> </div></template>.content { height: 1000px;原创 2021-05-06 15:51:58 · 320 阅读 · 0 评论 -
vue实现展开收缩内容
<template> <div class="contentweb"> <div class="type"> <span class="type_a">类型:</span> <div class="type_b"> <span class="type_bs" v-for="(item, index) in testList"原创 2021-04-09 10:22:08 · 666 阅读 · 0 评论 -
sessionStorage的用法
普通用法sessionStorage.setItem('demo','11');var demo=sessionStorage.getItem('demo');数组的用法sessionStorage.setItem('teacheruser', JSON.stringify(result.data.object));var teacheruser=JSON.parse(sessionStorage.getItem('teacheruser'));原创 2021-03-30 15:20:03 · 1070 阅读 · 0 评论 -
vue 数组对象排序
<div id="app"> <ul> <li v-for="(stu,index) in students1">{{stu}}</li> </ul> </div> data:{ students:[ {nam原创 2020-12-25 14:19:55 · 439 阅读 · 0 评论 -
前端使用阿里云图标库
第一步第二步第三步第四步（点击下载本地，会出现一个文件夹，把他压缩到你的文件夹里）第五步cnpm install css-loader --save第六步在main.js引入import "./assets/icon/fonts/iconfont.css"第七步点击demo_index.html会出现使用<span class="iconfont icon-xxx"></span>...原创 2020-12-20 14:36:00 · 289 阅读 · 0 评论 -
修改element 的el-radio的选中样式变成对勾
我这个是在全局改的，在app.vue页面（用了深度选择器）#app /deep/ .el-radio__input.is-checked .el-radio__inner::after { content: ''; width: 10px; height: 5px; border: 2px solid white; border-top: transparent; border-right: transparent; text-align: cent原创 2020-12-03 18:28:33 · 3388 阅读 · 0 评论 -
CSS @media 媒体查询PC端
@media (min-width: 1280px) {} @media screen and(min-width: 1366px) {}@media screen and(min-width: 1440px) {} @media screen and(min-width: 1680px) {} @media screen and(min-width: 1920px) {}原创 2020-11-25 16:52:39 · 443 阅读 · 0 评论 -
禁止平板放大缩小，双击放大缩小
双击放大缩小<script>window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); } }) var la原创 2020-11-24 10:19:06 · 320 阅读 · 0 评论 -
css垂直居中
.boxa_a { width: 100%; height: 48%; display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center; h1 { color: #ffffff; text-align: center; } }https://www.cnblogs.com/yugege/p/5246652.ht原创 2020-11-21 11:06:22 · 73 阅读 · 0 评论 -
js或者jq实现仿淘宝商城左侧导航
jshttps://www.jb51.net/article/72093.htmjqhttps://www.cnblogs.com/blacksheep/archive/2011/04/12/2013543.html效果图原创 2020-11-12 16:12:42 · 155 阅读 · 0 评论 -
jq实现循环展示数组里的图片
<ul class="content_bul"> </ul>$(document).ready(function() { //加载DOM var userList = [{ cont: 'US $ 14.10', url: 'img/img6.png' }, { cont: 'US $ 14.10', url: 'img/img6.png' }, { cont: 'US $ 14.原创 2020-11-11 15:28:01 · 772 阅读 · 0 评论 -
vue element上传文件限制为图片和上传图片携带参数
<el-upload action="你的URL" :auto-upload="true" :data="uploadData" :http-request="imageChange" :beforeUpload="beforeAvatarUpload" accept=".gif,.jpg,.jpeg,.png,.GIF,.JPG,.PNG" > <el-button t.原创 2020-11-05 14:06:51 · 1014 阅读 · 0 评论 -
jq 动态修改iframe的src（vue在线预览Word）
<iframe src="" width="900px" height="610px" name="listReload" style="border: 0px;"></iframe> created() { this.getparams(); }, getparams(){ var url=this.$store.state.orignsystemditrow.content;//你要拼接的地址 $(document).ready(function原创 2020-11-03 18:27:18 · 1003 阅读 · 0 评论 -
vue 路由拦截
router.jsimport Vue from 'vue'import VueRouter from 'vue-router'// 引入全局样式表import '../assets/global.css'Vue.use(VueRouter)const routes = [ { //首页 path: '/', name: 'Home', component: resolve => (require(["@/comp原创 2020-10-30 14:49:43 · 695 阅读 · 1 评论