VUE CSS styles penetration
1. The origin of the problem
In doing APP project two H5, pre micro letter officially recommended weui component library. Later, due to the rendering result is not satisfactory, the component is not rich, after the final completion of the project to upgrade all uses have praised the development of the vantcomponent library. While WebPACK smooth upgrade from 3-4 (project structure webpack + vue + vuex + vue- router + vant + less). TOB do believe a lot of my friends would choose to develop smoothly component library. Component library built a lot of style, to facilitate our developers, but because of the height of the package, and sometimes give us a little bit of trouble. For example, when using vantthe component library annular progress bar when viewing the official document, there is a change progress bar color , change has become the color of the track , but also to change the fill color . That did not change the display color of the text. Coincidentally, our demand is to change the text color . How to do it? Write a css does not like it.
2. Writing Style
To illustrate, I specifically for this article with a test demo. Micro-channel public concern number is not small] [small courtyard, reply vuescoped, can be obtained. If you are initialized now also a Vue project, and introduced vant component libraries we need. Next, we create a single-file assembly CssScope.vue in the components folder. The basic code is as follows:
// wx:464884492
<template>
<div><van-circle v-model="currentRate" :rate="90" :speed="100" :text="text" /></div> </template> <style lang="less" scoped> </style> <script>...</script>Compile and run, we will see in the browser a progress of 90% of the circular progress bar. Of course, display text 90% of the display is black, now we have to change it.
Initially we thought that the text color color can be inherited from the parent, so we wrote the following css styles in the Style tag:
// wx:464884492
<style lang="less" scoped> .van-circle{color:blue;} </style>Back to the browser, text color has not changed. Chrome by opening Tools, we find the circular progress bar. Only to find the original, the interior component is composed of a div tag and svg, svg graphics for displaying us, div used to display text. And there is a class in the van-circle__text div. According css priority, font color, we have just the parent set is not valid. Find the cause, it is easier to handle. We need to define the class selector in the Style tag and set its font color to blue. So we just wrote to delete the style, rewritten as follows:
// wx:464884492
<style lang="less" scoped> .van-circle{ .van-circle__text{olor:blue;} } </style>This time should be, and be back to the browser, the effect remains. Black, or black. At this point, back to the chrome, we find elements in developer tools. Careful you discover, display text labels and its parent does not seem like a few data-v-xxxproperties. Perhaps the style of scoped dirty tricks, then we get rid of. Back to the browser, text color actually changed. The joy I always felt where not? We have to look up the Kelpiescoped
Scoped magical effect 3. Style of
Our project uses Lessa CSS preprocessor language. Style accustomed scoped attribute with a tag in the assembly, the effect scoped properties, that is, the compiler package, add a uniform random property (lower data-v-97a9747e one can see in the current component Tags )As shown below:
Css will be compiled for the property plus the random
In the back there again we solve problems, we removed the scopedpost, Style label inside the style becomes global, and this is not the result we want. The reason is not in effect, the above two figures, have a glance. We have to penetrate it. How do? Find documentation? I remember looking at the vue-loader.
4. Depth acting selector
Learned from the official document, we call penetration, the official called the depth selector. How to use it? That is, we want to penetrate the selector >>> add or front / deep / or :: v-deep. >>> The official also said that there may be a problem, with the latter two recommendations, we use less, on the choice / deep / Okay, so we add back scoped attributes just deleted in style and modify the code as follows:
<style lang="less" scoped>
.van-circle { /deep/ .van-circle__text { color: blue; } } </style>Back to the browser, color change, you're done. However, we still have to double-check inspection, found css generated again, as shown below:
Right, not wrong, it is the result we want.
4. Summary
Write code, look into the problem, have to find the right path. With other people's things, you see more of the corresponding official documents.
I welcome interested friends concerned about the micro-channel subscription number, "small hospital no small", or click on the two-dimensional code concerns below. I will be difficulties encountered in development for many years, as well as some interesting features, the experience will be 11 to publish my subscription number. Need paper demo can reply in public No. vuescoped
Original: https://www.cnblogs.com/yfrs/archive/2019/09/12/vuescoped.html