清除浮动的方式

清除浮动方式一：（IE6没问题）
给父元素设置height属性，不推荐这样处理
清除浮动方式二：（IE6没问题）
给元素设置clear属性
缺点：margin属性会失效，设置不了
后续：可以通过给他们的父元素设置border边框，再设置margin-top（其他类似）值大于前面浮动元素的height值，可以显示效果。
清除浮动方式三：（隔墙法，不常用）（IE6没问题）
外墙法：给两个盒子之间添加一个div（块及元素），设置此div的clear：both。
通过这种方法可以设置第二个盒子的margin-top值，但是不能设置第一个盒子的margin-bottom值，解决方法是通过给中间的div设置height来实现中间的间隔距离
内墙法：在第一个盒子中所有子元素最后添加一个额外的duv（块级元素），设置此div的clear：both。
可以使用margin-top和margin-bottom，设置额外添加的div（块级元素）的高度也可以
内外墙的区别：内墙可以撑起第一个盒子的高度和宽度，外墙法不行
清除浮动方式四：（IE6不正常）
通过伪元素选择器：
image.png
兼容IE6的方式：
添加下面一句
image.png
清除浮动方式五：（IE6不正常）

image.png

解决vuex在刷新页面时，state中数据丢失的情况

在App.vue中添加如下代码
created() {
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem(‘store’)) {
this.前端 - 图4store.state,
JSON.parse(sessionStorage.getItem(‘store’))
)
)
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener(‘beforeunload’, () => {
sessionStorage.setItem(‘store’, JSON.stringify(this.$store.state))
})
}

设置element-ui中el-input的激活状态边框颜色

.el-input__inner:focus{
border-color: rgba(255, 255, 255, 0.2);
}

H5开发调用相机功能

//accept：表示要打开的文件类型 capture：表示可以捕获到系统默认的设备
相机和相册
相机
录像
多选

调用打电话


window.location.href = tel://${res.data.secretNo}

在vue中使用webpack-merge插件修改当前路由参数

scode格式化文档变双引号，加分号的问题

{
“singleQuote”:true,
“semi”:false
}

vscode格式化文档会清除（）前面的空格，导致报错

‘space-before-function-paren’: ‘off’

vscode修改端口号方法：

在根目录中新建一个vue.config.js文件里面添加内容
module.exports = {
devServer: {
port: 8085
}
}

element-ui菜单边线去掉

.el-menu{
border-right: 0;
}

修改滚动条样式

::-webkit-scrollbar{
width:5px;
height:3px;
}
::webkit-scrollbar-thumb{
background-color: #a1a1a1;
border-radius: 5px;
}

html引用ttf字体文件

@font-face {
font-family: MyFontName;//自定义字体名称
src: url(../Gloss_And_Bloom.ttf)
}

Test Text

vue可以使用qrcode动态生成二维码

第一步：
npm i qrcodejs2 —save
第二步：
import QRCode from ‘qrcodejs2’
第三步：


第四部：
data中设置对应的值
qrcodeAddress: ‘https://www.baidu.com/‘
第五步：
methods: {
qrcode() {
const qrcode = new QRCode(‘qrcode’, {
render: ‘canvas’, // 也可以替换为table
width: 122,
height: 122,
text: this.qrcodeAddress, // 二维码地址
colorDark: ‘#000’,
colorLight: ‘#fff’
})
return qrcode
}
}

picker使用https://gitee.com/jiwenchuan/vue-jsite-picker?_from=gitee_search

通过window.performance.navigation.type == 1 判断页面是否是刷新

涉及到页面跳转需要保存的变量设置为全局

快速创建连续数字的数组

const numbers = […Array(100).keys()] // [0, 1, 2, …, 98, 99]

