Vue3+Element Plus中Input边框进行处理
vue3+elementplus 使用遇到的问题及解决方法
·
(一) 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;
更多推荐
已为社区贡献1条内容
所有评论(0)