一直在基于 vue-element-plus-admin (以下简称这个框架)开发 web。
这个框架的作者在 template 写 element-plus 组件时,一直用的大驼峰写法。
比如按钮,他写作 ElButton,其实写成 el-button 也是可以的,毕竟 element-plus 官方的实例代码都是这种小写。
一直也搞不明白这两种写法有什么区别。
所以写的时候大小写就混着用了。
这个框架封装了一个卡片样式的组件,名叫 ContentWrap,其实里边就是个 ElCard(el-card)。
ElCard 有个默认的圆角,很小。
我们的项目需要一个大一点的圆角,我就在 ContentWrap.vue 文件的 style 中写了如下代码。
<style>
.el-card {
border-radius: 10px;
}
</style>
本地 npm run dev
运行项目,达到期望的效果。
结果过几天项目打包上线后,发现卡片的圆角是默认的。
看来 style 中的设定没起作用,猜测可能是大小写的问题。
为了稳妥,只好把 style 写到标签里了。
<ElCard style="border-radius: 10px">
本地效果正常,打包上线后效果也正常。