原生实现图片上传

  1. <input
  2.             class="photograph"
  3.             type="file"
  4.             name="files"
  5.             accept="image/*"
  6.             @change="(e) => handleFiles(e, 'back')"
  7.           />
  9. handleFiles(e, frontOrBack) {
  10.       // if (this.saveData.photos.length >= 10) {
  11.       //   e.target.value = "";
  12.       //   this.showMsg("最多只能选择10张图片");
  13.       //   return;
  14.       // }
  15.       var file = e.target.files[0]; //获取File对象，这里是上传单张图片，[0]代表第一张图片。如果多张，就是一个var file = e.target.files;
  16.       var type = file.type.split("/")[0]; //按照惯例，不应该由前端判断格式，因为这里是根据后缀名判断的，修改后缀名仍旧可以上传，理应由后端根据文件格式来判断。
  17.       if (type != "image") {
  18.         this.showMsg("只能选择图片");
  19.         return;
  20.       }
  21.       // var size = file.size / 1024 / 1024;
  22.       // if (size > 2) {
  23.       //   this.showMsg("图片大小不得超过2M");
  24.       //   return;
  25.       // }
  26.       let formFile = new FormData();
  27.       formFile.append("type", "0");
  28.       formFile.append("file", file);
  29.       let that = this;
  30.       if (frontOrBack == "front") {
  31.         Request.fetchByAuth2("engineer/upload?type=0", formFile, (res) => {
  32.           if (res.resultID == ResponseCode.Success) {
  33.             that.frontPhoto = res.data;
  34.           } else {
  35.             this.showMsg("上传失败");
  36.           }
  37.         });
  38.       } else if (frontOrBack == "back") {
  39.         Request.fetchByAuth2("engineer/upload?type=1", formFile, (res) => {
  40.           if (res.resultID == ResponseCode.Success) {
  41.             that.backPhoto = res.data;
  42.           } else {
  43.             this.showMsg("上传失败");
  44.           }
  45.         });
  46.       }
  47.     },
  51.       // 预览图片 react上
  52.     handleFile = () => {
  53.         let inputFile = document.getElementsByName('file')[0];
  54.         let file = inputFile.files[0];
  55.         let reader = new FileReader();
  56.         reader.readAsDataURL(file)
  57.         reader.onload = (event) => {
  58.             this.setState({
  59.               // 此处有多余参数
  60.                 showImg: event.target.result,
  61.                 imgType: file.type,
  62.                 imgSize: file.size,
  63.                 lastModifiedDate: file.lastModifiedDate,
  64.                 imgName: file.name,
  65.                 file: file
  66.             })
  67.         }
  68.     }

在ios设备上自动播放媒体音乐

  1. watch: {
  2.       // 在ios中，系统不会自动加载歌曲，所以，oncamplay不会自动执行，在pc和android系统会自动加载歌曲，oncamplay会自动执行
  3.           // 通过ondurationchange事件监听：当歌曲加载完成以后执行，因为只有歌曲加载完成以后，才能获取到（audio的生命周期种设置）
  4.     currentIndex() {
  5.       this.$refs.audio.ondurationchange = () => {
  6.         this.totalTime = this.$refs.audio.duration;
  7.         if (this.isPlaying) {
  8.           this.$refs.audio.play();
  9.         } else {
  10.           this.$refs.audio.pause();
  11.         }
  12.       };
  13.     },
  14. }

函数节流和函数防抖

  1. // 函数节流
  2. function throttle(fun, overTime) {
  3.   let oldTime = null;
  5.   return function () {
  6.     let newTime = + new Date()
  7.     if (newTime - oldTime > overTime || !oldTime) {
  8.       fun();
  9.       oldTime = newTime
  10.     }
  11.   }
  12. }
  14. let fun =()=>{
  15.   console.log('move')
  16. }
  17. let move = setInterval(throttle(fun,1000),100)
  19. // 函数防抖
  20. function debounce(fun, waitTime) {
  21.   var timer = null;
  22.   return function () {
  23.       var that = this
  24.       if (timer) {
  25.           clearTimeout(timer);
  26.           timer = null;
  27.       }
  28.       timer = setTimeout(function () {
  29.           fun.apply(that, arguments)
  30.       }, waitTime)
  31.   }
  32. }
  34. var fun = function () {
  35.   console.log('move')
  36. }
  38. setInterval(debounce(fun,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次

特殊细节

  1. '' == false // true
  2. 0 == false // true
  3. [] == false // true 
  4. {} == false //报错,symtaxerror
  5. null == false // false
  6. NaN == false // false
  7. undefined == false // false 
  8. const a == [1,2]
  9. const b == [1,2]
  10. const c == "1,2"
  11. a == b // false
  12. a == c // true
  13. null >= 0  null <= 0 // true
  14. null == 0  null < 0   null > 0 // false
  18. body {
  19.     -webkit-tap-highlight-color: rgba(0,0,0,0); // 处理按压时热区出现蓝色背景问题
  20. }

vue的sync修饰符
title:父子组件传递的值（函数名）
在子组件中调用this.$emit(‘updata:title’，要改变的值)
在父组件中可以使用:title.sync=”对应的变量名”

  1.     // 锚点跳转的地方        <br />hrefTo(id){<br />            document.getElementById(id).scrollIntoView();<br />        }

vscode把代码缩起来：ctrl+k + 0

el.getBoundingClientRect().right // 获取该dom右边距距离屏幕左边的距离
scrollIntoView() // 该元素滚动到某位置
MutationObserver // 接口提供了监视对DOM树所做更改的能力
IntersectionObserver // 对应元素进入页面

// 打印
@media print {
@page {
margin: 0;
}
body {
padding: 2cm;
}
}