技术栈:Vue3 TypeScript Vite Vant
1.在template中的布局
<div class="box">
<van-nav-bar
left-arrow
@click-left="onClickLeft"
fixed
title="注册"
right-text="注册"
@click-right="onClickRight"
></van-nav-bar>
</div>
2. 当我们在style标签中需要改变vant组件的样式时,需要使用到深度选择器
背景:scope样式私有化,避免样式冲突
原理:在css中使用过选择器的选择过元素 (组件下)元素生成添加一个属性 => data-v-hash值 webpack或vite打包时自动生成添加
3. 深度作用选中符语法:原理就是提高选择器的权重,权重不够再使用 !important
vue2: /deep/
vue2: 使用Sass时 ::v-deep 类名{ }
vue3: ::v-deep()
/**
写法:
1. ::v-deep() 类名 {}
2. ::v-deep() { 类名:样式 }
*/
.box {
// 当我们选择了 box这个类名,经过vite打包会给box这个元素添加 自定义属性=哈希值
// 在浏览器中查看: .box[data-v-20207095] { border: 2.85714vw solid blue; }
border: 2px solid red;
}
::v-deep() {
// 而 .van-nav-bar这个类名没有添加样式,所以这个元素不会添加 自定义属性
.van-nav-bar {
// 而.van-nav-bar__arrow这个元素会被添加自定义属性,因为选择到了这个元素
// 在浏览器中查看: [data-v-cd3f3966] .van-nav-bar__arrow { font-size: 5.14286vw; }
&__arrow {
font-size: 18px;
color: var(--cp-text1);
}
&__text {
font-size: 15px;
}
}
}
// &指外层父拼接类名: van-nav-bar__arrow
// &指外层父拼接类名: van-nav-bar:hover
4. 元素的自定义属性不存在,解决:
/**
情况一 :元素身上有 data-vhash 属性,可以直接修改元素的样式,不需要深度选择器
.van-nav-bar {
border:3px solid red
}
情况二 :元素身上没有 data-v-hash 属性,需要使用深度选择器
深度选择器语法1:
::v-deep() .van-nav-bar {
border:3px solid red
}
深度选择器语法2:
::v-deep() {
.van-nav-bar {
border: 3px solid red;
}
}
*/