修改el-popover的样式

5,330 阅读1分钟

image.png

<el-popover placement="bottom-start" width="auto" trigger="manual" 
    content="请输入请假原因" 
    v-model="reasonvisible">
       <textarea rows="6" style="width:99%;border:none;font-size:14px;color:#333;resize:none;" 
           placeholder="请输入请假原因" 
           slot="reference"
           v-model="ruleForm.reason"
        ></textarea>
</el-popover>

修改el-popover的样式时不能有scoped,所以要新写一个全局style,el-popover是和app同级的,所以scoped的局部属性设置了无效

<style>
.el-popover {
  background: rgb(235, 142, 142);
  color: #fff;
  min-width: 100px;
}
.el-popover--plain {
  padding: 5px 5px;
}
.el-popper[x-placement^=bottom] {
  margin-top: 10px;
}
.el-popper[x-placement^=bottom] .popper__arrow:first-child::after  {
  border-bottom-color: rgb(235, 142, 142);
  left: -80px; //修改箭头的位置
}
</style>