样式穿透
形成的原因:父组件的样式用了scoped,而想用对子组件内部的样式进行调节,可以用/deep/;
注意,是子组件内部,子组件最外层除外。
父组件对子组件的样式控制:
父组件的样式就算用了scoped,也可以对引入的子组件的最外层元素样式进行控制。
子组件最外层通常用xx-container作为class;
父组件中,可以用xx-container来控制子组件的最外层,
其实样式穿透产生的原因,首先是子元素本身的样式没有设计好。比如让子元素宽高占比都是百分比,则父元素可以用合适的尺寸元素来盛子元素。
scale占位
当想实现hover某个元素,然后弹出一个二维码,我将二维码先scale(0),在hover后将scale(1), 但是虽然二维码没有,此时scale是0,hover在二维码的位置,还是会弹出,可见scale真实的绘画位置是原来的位置,变成0只是缩小了而已,其他位置不变
绝对路径:
引入组件尽量用@这种,而不是用../这中,因为有可能将组件整体移动到另一个组件里,这时候相对路径就会出错
重要的样式问题
组件的宽度由谁决定,假设由a组件,引入了b组件和c组件和d组件。如果实现两侧固定中间随页面宽度放缩,谁决定款?
后来我发现,把组件b,c,d的宽度都设置成百分百。在a中可以控制bcd的最外层宽度。或者定义一个插槽组件,引入bcd分别放到三个插槽中,在插槽组件中规定宽度,然后将插槽组件引入a。
引入静态资源
比如:img的src,两种方式:
1.直接引入‘@/assets/loading.svg’,这中方式,webpack会直接处理;
2.将资源作为模块引入:
import loading from '@/assets/loading.svg',将资源作为data,img标签中:src='loading'
以下两种方式都可以。
<template> <!-- <img class="loading-container" :src='loading' /> --> <img class="loading-container" src='@/assets/loading.svg' /> </template> <script> // import loading from '@/assets/loading.svg' export default { data(){ return{ // loading } } };
静态资源的assets文件夹里的文件,经过npm run build命令,都会被打包到dist目录下的img目录的内容
无论以上两种方式,都能够经过webpack打包,生成真实的路径,并不出现错误,assets目录会消失。
注意: 动态引入静态资源如果直接从data中引入会出错
如果以下方式动态引入静态资源
<template> <img class="loading-container" :src='loading' /> <!-- <img class="loading-container" src='@/assets/loading.svg' /> --> </template> <script> // import loading from '@/assets/loading.svg' export default { data(){ return{ // loading loading: '@/assets/loading.svg'//这个loading是动态引入的 } } };
此时,:src=xxx是一个变量,是动态内容,分析模板时候,webpack分析不出来,只是知道,src来自于一个变量,并不知道这个变量的值是什么,没法进行分析。如果有必要用值这种,可以用第二种方式,利用fileloade,先 import 进来img,这个img就是打包好的资源了,再把资源的值给data的内容。