el-drawer的title部分怎么把标题变成加黑加粗的字体
时间: 2024-10-19 15:03:39 浏览: 26
要将el-drawer的title部分变成加黑加粗的字体,你可以使用CSS样式来实现。具体操作如下:
1. 首先,在你的Vue组件中定义一个`<style>`标签,用于编写自定义样式。
2. 在`<style>`标签内,编写一个CSS类,例如`.bold-title`,并设置`font-weight`属性为`bold`。
3. 将这个CSS类应用到你的el-drawer组件的title部分。
以下是一个示例代码:
```html
<template>
<div>
<el-drawer :visible.sync="drawer" :show-close="false">
<div slot="title" class="bold-title">我的标题</div>
<span>这里是抽屉的内容</span>
</el-drawer>
<el-button @click="drawer = true">打开抽屉</el-button>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false
};
}
};
</script>
<style scoped>
.bold-title {
font-weight: bold;
}
</style>
```
在这个示例中,我们创建了一个名为`.bold-title`的CSS类,并将其应用到了el-drawer的title部分。这样,标题就会显示为加黑加粗的字体。
阅读全文