この記事の例では、参考のためにvueカスタムオプションタイムカレンダーコンポーネントの具体的なコードを共有しています。具体的な内容は次のとおりです。 カレンダーの機能: 1. 過去の時間は選択できません 効果画像:-------ショーを始めましょう----------- **まず、カレンダーページのレイアウトを描きます。win10システムのカレンダーレイアウトを参照してください* 6行7列、なぜそうなるのか、自分で理解してください...*私も「覗いてみた」 beginDay は現在の月の最初の日の曜日、prevMdays は前月の合計日数、nowMdays は現在の月の合計日数です。これにより、カレンダー表示効果が実現され、データ日付などの使用される可能性のある一部のデータがタグにバインドされます。 <div class="dateContent-body-day" v-for="item in 42" :key="item"> <div v-if="item - beginDay > 0 && item - beginDay <= nowMdays" :class="{ 'active-day': `${year}/${month}/${item - beginDay}` == curDate }" @click="dayHandler" :data-year="年" :data-month="月" :data-day="アイテム開始日" :data-dates="年 + '/' + 月 + '/' + (項目 - 開始日)" > {{ アイテム開始日 }} </div> <div class="other-day" v-else-if="item - beginDay <= 0"> {{ item - beginDay + prevMdays }} </div> <div class="other-day" v-else>{{ item - beginDay - nowMdays }}</div> </div> - 次… 使用されたデータ: *active-day はハイライト表示された日、つまり選択された日付です。curDate はどの日を選択するかを制御します。ここではデフォルトは今日です。props データ timeArry が開かれ、一部のカスタム日付を選択不可として渡すことができます。クリックされた日付にバインドされた日付が配列内に存在する場合、その日付が返されます。選択可能な場合、選択された結果は $emit を介して chooseDate イベントで公開されます。 //クリックして日を切り替える dayHandler(e) { コンソールログ(e); var daNum = e.target.dataset; (this.cantTime.indexOf(daNum.dates) > -1) の場合 { this.$toast("オープン日ではないため、選択できません"); 戻る; } もし ( `${daNum.年}/${daNum.月}/${daNum.日}` >= `${新しい日付().getFullYear()}/${新しい日付().getMonth() + 1}/${新しい日付().getDate()}` ){ ターゲットデータセットの日付。 これを$emit( 「日付を選択」、 this.year + "/" + this.month + "/" + this.date ); } それ以外 { this.$toast("過去の時間は選択できません"); } }, //次の月に切り替える``nextMonth() { (今月 == 12) の場合 { this.month = 1; this.year++; } それ以外 { this.month++; } }, 月と日の切り替えを観察する必要があります。月の変化を観察することに重点を置いています。時計が乱用されたかどうかはわかりません。 ```javascript 時計: 日付(val, oldval) { if (値) { this.curDate = `${this.year}/${this.month}/${this.date}`; } }, 月(val, oldval) { if (値) { var 日付; (var i = 1; i <= 31; i++) の場合 { console.log(`${this.year}/${this.month}/${i}`); (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) の場合 { console.log("値が存在しません。停止してください。日付は " + i のままです); 日付 = i; 壊す; } } console.log(ndate, `${this.year}/${this.month}/${ndate}`); //現在の月と現在の日を比較します。将来の月のデフォルトは1で、現在の月のデフォルトは今日です( `${this.year}/${this.month}/1` > `${新しい日付().getFullYear()}/${新しい日付().getMonth() + 1}/${新しい日付().getDate()}` ){ this.curDate = `${this.year}/${this.month}/${ndate}`; this.date = ndate; } それ以外 { (var i = new Date().getDate(); i <= 31; i++) { console.log(2`${this.year}/${this.month}/${i}`); (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) の場合 { this.curDate = `${新しい日付().getFullYear()}/${新しい日付().getMonth() + 1}/${i}`; this.date = i; 壊す; } } } これを$emit( 「日付を選択」、 this.year + "/" + this.month + "/" + this.date ); } } }, 親コンポーネントで呼び出される <calendar :timeArray="timeArray" @chooseDate="chooseHandler"></calendar> '@/components/index.js' から {calendar,alertBox} をインポートします。 エクスポートデフォルト{ コンポーネント:{カレンダー、アラートボックス }, これでカレンダーは完成です。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用
>>: MySQL データベースの 1045 エラーの解決方法
序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...
目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...
パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
pingスキャンをオフにする(役に立たないが)まずルートに切り替えるエコー 1 > /proc...
目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...
ps コマンドを使用できます。プロセスの PID など、現在実行中のプロセスに関する関連情報を表示で...
目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...
I. はじめにDockerテクノロジーは現在非常に人気があります。コンテナを介してプロジェクト環境を...
サーバーに複数のサイトを展開するには、異なるサイトにアクセスするために複数のポートを開く必要がありま...
序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...
この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...
画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...