最近在帮一个朋友做基于vue的前端界面开发,在开发的过程中遇到一个问题:清除iview框架中Input控件的边框
实现的步骤:
1 在组件文件中添加如下所示的代码
<template> <div class="test"> <Input placeholder="Enter something..." clearable='true' style="width: 300px"></Input> </div> </template>
2、增加作用于全局的css样式代码
<style> .test .ivu-input { border: none; outline: medium; } .test .ivu-input:focus { border: none; outline: medium; box-shadow: none; } .test .ivu-input:hover { border: none; outline: medium; box-shadow: none; } </style>
千万不要写成 <style scoped>
3、去除边框前后的效果图对比
去除前:
去除后: