当前位置: 首页 > 工具软件 > Muse-UI > 使用案例 >

muse-ui Date Picker 使用slot自定义提示圆点

许彦
2023-12-01

<mu-paper :z-depth="1" class="demo-date-picker">
                                <mu-date-picker landscape :date.sync="date">
                                    <template slot="day" slot-scope="{ selected, date, disabled, now}">
                                        <div class="mu-day-button-bg">1</div>
                                        <div class="mu-day-button-content"></div>
                                        <span class="mu-day-button-text">{{date.getDate()}}</span>
                                        <span  v-if="date.getDate() === 6
                                        || date.getDate() === 7
                                        || date.getDate() === 8
                                        || date.getDate() === 9" class="day-dot"></span>
                                    </template>
                                </mu-date-picker>
                            </mu-paper>

 


 /deep/ .mu-datepicker-monthday-row{
        .day-dot{
            position: absolute;
            top: 27px;
            left: 19px;
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background-color: #2ba4ff;
        }

    }

 

 类似资料: