前端踩坑笔记
vue
el-image 如何显示本地图片
:src="require('@/assets/logo.png')"
锚点定位
// 模拟锚点跳转
goAnchor(selector) {
const d = document.getElementById(selector)
d.style['background-color'] = '#ddffff'
d.style['border-left'] = '6px solid #ccc'
d.style['border-left-color'] = 'rgb(204, 204, 204)'
d.style['border-color'] = '#2196F3'
d.scrollIntoView({
behavior: 'smooth'
})
}
lottie动画：lottie-web
目前遇到的问题：每个组件必须单独写，很麻烦（container只能对应一个节点）
npm i lottie-web -S
import lottie from 'lottie-web'
import * as anData from '@/assets/data-analysis.json'
<div id="lottie_box" ref="lottie_box" class="animation" />
this.animation = lottie.loadAnimation({
container: this.$refs.lottie_box, // document.getElementById('lottie_box'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: anData.default
})
lottie动画：vue-lottie（推荐用这个）
npm i vue-lottie -S
import Lottie from 'vue-lottie'
import * as anData from '@/assets/data-analysis.json'
components: { Lottie } // 或者使用：Vue.use(Lottie)
// 支持 @animCreated="handleAnimation" 事件
<lottie :options="options" :width="50" :height="50" />
// data
options: {
renderer: 'svg',
loop: true,
autoplay: true,
animationData: anData.default
}
anim: null // 通过anim对象，可以控制动画效果
// method
handleAnimation(anim) {
this.anim = anim
}
延迟加载组件：vue-lazy-render
https://github.com/HeftyKoo/vue-lazy-render
npm install vue-lazy-render
import LazyRender from 'vue-lazy-render/src/lazy'
Vue.use(LazyRender) // 或者页面中引用，使用components加载
<lazy-render :time="100">
<my-component></my-component>
</lazy-render>
跳转 & 参数
this.$nextTick(() => {
this.$router.push({
name: 'PerfTaskDetail',
query: {
taskId: row.id
}
})
})
this.$route.query.taskId
this.$nextTick(() => {
this.$router.push({
name: 'PerfTaskDetail',
params: {
taskId: row.id
}
})
})
this.$route.params.taskId
v-if、v-show等只有第一次生效，解决
// 在元素上绑定一个key,当key修改时,该DOM元素就会重新渲染
<template>
<div :key="once"></div>
</template>
export default{
data(){
return{
once:0,
}
},
methods:{
forceRerender(){
this.once +=1
}
}
}
或者，使用vue内置的forceUpdate方法：this.$forceUpdate()（我的没生效，不知道真假）
二维码：vue-qr
npm i vue-qr --save
<vue-qr :logoSrc="imageUrl" text="此处文本会自动转换为二维码" :size="200" />
<script>
export default {
name: "qrCode",
data() {
return {
imageUrl: require("../img/logo.png") // 二维码中间的icon图标
}
},
components: {
vueQr
}
}
}
</script>
js
css
vw、vh、rem、em
em 是一个相对长度单位。其相对于当前对象内文本的字体尺寸，。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- em 的值并不是固定的
- em 会继承父级元素的字体大小
其中，浏览器默认尺寸是16px，故body中的font-size: 16 * 62.5%=10px,而#app继承与父级元素10px * 1.2 = 12px，#footer继承与body 10px2=20px;而#app p继承与#app，此时1em=12px，故#app p中的font-size为12px1.2=14.4px
rem 与 em 类似，但是 rem 只相对于根元素，而 em 是相对于父元素
vw（Viewport Width）、vh（Viewport Height）是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。
- vw:1vw 等于视口宽度的1%
- Vh:1vh 等于视口高度的1%
- vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
- vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh
css hover 时触发
h2 {
font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
clear: both;
background-color: #ebf6ff;
margin-bottom: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 20px;
margin-left: 20px;
border-left: 3px solid #46a6ff;
padding-left: 20px;
font-size: 20px;
border-radius:0px;
color: #46a6ff;
}
h2:hover {
text-decoration: none;
margin-left: 40px;
background-color: #ffebff;
color: #ff00ff;
border-left: 3px solid #ff00ff;
}
h2:active {
transition: all 0.4s linear 0s;
}
display
没种html元素都会有一个默认的display属性，比如div默认是block，a默认是inline
none
隐藏，也不占用空间
block
块级元素，元素前后带换行符
可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始
inline
内联元素，元素前后无换行符，width根据宽度适应
高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行
inline-block
行内块元素，元素前后无换行符
设置该属性后，其他的行内块级元素会排列在同一行
使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐
