- 博客(32)
- 收藏
- 关注
RSS订阅原创 margin塌陷问题
为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。为父盒子添加overflow：hidden；为父盒子设定padding值；为父盒子添加position：fixed；为父盒子添加 display：table；利用伪元素给子元素的前面添加一个空元素.son:before{ content:""; overflow:hidden; }...
2021-07-01 16:07:45
98
原创 IE浏览器不缓存http请求
有些接口请求时会上传cookie，但如果请求时来自缓存，那么接口返回的数据可能会异常。添加请求头来强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。// 在接口中写入headers: { 'Cache-control': 'no-cache', Pragma: 'no-cache',},...
2021-06-28 10:11:08
234
转载 vue保存格式化代码
setting{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "es
2021-06-18 17:38:27
700
原创 vue配置模式和环境变量
什么是环境变量环境变量相当于快捷键，比如你需要在命令行打开一个文件，你需要输入这个文件的路径，设置了环境变量，直接输入文件名就能打开。什么是模式模式不等于环境变量一个模式可以包含多个环境变量.env文件增加后缀来添加模式在项目中创建.env来指定环境变量.env 全局默认配置文件，不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件.env # 在所有的环境中被载入.env..
2021-06-18 17:36:15
240
原创 vue 封装api&配置跨域
封装api1.requestimport axios from 'axios';const service = axios.create({ timeout: 15000,});export default service;2.apiimport request from '@/utils/request';export function qwe(params) { return request({ url: '/api/qwe', method: 'get
2021-06-16 11:40:33
265
原创 Ant Design modal对话框内的标签样式无法修改
modal对话框中的样式无法使用deep方式修改，原因是modal挂载到了body上，而我们一般修改的样式都作用于 id=root 的div标签上。1.第一种方法是使用内联样式，但是内联样式无法改变一些标签的一些属性，比如input-password的hight属性。<a-modal title="编辑地址" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCa
2021-06-16 10:31:29
1782
原创 两个数组匹配key值
Object.keys(arr1).forEach(item => { Object.keys(arr2).forEach(it => { if (it === item) { arr2[it] = arr1[item]; } });});
2021-06-11 15:58:03
392
原创 后端直接返回图片流，前端显示代码
api接口设置responseType: 'blob'api接口获取到数据后执行下列代码Img = window.URL.createObjectURL(res.data);
2021-06-11 15:53:32
1654
原创 监听vuex中数据的变化
监听vuex中数据的变化代码如下（示例）： computed: { isPlay() { return this.$store.state.isPlayMusic; } }, watch: { isPlay(val) { 需要的内容 } } },
2021-05-17 18:06:12
157
原创 element-ui
获取到value的值之后，下拉框显示的是value值，并没有显示对应的label值，我碰到的原因是value值为字符串，将字符串转化为数字就可以了<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value=
2021-05-17 10:11:16
288
原创 判断字符串、数组中是否有重复的值
let str = 'afjghdfraaaasdenas'let judge = {}for (let i = 0; i < str.length; i++) { console.log(!judge[str[i]]); // 输出true false}
2021-05-14 10:19:10
557
原创 vue 父子组建传值
父子组件传值有两种方法，其中一种是常规的传值父组件<Father> <div @click="asd"></div> <Son :inputname="qwe" @childfn="parentfn"></Son></Father><script>export default { data() { return { msg: '', }; },
2021-05-12 14:57:24
68
原创 接口请求到数据，但是打印下来没有
使用JSON.parse(JSON.stringify(res))JSON.parse()是从字符串中解析出json对象JSON.stringify()是从json对象中解析出字符串axios(url, method).then(res => { console.log(JSON.parse(JSON.stringify(res)))})
2021-05-12 09:07:32
2090
1
转载 数据值改变了，但是页面没有变化
使用this.$set方法this.$set(obj, key, value)this.$set(数据对象, 添加的数据名称, 添加的数据值)链接: https://blog.csdn.net/hhkongbai/article/details/101022019.
2021-05-11 18:23:34
1346
原创 显示隐藏过度效果（hover）
css在css添加过度效果，常用的hover，然后在里面添加样式class:hover { transition： all .5s color: #fff ...}但是如果元素添加了display:none,visibility:hidden，那么过度样式会无效，解决办法如下class { transition:visibility .5s, opacity .5s; visibility:hidden; opacity: 0;}class:hover { visibi
2021-04-01 17:16:44
2449
原创 localStorage与sessionStorage
localStoragelocalStorage: 永久保存，存储大小为5mb//保存数据到本地localStorage.setItem("name",JSON.stringify(obj));//获取本地数据var user = JSON.parse(localStorage.getItem("name"))//获取指定下标数据localStorage.key(0)//删除本地数据localStorage.removeItem("name");//清空本地数据localStora
2021-03-31 15:47:21
43
原创 kkFileView 文件预览
只有前端部分// 配置urlmodule.exports = { onlinePreviewUrl: 'http://localhost:8012/onlinePreview?url='}<script>//base64代码地址：https://cdn.jsdelivr.net/npm/[email protected]/base64.min.jsimport Base64 from '@/utils/base64.min.js';import { onlinePreviewUrl
2021-03-31 11:05:38
1047
1
原创 javascript
跳出for循环跳过当前循环//continue跳过当前循环for (var i = 0; i < 3; i++){ if(i == 2) continue; console.log(i);}//0//2跳出当前循环//break跳出for循环for (var i = 0; i < 5; i++){ if(i == 3) break; console.log(i);}//0//1//2跳出多层for循环//1.使用label语句jump:for
2021-03-19 13:48:00
77
原创 微信小程序
在js中改变元素样式：<label style="color:{{color}};"></label>data: { color: "red", }methods: { this.setData({ color: "green" }) }//显示 loading 提示框wx.showLoading({})//关闭当前页面，跳转到应用内的某个页面 wx.redirectTo({})//显示消息提示框wx.showToast({})
2021-03-15 18:00:05
62
原创 Error in render: “TypeError: Cannot read property ‘xxxxx‘ of undefined“
Error in render: “TypeError: Cannot read property ‘coverImgUrl’ of undefined”翻译为：呈现时出错：“TypeError:无法读取未定义的属性”coverImgUrl“页面显示正常，但是报错了，我怀疑是页面先渲染了但没有找到数据，之后数据加载完成，再调用数据，那么只要先不渲染，等数据加载完成后渲染就可以了：在父级添加v-if，当值存在时加载。<div class="top-right" v-if="this.$store.
2021-02-22 20:21:50
672
原创 焦点问题
遇到一个焦点问题：点击按钮screen显示时，焦点不在screen上<div class="screen" v-if="screen"> <div class="return"> <p>登录</p> <a href="#" @click="login()"></a> </div> <div class="QRCode" v-if="qrCode"> <div>
2021-02-22 16:39:07
118
原创 vue 点击按钮 显示隐藏有动画效果
css有鼠标移入移出（hover）的动画效果很方便给，但没有鼠标点击的动画效果，vue中有一个transition-group标签能够实现这一功能。//注意需要加上key<div class="lyric-btn" @click="lyric()">词</div><transition-group name="lyric"> <div class="lyric-plate" v-if="isLyric" :key="1">qwe</div>
2021-02-09 18:12:03
2441
原创 vue 音乐进度条拖拽
音乐进度条拖拽这个点卡了我2天，遇到了很多问题，一开始我的思路是自定义设计一个进度条，进度条按时间推移和点击进度条跳转音乐播放都能实现了，但最后滑动进度条卡住了，一开始尝试mousedown，mousemove，mouseup实现，但鼠标移出区域后进度条就会停止，达不到我想要的效果，我能力有限，不知道要怎么实现。之后想到input有个range类型，就试了试，发现简单很多。<input type="range" class="musicBar" ref="musicBar" v-m
2021-01-19 22:49:15
1235
1
原创 vue 路由跳转页面样式错乱
今天发现个情况，刚进入页面时正常的，路由跳转后也是正常的，但跳转回来后页面布局乱掉了，看到的时候觉得挺好笑的，解决方法如下。//只要在style后加上scoped就可以<style scoped>.m { width: 1200px; margin: 0 auto; border-left: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3; display: flex;}</style>不加sco
2021-01-13 16:27:00
1202
原创 毫秒转化为日期，获取年月日
毫秒转化为日期var newDate = new Date(time); //结果如下Wed Jan 13 2021 08:16:59 GMT+0800 (中国标准时间)这样的结果不适合调用所以直接获取年月日let d=new Date(time)let day=d.getDate()let month=d.getMonth() + 1let year=d.getFullYear()let updateTime = year + "年" month + "月" + day + "日"
2021-01-13 15:55:12
928
原创 vue v-for选取数组中的一部分
// 使用slice获取数组中的特定部分<li v-for="(item, index) in Tops.slice(0, 4)" :key="index">
2021-01-09 15:06:47
2878
原创 时间换算 将毫秒换算成时间
时间换算 将毫秒换算成时间直接调用就可以transTime(value) { let time = ""; value /= 1000; let m = parseInt(value / 60); m = m < 10 ? "0" + m : m; let s = parseInt(value % 60); s = s < 10 ? "0" + s : s; time = m + ":" + s;
2020-12-16 22:23:03
1384
原创 vue 音乐播放器上一首 下一首切换
vue 音乐播放器上一首 下一首切换我是使用监听来实现切换的，将v-for循环列表的index存储在vuex中，点击上一首或下一首改变index的值，在另一个组件中监听index，获取当前index值所在的元素，再获取元素上的歌曲的id，播放歌曲。考虑到还有歌单中的歌曲和搜索的歌曲，感觉这么做要好一些代码只截取了片段歌曲组件//自定义属性将id和index绑定<li v-for="(item, index) in ReMusics" :key="index" :data-mus
2020-12-11 21:57:42
2905
1
原创 vue v-for循环列表 音乐单曲点击单独播放
vue v-for循环列表 音乐单曲点击单独播放目的是让单曲的播放和暂停分别和true和false绑定。单曲组件代码只截了片段<template> <ul> <li v-for="(item, index) in ReMusics" :key="index"> </ul></template><script> export default { methods: { /* 点击事件获得歌曲url */
2020-12-11 02:42:31
702
原创 倒计时效果
倒计时效果html部分 <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div>JavaScript部分 /* 1.获取元素 */ var hour = document
2020-12-10 02:11:05
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人