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 関数の正しい使い方の詳細な説明
推薦する
div タグ内の要素の margin-top が無効である場合の解決策
タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...
docker システムコマンドセットの使用
目次docker システム df docker システム プルーンdocker systemc 情報...
JavaScript Three.js でテキストを作成する最初の経験
目次効果テキストの作成を開始するまずフォントローダーを作成するフォントライブラリを読み込むテキストジ...
ウェブページ HTML 順序付きリスト ol と順序なしリスト ul
データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...
10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ
Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...
Linux でスワップ領域を確認する 5 つのコマンドの概要
序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...
Windows で Mysql を起動したときに 1067 が表示される場合の解決策
数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...
HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装
1. 改行を強制せず、省略記号で終了します。コードをコピーコードは次のとおりです。 <div ...
オンラインチャットを実現するVue+sshフレームワーク
この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...
アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します
目次環境： 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
IDEA が Docker を統合してリモート展開を実現するための詳細な手順
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
Linux で MySQL のルート パスワードを変更する方法
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
CSS3 @mediaの基本的な使い方のまとめ
//文法： @media mediatype and | not | only (メディア機能) ...
選択/フォーカス時にすべてのオプションをリストする現在のより良い方法
開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...
Tomcatのクラスロードメカニズムを説明する記事
目次- 序文 - - JVM クラスローダー - 1. JVMクラスローダー2. クラスローダーのソ...