前端踩坑笔记
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;来使元素顶部对齐
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步