在vue3中,使用组件自己的属性,调整a标签组件的文本大小粗细,并设置字体为黑体
时间: 2023-05-19 11:07:19 浏览: 141
可以使用以下代码实现:
```html
<template>
<a :style="{ fontSize: fontSize, fontWeight: fontWeight, fontFamily: '黑体' }">
{{ text }}
</a>
</template>
<script>
export default {
props: {
text: {
type: String,
default: 'Hello World'
},
fontSize: {
type: String,
default: '16px'
},
fontWeight: {
type: String,
default: 'normal'
}
}
}
</script>
```
在组件中定义了三个属性:text、fontSize、fontWeight,分别表示文本内容、字体大小和字体粗细。在模板中,使用了动态绑定的方式将这些属性应用到 a 标签上。注意,字体名称需要使用中文名称,而不是英文名称。
阅读全文