Vue カスタム オプション時間カレンダー コンポーネント

Vue カスタム オプション時間カレンダー コンポーネント

この記事の例では、参考のためにvueカスタムオプションタイムカレンダーコンポーネントの具体的なコードを共有しています。具体的な内容は次のとおりです。

カレンダーの機能:

1. 過去の時間は選択できません
2. 選択できない時間をカスタマイズ可能
3. 当月のデフォルトの表示日は1日、他月の1日は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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはカレンダーコンポーネントを実装します
  • Vue は垂直方向の無限スライドカレンダーコンポーネントを実装します
  • Vueカレンダーコンポーネントのカプセル化方法
  • Vueカレンダーコンポーネントをゼロから作成する
  • Vue の要素カレンダー コンポーネントを使用したサンプル コード
  • Vue2-Calendar をベースにしたカレンダー コンポーネントの改善 (中国語の説明を含む)
  • Vueはクールなカレンダーコンポーネントを実装します
  • VUEはカレンダーコンポーネント機能を実装します
  • 手書きカレンダーコンポーネントのVueバージョン

<<:  MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

>>:  MySQL データベースの 1045 エラーの解決方法

推薦する

MySQL InnoDB テーブルスペース暗号化の例の詳細な説明

序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...

MySQL SQL ステートメント分析とクエリ最適化の詳細な説明

パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

Centos7サーバーの基本的なセキュリティ設定手順

pingスキャンをオフにする(役に立たないが)まずルートに切り替えるエコー 1 > /proc...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

Linux で実行中のすべてのプロセスを表示する方法

ps コマンドを使用できます。プロセスの PID など、現在実行中のプロセスに関する関連情報を表示で...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

Zookeeperスタンドアロン環境とクラスタ環境の構築

1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...

Django+Mysql+Redis+Gunicorn+NginxのDockerデプロイメントの実装

I. はじめにDockerテクノロジーは現在非常に人気があります。コンテナを介してプロジェクト環境を...

マルチポートおよびマルチドメイン名アクセスのNginx構成の実装

サーバーに複数のサイトを展開するには、異なるサイトにアクセスするために複数のポートを開く必要がありま...

CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...

MySQLでトリガーを作成する方法

この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...

HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法

画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...

Dockerfile を使用して Docker でイメージを構築する方法

イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...