前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何修改vant dialog title 的样式

如何修改vant dialog title 的样式

原创
作者头像
xyzzz
修改2020-12-14 10:56:58
6.5K0
修改2020-12-14 10:56:58
举报
文章被收录于专栏:前端学习。前端学习。

要求:修改vant dialog title 中的日期样式。本来是用dialog组件的title属性,一改就会把整个title的样式改掉。

页面效果

解决:使用slot

代码

代码语言:javascript
复制
<van-dialog v-model="dateTimePickerShow" show-cancel-button>
      <slot name="title"><span style="margin:30px;height:20px;display:block;font-size:17px">选择时间:<span style="color:blue;padding-left:5px">{{ datepickerTitle }}</span></span></slot>
      <van-divider />
      <van-datetime-picker
        v-model="currentDate"
        :show-toolbar="false"
        type="datetime"
      />
    </van-dialog>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档