Vue の要素カレンダー コンポーネントを使用したサンプル コード
|
まず効果図を見てみましょう:
完全なコードは添付されています
<テンプレート>
<div class="newSeeds" id="famerCalendar">
<div class="title-bottom">
<el-日付ピッカー
:クリア可能="false"
プレフィックスアイコン="timeFilter"
v-model="値2"
タイプ="月"
placeholder="月を選択"
値の形式="yyyy-MM"
@change="変更日"
>
</el-date-picker>
</div>
<div class="calendarBody">
<el-calendar v-model="値">
<template slot="dateCell" slot-scope="{ 日付, データ }">
<div
@click="chooseDay(データ)"
クラス="cellInfo"
:class="data.isSelected == true ? 'shadowBox' : ''"
>
<ul class="cellInfoUl">
<li v-for="(item, index) アクティブリスト内" :key="index">
<p v-if="data.day == item.time" class="cellInfoUlP">
{{アイテム名}}
</p>
</li>
</ul>
<div
v-for="(val, keys, i) in 逆メッセージ"
:key="i"
:class="data.day == キー ? 'tipMsg' : ''"
>
<span v-if="data.day == keys" class="tipMsged">{{ val }}</span>
</div>
<div class="セル情報ボックス">
<p>{{ data.day.split("-")[2] }}</p>
</div>
</div>
</テンプレート>
</el-calendar>
</div>
<!-- 引き出し -->
<el-引き出し
:title="時間選択"
:visible.sync="引き出し"
:direction="方向"
>
<div class="modeEach" v-if="listNormal[0]">
<div class="modeEachs" v-for="(item, index) in listNormal" :key="index">
<i class="setI el-icon-delete" @click="delTips(item)"></i>
<i
クラス="setI setIs el-icon-edit-outline"
@click="ヒントを追加(1, 項目)"
</i>
<p>
<span>開始時間:</span> <span>{{ item.time }}</span>
</p>
<p>
<span>農業活動名:</span> <span>{{ item.name }}</span>
</p>
<p>
<span>責任者:</span> <span>{{ item.userName }}</span>
</p>
<p>
<span>参加者数:</span> <span>{{ item.people }}</span>
</p>
<p>
<span>ターゲット仕様:</span> <span>{{ item.content }}</span>
</p>
</div>
</div>
<div class="modeEach modeEached" v-else>
<div class="emptyState">
<img src="../../../assets/leftScreen/math17.png" alt="" />
</div>
<p>現在の日付には農業活動は予定されていません。</p>
<p>右下にある「農業アクティビティを追加」ボタンをクリックして追加してください。 </p>
</div>
<div class="footBox">
<el-button type="primary" @click="addTips(0)">農業活動を追加する</el-button>
</div>
</el-drawer>
<!-- 新しい変更 -->
<el-ダイアログ
タイトル=""
:visible.sync="フォームを更新"
幅="31vw"
クラス="addAlameBox"
>
<div スロット="タイトル" クラス="ヘッダータイトル" スタイル="位置: 相対">
<span class="タイトル名"></span>
<span class="title-age">{{ boxPrompt }}</span>
<span
スタイル="
位置: 絶対;
上位: 50%;
変換: translateY(-50%);
右: 0px;
フォントサイズ: 2.22vh;
「
>
</span>
</div>
<div class="addAlaForm">
<el-フォーム
ref="upTableData"
:rules="ルール"
:model="upTableData"
ラベル幅="10vw"
>
<!-- <el-form-item label="開始時間" prop="時間">
<div class="block">
<el-日付ピッカー
v-model="upTableData.time"
タイプ="datetime"
値の形式="yyyy-MM-dd HH:mm:ss"
placeholder="日付と時刻を選択"
>
</el-date-picker>
</div>
</el-form-item> -->
<el-form-item label="農業活動名" prop="名前">
<el-input v-model="upTableData.name"></el-input>
</el-form-item>
<el-form-item label="担当者" prop="ユーザー名">
<el-input v-model="upTableData.userName"></el-input>
</el-form-item>
<el-form-item label="参加者数" prop="人">
<el-input v-model="upTableData.people"></el-input>
</el-form-item>
<el-form-item label="ターゲット仕様" prop="content">
<el-input v-model="upTableData.content"></el-input>
</el-form-item>
<el-form-item サイズ="大きい">
<el-ボタン
クラス="saveBtn"
タイプ="プライマリ"
@click="saveForm('upTableData')"
>保存</el-button
>
</el-form-item>
</el-form>
</div>
</el-ダイアログ>
</div>
</テンプレート>
<スクリプト>
「../../../components/dealTime.js」からdateFormatをインポートします。
エクスポートデフォルト{
データ（） {
戻る {
時間選択: "7-26",
6: [],
番号: 0,
アクティブ日: 0,
時間Rex: "",
リストパラメータ: {
ページ: 1,
サイズ： ""、
どこ： ""、
時間： ""、
},
id: 0,
リスト通常: [],
アクティブリスト: [
{
データ1: "2021/08/17 15:30",
データ2: "1# 区画の水やり",
データ3:「孫国東」、
データ4: "16",
データ5: 「土壌水分が40%に達する」
},
{
データ1: "2021/08/17 15:30",
データ2: "1# 区画の水やり",
データ3:「孫国東」、
データ4: "16",
データ5: 「土壌水分が40%に達する」
},
]、
更新フォーム: false、
boxPrompt: "新規",
アップテーブルデータ: {
id: 0,
name: "", //操作名 time: "", //予定時間 userName: "", //担当者 people: "", //人数 content: "", //内容},
ルール:
データ1: [
{ 必須: true、メッセージ: "time"、トリガー: ["blur", "change"] },
]、
データ2: [
{
必須: true、
メッセージ: 「製品名は空欄にできません」
トリガー: ["ぼかし", "変更"],
},
]、
データ3: {
必須: true、
メッセージ: 「製品タイプは空欄にできません」
トリガー: ["ぼかし", "変更"],
},
データ4: {
必須: true、
メッセージ: 「仕様は空にできません」
トリガー: ["ぼかし", "変更"],
},
データ5: {
必須: true、
メッセージ: 「配送数量は空欄にできません」
トリガー: ["ぼかし", "変更"],
},
},
// 引き出し: false,
方向: "rtl",
// 日付値2: "",
値: 新しい Date(),
読み込み中: false、
物流フォーム: {
名前： ""、
地域: -1,
},
};
},
マウント() {
this.requrstLists();
this.getNowDate();
// this.getActivityCalendar;
},
時計：
アクティブリスト(newVal) {
this.activeList = newVal;
},
},
計算: {
逆メッセージ() {
var arrs = [];
var countArrs = [];
this.activeList.forEach((val) => {
arrs.push(val.time);
});
戻り値 arrs.reduce(function (prev, next) {
前[次] = 前[次] + 1 || 1;
countArrs.push({ prev });
前に戻る;
}, {});
// };
},
},
メソッド: {
// 現在の時刻を取得する getNowDate(){
var date = 新しい Date();
this.value2 = dateFormat('YYYY-mm',日付)
},
// リストを取得するインターフェース async requrstLists() {
定数{
データ: { データ },
} = これを待ちます。$post("product/getProductPlayList", {
ページ: 1,
サイズ： ""、
どこ： ""、
時間： ""、
});
datas.forEach((val) => {
val.time.indexOf(":") の場合 {
console.log("スペースが見つかりました");
val.time = val.time.split(" ")[0];
}
});
this.activeList = データ;
// this.sortArr()
},
非同期リクエストリスト() {
定数{
データ: { データ },
} = this.$post("product/getProductPlayList", this.listParams); を待ちます。
this.listNormal = データ;
},
// 追加 addTips(val, item) {
this.updateForm を true に設定します。
（値 === 0）の場合{
this.boxPrompt = "新規";
this.upTableData = {
id: 0,
name: "", //操作名 time: "", //予定時間 userName: "", //担当者 people: "", //人数 content: "", //内容};
} それ以外の場合 (val === 1) {
this.boxPrompt = "編集";
アイテムID
this.$nextTick(() => {
テーブルデータを JSON で解析します。
});
}
},
//保存saveForm() {
url = "/product/editProductPlay";
if (this.boxPrompt == "新規") {
this.upTableData.id = 0;
} そうでない場合 (this.boxPrompt == "編集") {
this.upTableData.id = this.ids;
}
this.upTableData.time = this.timeChoose + "00:00:00";
this.$refs["upTableData"].validate((valid) => {
（有効）の場合{
this.$get(url, this.upTableData).then((res) => {
this.updateForm は false です。
res.data.state == "成功"の場合{
this.requrstList();
this.requrstLists();
this.$message.success("操作は成功しました");
} それ以外 {
this.$message.error("操作に失敗しました。しばらくしてからもう一度お試しください!");
}
});
} それ以外 {
console.log("送信エラー!!");
false を返します。
}
});
},
選択日(データ) {
this.$nextTick(() => {
if (data.type === "今月") {
this.drawer を true に設定します。
this.listParams.time = データ.day;
this.timeChoose = データ.day;
this.requrstList();
} そうでない場合 (data.type === "前月") {
this.prevBtn.click();
} そうでない場合 (data.type === "next-month") {
this.nextBtn.click();
}
});
},
// 引き出しハンドルClose(完了) {
this.$confirm("閉じるかどうか確認しますか?")
.then((res) => {
終わり（）;
this.requrstLists();
})
.catch((err) => {});
},
// 削除 delTips(val) {
コンソールログ(val);
this.$confirm("この操作によりファイルが完全に削除されます。続行しますか?", "Prompt", {
confirmButtonText: "確認",
cancelButtonText: 「キャンセル」、
タイプ:「警告」、
})
.then(() => {
this.$post("/product/deteleProductPlay", { id: val.id }).then(
(res) => {
res.data.state == "成功"の場合{
this.$message.success("正常に削除されました");
this.requrstList();
this.requrstLists();
} それ以外 {
this.$message(res.data.msg);
}
}
);
})
.catch(() => {
this.$メッセージ({
タイプ: "情報",
メッセージ: 「削除されました」、
});
});
},
//時間選択 changeDate(val) {
this.value = val;
},
// 更新 refresh() {
this.loading = true;
// this.requrstList();
},
//検索検索() {
name = this.logisticsForm.name とします。
レベルを this.logisticsForm.region とします。
レベル == -1 の場合、レベル = "";
this.loading = true;
// this.requrstList(名前、レベル);
},
//removeForm() をリセットする {
this.logisticsForm.name = "";
this.logisticsForm.region = -1;
// this.requrstList();
},
},
};
</スクリプト>
<style スコープ lang="less">
@import "../../../style/backTable.less";
</スタイル>
<style スコープ lang="less">
#famerCalendar /deep/ .el-calendar-table {
幅: 100%;
高さ: 100%;
&:not(.is-range) {
// 今月以外の日付をクリック不可にし、他の月に移動しないようにする td.next {
ポインタイベント: なし;
}
td.prev {
ポインタイベント: なし;
}
}
}
.calendarBody {
幅: 100%;
高さ: 81vh;
}
#famerCalendar .newSeeds {
高さ：90vh;
}
#famerCalendar /deep/ .el-calendar__header {
コンテンツの両端揃え: スペースの間;
パディング: 12px 20px;
境界線: なし;
テキスト配置: 中央;
背景: #00284d;
表示: ブロック;
}
#famerCalendar /deep/ .el-button-group {
表示: なし;
}
#famerCalendar /deep/ .el-calendar__title {
色: #fff;
位置合わせ: 中央;
行の高さ: 3vh;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {
背景: #5c768d;
色: #fff;
パディング: 1vh 0;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {
背景: #335371;
色: #fff;
パディング: 1vh 0;
}
#famerCalendar /deep/ .el-calendar__body {
パディング: 0;
}
#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {
左パディング: 3vw;
幅: 75%;
/* 高さ: 4vh;
行の高さ: 4vh; */
}
#famerCalendar /deep/ .el-date-editor.el-input、
.el-date-editor.el-input__inner {
幅: 10vw;
}
#famerCalendar.timeFilter{
位置: 相対的;
}
#famerCalendar /deep/ .el-calendar-table td {
テキスト配置: 右;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day {
ボックスのサイズ: 境界線ボックス;
// パディング: 1vh;
パディング: 0;
高さ：11.5vh;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {
ボックスのサイズ: 境界線ボックス;
パディング: 1vh;
}
#famerCalendar /deep/ .timeFilter:after {
最小幅: 2vw;
空白: ラップなし;
内容: "日付";
右境界線: 1px 実線 #c0c4cc;
パディング: 0 0.2vw;
ボックスのサイズ: 境界線ボックス;
/* 行の高さ: 4vh; */
}
#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {
境界線: なし;
}
#famerCalendar /deep/ .el-drawer__header:focus-visible {
境界線: なし;
}
.cellInfoUl {
幅: 80%;
高さ: 100%;
オーバーフロー: 非表示;
overflow-y: スクロール;
}
.cellInfoUl::-webkit-スクロールバー{
表示: なし;
}
.セル情報{
位置: 相対的;
幅: 100%;
高さ: 100%;
ディスプレイ: フレックス;
コンテンツの両端揃え: スペースの間;
パディング: 1vh;
ボックスのサイズ: 境界線ボックス;
}
.tipMsg {
位置: 絶対;
ディスプレイ: フレックス;
右: 0vh;
下部: 0vh;
幅: 2vw;
高さ: 2vw;
色: #fff;
}
.tipMsged {
位置: 絶対;
上位: 50%;
左: 50%;
zインデックス: 100;
変換: translate(-10%, -20%);
}
.tipMsg::before {
コンテンツ： "";
位置: 絶対;
上: 0;
左: 0;
高さ: 0px;
幅: 0px;
ボーダートップ: solid 2vw transparent;
左境界線: solid 2vw #3999e6;
変換: rotateZ(-90deg);
}
.cellInfoUl li {
幅: 100%;
行の高さ: 2.5vh;
色: #fff;
背景: #61adeb;
マージン下部: 1vh;
パディング: 0 0.5vw;
ボックスのサイズ: 境界線ボックス;
境界線の半径: 16px;
テキスト配置: 中央;
}
.セル情報ボックス{
テキスト配置: 中央;
/* 色： ＃; */
}
.mode各{
幅: 100%;
パディング: 2vh 1vw;
ボックスのサイズ: 境界線ボックス;
高さ：78vh;
オーバーフロー: 非表示;
overflow-y: スクロール;
}
.modeEach::-webkit-スクロールバー{
表示: なし;
}
.footBox {
幅: 100%;
パディング: 2vh 1vw;
ボックスのサイズ: 境界線ボックス;
}
.mode各{
幅: 100%;
最小高さ: 18vh;
背景: #3999e6;
境界線の半径: 6px;
パディング: 2vh 1vw;
ボックスのサイズ: 境界線ボックス;
位置: 相対的;
マージン下部: 1vh;
}
.setI{
位置: 絶対;
上: 1vh;
右: 0.5vw;
背景: #fff;
幅: 2.5vh;
高さ: 2.5vh;
境界線の半径: 50%;
テキスト配置: 中央;
行の高さ: 2.5vh;
色: 赤;
}
.setIs{
上: 1vh;
右：2vw;
色: #3999e6;
}
.modeEachs スパン {
フォントサイズ: 1.3vh;
フォントファミリー: Source Han Sans CN;
フォントの太さ: 400;
色: #ffffff;
行の高さ: 2.78vh;
}
.modeEachs span:nth-of-type(1) {
最小幅: 3vw;
表示: インラインブロック;
}
.footBox {
テキスト配置: 右;
}
.空の状態{
幅: 100%;
高さ: 60%;
テキスト配置: 中央;
}
.emptyState 画像 {
幅: 80%;
最小高さ: 100%;
}
.mode 到達 {
テキスト配置: 中央;
}
.modeEached p {
フォントサイズ: 1.67vh;
フォントファミリー: Source Han Sans CN;
フォントの太さ: 400;
色: #666666;
行の高さ: 2.78vh;
}
.シャドウボックス{
ボックスの影: 0px 0px 15px 3px rgba(0, 0, 0, 0.15);
パディング: 1vh;
ボックスのサイズ: 境界線ボックス;
}
</スタイル>vue の要素を使用したカレンダー コンポーネントのサンプル コードに関するこの記事はこれで終わりです。vue 要素カレンダー コンポーネントの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Tomcatc3p0 で jnid データ ソースを構成する 2 つの実装方法の分析
>>: MySQL の count 関数の正しい使い方の詳細な説明
推薦する
JS におけるメモリと変数の保存についての詳細な説明
目次序文JSマジックナンバー数値の保存バイナリ変換方法なぜ 0.1 + 0.2 !== 0.3 なの...
Vueはクリックを実装し、イベントオブジェクトとカスタムパラメータを同時に渡します。
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...
HTML ページジャンプとパラメータ転送の問題
HTMLページジャンプ: window.open(url, "", "...
表のセル間隔とセルパディングの違いの詳細な説明
テーブルとは何ですか?セルセルで構成されています。表では、<td> の数は、<tr...
WeChatアプレットキャンバスが署名機能を実装
WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...
nginx.pid を開く際の失敗と無効の解決策
目次1. 問題の説明2. 問題分析3. 解決策解決策1: ディレクトリを作成する解決策2: 構成ファ...
JSはシンプルなカウンターを実装します
HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタン...
JavaScript クリップボードの使用法の詳細な説明
（１）はじめに： clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...
よくあるNginxの設定ミスの例
目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...
CSS におけるスタックコンテキストの具体的な使用法
序文一部の CSS 相互作用の影響により、要素に設定されたz-index実際のサイズに応じて重ね合わ...
Docker が elasticsearch を起動するときのメモリ不足の問題と解決策
質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...
MySQL ソートの原則とケース分析
序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...
Docker での Redis の最も詳細なインストールと構成 (画像とテキスト付き)
1. Dockerに適したRedisのバージョンを見つけるdocker hubで見つけることができ...
MySQL の count()、group by、order by の詳細な説明
最近、IM を実行するときに、これらの 3 つのキーワードを同時に使用したときに問題が発生しました。...
Vueはビデオ再生を実装するためにビデオタグを使用します
この記事では、ビデオタグを使用してビデオ再生を実装するVueの具体的なコードを参考までに共有します。...