vue プロジェクトの開発では、色の一貫性と調整を維持し、CSS のみを変更する場合は、el-date-picker ドロップダウン リストでデフォルトで選択されている色、選択ボックスの色を変更する予定です。 、色を変更することはできません。特定の変更を行う必要があります。
変更されたエフェクト
サンプルソースコード（全52行）
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-08-21
*/
<template>
<div class="container">
<h3>vue+elementUI：el-date-picker 修改选中项的颜色 </h3>
<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:append-to-body='false'>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: ''
}
}
}
</script>
<style scoped>
/deep/ .el-date-table td.current:not(.disabled) span {
color: #FFF;
background-color: #ff0000;
}
/deep/ .el-date-table td.today span {
color: #ff0000;
font-weight: 700;
}
/deep/ .el-input.is-active .el-input__inner,/deep/ .el-input__inner:focus {
border-color: #ff0000;
outline: 0;
}
.container {
width: 1000px;
height: 540px;
margin: 50px auto;
border: 1px solid orange;
}
.author{
line-height: 30px; border-bottom:1px solid #ddd; margin-bottom: 20px;}
</style>
主要なコンテンツの手順:
(1) スタイルを変更する
/deep/ .el-date-table td.current:not(.disabled) span {
color: #FFF;
background-color: #ff0000;
}
/deep/ .el-date-table td.today span {
color: #ff0000;
font-weight: 700;
}
/deep/ .el-input.is-active .el-input__inner,/deep/ .el-input__inner:focus {
border-color: #ff0000;
outline: 0;
}
(2)パラメータの追加
変更後は有効になりません。el-date-picker に属性を追加します: append-to-body='false'。
(append-to-body: body要素にポップアップボックスを挿入するかどうか。ポップアップボックスの配置に問題がある場合、このプロパティをfalseに設定できます)
列の目標
このコラムでは、vue と要素 UI の共同技術スタックの制御の下で、柔軟な使用を実現するための効果的なソース コード例と情報ポイントの紹介を提供します。
(1) vue2 のいくつかの基本操作を提供します: インストール、参照、テンプレートの使用、計算、監視、ライフサイクル (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured、components、)、 $root 、 $parent 、 $children 、 $slots 、 $refs 、 props、 $emit 、eventbus 、provide / inject、Vue.observable、$listeners、$attrs、$nextTick 、v-for、v-if、v-else 、v-else-if、v-on、v-pre、v-cloak、v-once、v-model、v-html、v-text、キープアライブ、スロット スコープ、フィルター、v-bind、。 stop、.native、ディレクティブ、ミックスイン、レンダリング、国際化、Vue Router など。
（2） 提供要素 UI の经典操作：インストール、参照、国际化、el-row、el-col、el-button、el-link、el-radio、el-checkbox、el-input、el-select、el -cascader、el-input-number、el-switch、el-slider、el-time-picker、el-date-picker、el-upload、el-rate、el-color-picker、el-transfer、el-form 、el-table、el-tree、el-pagination、el-badge、el-avatar、el-skeleton、el-empty、el-descriptions、el-result、el-statistic、el-alert、v-loading、$メッセージ、$alert、$prompt、$confirm、$notify、el-breadcrumb、el-page-header、el-tabs、el-dropdown、el-steps、el-dialog、el-tooltip、el-popover、el- Popconfirm、el-card、el-carousel、el-collapse、el-timeline、el-divider、el-calendar、el-image、el-backtop、v-infinite-scroll、el-drawer など