Vue3+Element Plus中Input边框进行处理

(一) vue2+Element中对input进行修改

::v-deep.el-form{
    .el-input__wrapper{
        border:none; // 对边框进行修改
    }
}

（二）在Vue3+Element Plus 中有两个改动，

        1.首先是深度选择器的变动

// Vue2
::v-deep.el-from{
    .el-input__wrapper{
        /** 样式 */
     }
}

/v-deep/.el-from{
    .el-input__wrapper{
        /** 样式 */
     }
}


// Vue3
.el-from{
    :deep(.el-input__wrapper){
    }
}

 2.加一个特殊属性

.el-from{
 :deep(.el-input__wrapper){
    // 如果没有下面这一行样式的话 无法对border进行自定义修改
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    border: none; /* 对border进行样式修改 */
  }
}

总结：Element Plus 中对border进行自定义样式的话两个注意点： 1、深度选择器变化(vue3官方文档)  ::v-deep => :deep(类名){}  2、 ElementPlus 中需要加上 box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;