Vue が価格カレンダー効果を実現

<テンプレート>
  <div スタイル="width:600px">
    <ele-calendar
      :render-content="レンダリングコンテンツ"
      :data="日付定義"
      :prop="プロパティ"
      :disabledDate="無効日付"
      :effectiveTimeLimit="実効時間制限"
      :defaultValue="デフォルト値"
    >
    </ele-calendar>
  </div>
</テンプレート>

<スクリプト>
'ele-calendar' から eleCalendar をインポートします
'ele-calendar/dist/vue-calendar.css' をインポートします。
エクスポートデフォルト{
  小道具: {
    日付定義: {
      タイプ: 配列、
      デフォルト: () => {
        戻る []
      }
    },
    デフォルト価格: {
      タイプ: 文字列、
      デフォルト: () => {
        戻る ''
      }
    },
    有効時間制限:
      タイプ: 文字列、
      デフォルト: () => {
        戻る ''
      }
    },
    デフォルト値: {
      タイプ: 日付、
      デフォルト: () => {
        新しい日付を返す()
      }
    }
  },
  データ （） {
    const 自己 = これ
    戻る {
      prop: 'date', // 対応する日付フィールド名 disabledDate: date => {
        戻る （
          date.valueOf() < 新しい Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
          date.valueOf() > 新しい Date(self.effectiveTimeLimit).valueOf()
        ）
      }
    }
  },
  コンポーネント:
    eleCalendar
  },
  メソッド: {
    //JSX構文 renderContent (h, parmas) {
      const 自己 = これ
      定数ループ = データ => {
        戻る （
          <div class={data.defvalue.value ? 'active' : ''}>
            <div>{data.defvalue.text}</div>
            <div>
              ￥
            <i入力
              値={
                データ.defvalue.value.content
                  ? データ.defvalue.value.content
                  : 自己デフォルト価格
              }
              on-on-blur={イベント =>
                自己.handleChange()
                  イベント、
                  データ.defvalue.value
                    ? データ.defvalue.value.date
                    : self.handleDate(data.defdate)
                ）
              }
              無効={
                データ.defvalue.value
                  ? 新しい Date(data.defvalue.value.date).valueOf() <
                        新しい Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
                      新しい Date(data.defvalue.value.date).valueOf() >
                        新しい日付(self.effectiveTimeLimit).valueOf()
                  : data.defdate.valueOf() <
                        新しい Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
                      データ.defdate.valueOf() >
                        新しい日付(self.effectiveTimeLimit).valueOf()
              }
              キー={
                データ.defvalue.value
                  ? データ.defvalue.value.date
                  : self.handleDate(data.defdate)
              }
            />
            </div>
          </div>
        ）
      }
      戻り値 <div style='min-height:60px;'>{loop(parmas)}</div>
    },
    handleChange (イベント、日付) {
      console.log(イベント、日付、'dddddd')
      const 自己 = これ
      定数インデックス = self.datedef.findIndex(item => {
        戻り値 item.date === date
      })
      if (isNaN(イベント.ターゲット.値)) {
        self.$Message.error('正しい価格を入力してください')
        イベント.ターゲット.値 = self.defaultPrice
        戻る
      }
      if (event.target.value && index === -1) {
        イベントターゲット値 === self.defaultPrice の場合 {
          戻る
        }
        自己.datedef.push({
          日付、
          コンテンツ: イベント.ターゲット.値、
          cid: ヌル
        })
        コンソールにログ出力します。
        this.$emit('aaa', self.datedef)
      } そうでない場合 (event.target.value && index !== -1) {
        イベントターゲット値 === self.defaultPrice の場合 {
          self.datedef.splice(インデックス、1)
          戻る
        }
        const selectItem = self.datedef[インデックス]
        selectItem.content = イベントターゲット値
        self.datedef.splice(インデックス、1、選択項目)
      } そうでない場合 (!event.target.value && index !== -1) {
        self.datedef.splice(インデックス、1)
      } それ以外 {
        イベント.ターゲット.値 = self.defaultPrice
      }
    },
    handleDate (日付) {
      定数年 = date.getFullYear()
      月 = date.getMonth() + 1 とします。
      月 = 月 >= 10 ? 月 : '0' + 月
      idate = date.getDate() とします。
      idate = idate >= 10 ? idate : '0' + idate
      `${year}-${month}-${idate}` を返します
    }
  }
}
</スクリプト>

<スタイル lang="scss">
.el-picker-panel-calendar.el-date-picker-calendar.el-popper {
  ボックスシャドウ: なし;
}
.el-date-table-calendar td > div > div {
  境界線: 1px実線 #aaa;
  色: #fff;
  マージン: 5px;
  & > div:最初の子 {
    背景色: #aaa;
  }
  & > div:n番目の子(2) {
    パディング: 5px;
    色: #000;
    .ivu-入力ラッパー{
      幅: 80%;
    }
  }
  ＆。アクティブ {
    境界線: 1px 実線 #2ab561;
    & > div:最初の子 {
      背景色: #2ab561;
    }
    & > div:n番目の子(2) {
      パディング: 5px;
      色: #000;
      .ivu-入力ラッパー{
        幅: 80%;
      }
    }
  }
}
// このセクションが解放されると、現在の日付より前のすべてのボックスがグレー表示されます // .el-date-table-calendar td.disabled > div > div {
// 境界線: 1px 実線 #aaa;
//色: #fff;
// マージン: 5px;
// & > div:最初の子 {
// 背景色: #aaa;
// }
// & > div:n番目の子(2) {
// パディング: 5px;
//色: #000;
// .ivu 入力ラッパー {
// 幅: 80%;
// }
// }
// }
.el-date-table-calendar td.available:hover {
  色: #000;
}
.el-date-table-calendar td.available.today {
  色: #000;
  フォントの太さ: 標準;
}
.el-date-table-calendar tr td.current.available:not(.disabled) {
  背景色: #fff;
}
</スタイル>

<スクリプト>
 '../../components/calendar' からカレンダーをインポートします
 エクスポートデフォルト{
    コンポーネント: { カレンダー }
  }
  データ（） {
    戻る {
      有効時間制限: ''、
      ルールフォーム: {
        価格： ''、
        config価格リスト: []
      }
      },
      ルール:
      }
 }
    }
</スクリプト>

<el-form-item label="価格設定" prop="calendarPrice">
 <カレンダー
 :datedef="ruleForm.config価格リスト"
 :default-price="ruleForm.price"
 :effectiveTimeLimit="実効時間制限"
 </カレンダー>
</el-form-item>