Ant Design of Vue 中的Card 卡片的headStyle和bodyStyle设置
从官网上可以看到Card的相关使用和APIhttps://vue.ant.design/components/card-cn/这里可以看到headStyle 和 bodyStyle 的类型都是object,但是为它赋值的需要注意一些问题。如果只设置一个样式,可以直接在行内写<a-card title="title" :bordered=false :headStyle="...
·
从官网上可以看到Card的相关使用和API https://vue.ant.design/components/card-cn/
这里可以看到headStyle 和 bodyStyle 的类型都是object,但是为它赋值的需要注意一些问题。
如果只设置一个样式,可以直接在行内写
<a-card title="title" :bordered=false :headStyle="{color:'#0785fd'}" :bodyStyle="{padding:'0'}"></a-card>
但是如果要设置多个CSS样式这样的书写方式就会报错出问题了
解决办法:(以headStyle为例)
在js中定义一个变量,再将变量值赋予headStyle即可
html:
<a-card title="title" class="bg" :bordered=false :headStyle='tstyle'></a-card>
js:
<script>
export default {
data() {
return {
tstyle:{"color": "#0785fd","font-weight": "bold"}
}
},
methods: {
}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)