Ant Design of Vue 中的Card 卡片的headStyle和bodyStyle设置

从官网上可以看到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>
发布了25 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_40425415/article/details/101537089
今日推荐