Modify the pop-up window style and throw the css style file to the global

Modify the style of the pop-up window (pop-up windows generally add a dom directly to the body)

Therefore, for these DOMs added later, the styles need to be added to the global CSS to take effect. However, in a multi-person collaborative project, you cannot change the common module at will, because it may be maintained by another person. You can only write code in your own subkeys

 <el-popover
          trigger="click"
          width="242"
          placement="bottom"
         popper-class="default-map-warning-content"
 ></el-popover>

insert image description here
The solution (write another style tag in your own .vue file):

<style scoped lang="less">
.....................
....................
</style>
<style lang="less">
  .default-map-warning-content{
    
    
    padding: 6px !important;
    left: 1570px !important;
    color: #000 !important;
    opacity: 0.7 !important;
    .popper__arrow{
    
    
      left: 23px !important;
    }
  }
</style>

Guess you like

Origin blog.csdn.net/weixin_43131046/article/details/123252730
Recommended