更改样式名字每个组件对应自己样式名,避免样式串
This commit is contained in:
parent
7f4f5361d2
commit
60ecb88f38
@ -28,7 +28,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<!-- 自定义展示内容 根据需要自定义就好了-->
|
<!-- 自定义展示内容 根据需要自定义就好了-->
|
||||||
<template #date-cell="{ data }">
|
<template #date-cell="{ data }">
|
||||||
<div class='holiday'>
|
<div class='holidayHy'>
|
||||||
<span style="font-size: 14px">
|
<span style="font-size: 14px">
|
||||||
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
||||||
</span>
|
</span>
|
||||||
@ -205,7 +205,7 @@ onMounted(()=> {
|
|||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
/* 隐藏滚动条 */
|
/* 隐藏滚动条 */
|
||||||
.holiday::-webkit-scrollbar {
|
.holidayHy::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
/*今天显示为其他颜色*/
|
/*今天显示为其他颜色*/
|
||||||
@ -234,7 +234,7 @@ onMounted(()=> {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
/*设置日历格子内 超出内容不换行 超出内容显示为省略 内容超出大小是可以滚动*/
|
/*设置日历格子内 超出内容不换行 超出内容显示为省略 内容超出大小是可以滚动*/
|
||||||
.holiday {
|
.holidayHy {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
<template #date-cell="{ data }">
|
<template #date-cell="{ data }">
|
||||||
<div
|
<div
|
||||||
class='holiday'
|
class='holidayRc'
|
||||||
>
|
>
|
||||||
<span style="font-size: 14px">
|
<span style="font-size: 14px">
|
||||||
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
||||||
@ -171,7 +171,7 @@ onMounted(()=> {
|
|||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
/* 隐藏滚动条 */
|
/* 隐藏滚动条 */
|
||||||
.holiday::-webkit-scrollbar {
|
.holidayRc::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
/*今天显示为其他颜色*/
|
/*今天显示为其他颜色*/
|
||||||
@ -199,7 +199,7 @@ onMounted(()=> {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
//每个各自展示的内容
|
//每个各自展示的内容
|
||||||
.holiday {
|
.holidayRc {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -2,10 +2,10 @@
|
|||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
|
|
||||||
<el-button-group style="display: flex; justify-content: space-between;">
|
<el-button-group style="display: flex; justify-content: space-between;">
|
||||||
<el-button size="small" @click="selectDate(-1)">上年</el-button>
|
<el-button size="large" @click="selectDate(-1)">上年</el-button>
|
||||||
<el-button size="small" @click="toYear()">今年</el-button>
|
<el-button size="large" @click="toYear()">今年</el-button>
|
||||||
<el-button size="small" @click="selectDate(1)">下年</el-button>
|
<el-button size="large" @click="selectDate(1)">下年</el-button>
|
||||||
<el-button size="small" @click="getListDate()">刷新</el-button>
|
<el-button size="large" @click="getListDate()">刷新</el-button>
|
||||||
<!-- <el-button size="small" @click="createDate()">创建</el-button>-->
|
<!-- <el-button size="small" @click="createDate()">创建</el-button>-->
|
||||||
</el-button-group>
|
</el-button-group>
|
||||||
|
|
||||||
@ -29,7 +29,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #date-cell="{ data }">
|
<template #date-cell="{ data }">
|
||||||
<div @click="handleSelect(data)" :class="{ 'holiday': holidayDate[data.day]?.isWorkday }">
|
<div @click="handleSelect(data)" :class="{ 'holidayWork': holidayDate[data.day]?.isWorkday }">
|
||||||
<span style="font-size: 14px">
|
<span style="font-size: 14px">
|
||||||
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
||||||
</span>
|
</span>
|
||||||
@ -173,7 +173,7 @@ onMounted( async ()=> {
|
|||||||
.custom-calendar .el-calendar-day {
|
.custom-calendar .el-calendar-day {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 !important;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-calendar .is-today {
|
.custom-calendar .is-today {
|
||||||
@ -182,7 +182,7 @@ onMounted( async ()=> {
|
|||||||
background-color: #f56c6c;
|
background-color: #f56c6c;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.holiday {
|
.holidayWork {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #15bc83;
|
background-color: #15bc83;
|
||||||
|
Loading…
Reference in New Issue
Block a user