要素UIとはelement-ui は、Ele.me のフロントエンド チームが開発者、デザイナー、製品マネージャー向けにリリースした Vue.js 2.0 ベースのデスクトップ コンポーネント ライブラリです。一方、モバイル フォン向けの対応するフレームワークは Mint UI です。 UI スタイル全体がシンプルで実用的であり、開発者の効率も大幅に向上します。非常に人気のあるコンポーネント ライブラリです。 ページの内容はおおよそ次のようになります。 コンポーネントは、layui の layer.open ポップアップ ウィンドウを使用します。 左側にはフォーム情報、右側には描画領域があります。 元のファイル mapForm.vue <テンプレート> <div class="mapForm"> <div class="left"> <el-form ref="form" :model="form" :rules="rules" label-width="160px"> <el-form-item label="マップ名" prop="mapName"> <el-input v-model="form.mapName" size="mini" クリア可能なクラス="formInputClass"></el-input> </el-form-item> <el-form-item label="マップの説明" prop="コメント"> <el-input type="textarea" v-model="form.remarks" size="mini" クリア可能なクラス="formInputClass"></el-input> </el-form-item> <el-form-item label="ポイント情報" prop="" v-if="mapList.length > 0"> <div class="mapContent"> <div v-for="(map,key) in mapList" :key="key"> <div class="pointAbscissaOrdinate"><span>ポイント座標 {{key+1}}: {{map.abscissa}}-{{map.ordinate}}</span></div> <el-select v-model="mapList[key]['point']" placeholder="選択してください" class="selectClass" @change="changePoint"> <el-option v-for="(item, key) in pointList" :key="key" :label="item.name" :value="item.point"> </el-option> </el-select> </div> </div> </el-form-item> <div class="btn"> <el-button @click="checkParams" type="primary">送信</el-button> </div> </el-form> </div> <div class="right" id=""> <div class="imgDiv" id="imgDiv" v-loading="loadStage"> <img :src="fileSrc" width="1100" height="720" id="imgPainter" /> <div class="marker" v-for="(item, key) in mapList" :key="key" :style="{top: item.ordinate+'px', 'left': item.abscissa+'px'}" @contextmenu.prevent="clearMarker(key)"> {{キー+1}} <div class="ponint">{{item.point}}</div> </div> </div> <div class="uploadBtn"> <el-upload class="upload-demo" ref="upload" action="" :on-change="handleChange" :show-file-list="false" :on-remove="handleRemove" :auto-upload="false" style="display:inline-block;"> <el-button slot="trigger" size="mini" type="primary">ファイルを選択</el-button> </el-アップロード> <el-button @click="clearPic" type="danger">すべてのポイントをクリア</el-button> </div> <div class="info"><i class="el-icon-info"></i>表示サイズは1100px*720pxです</div> <div class="info"><i class="el-icon-info"></i>画像フレーム内の句読点を左マウス ボタンで選択</div> <div class="info"><i class="el-icon-info"></i>画像フレーム内のマークされたポイントを右クリックすると、ポイントが削除されます</div> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'mapFormComponent', データ() { 戻る { 形状: { マップ名: "", }, ルール: マップ名: [ { 必須: true、メッセージ: "マップ名を入力してください"、トリガー: "blur" }、 ]、 }, ファイルリスト: [], ファイルソース: ''、 ポイントリスト: [ { 名前: "排出ポート1", ポイント: "@FQ01" }, { name: "排出口2", point: "@FQ02" }, ]、 mapList: [], //横断歩道の配列 canBiaoZhu: true, //マークできるか pointColor: 'red', //ポイントの色 pointSize: 20, //ポイントのサイズ pointSelectList: {}, 通知ID: {}, ロードステージ: false、 }; }, 作成された() { }, マウント() { //描画領域イベントバインディング let _this = this; document.getElementById('imgPainter') の場合 { document.getElementById('imgPainter').onmousedown = (e) => { e = e || ウィンドウイベント if (e.button !== 2) { //右クリックするかどうかを判断 if (this.canBiaoZhu && this.fileSrc != '') { //写真をマークしてアップロードできるかどうかを判断 var x = e.offsetX || e.layerX var y = e.offsetY || e.layerY this.mapList.push({ id: this.mapList.length + 1, 名前: ''、 横軸: x, 座標: y, }) // 変数を設定 // this.pointSelectList.$set(0); キーを `point` にします。 _this.$set(this.mapList[this.mapList.length - 1], キー, "") } それ以外 { // 写真をアップロードするように促す // (_this.notifyId.id) の場合のみ 1 回表示 _this.notifyId.close(); this.notifyId = _this.$notify.error({ タイトル: 「プロンプト情報」 メッセージ: 「まず画像をアップロードしてから句読点を追加してください」 表示閉じる: true, }); } } それ以外 { 偽を返す } } } // 右クリックして防止します var oDiv1 = document.getElementById('imgDiv'); oDiv1.oncontextmenu = 関数 (ev) { var e = e || window.event; //バブルを防ぐ e.cancelBubble = true; // デフォルト イベントのトリガーを防止します。e.returnValue = false; } }, メソッド: { チェンジポイント() { /**ポイント変更 */ これを強制的に更新します。 }, クリアマーカー(インデックス) { /**マーカーをクリア */ this.mapList.splice(インデックス、1); }, ハンドル変更(ファイル、ファイルリスト) { this.loadStage = true; ファイル名をfile.nameとします。 正規表現を /(.jpg|.jpeg|.gif|.png|.bmp)$/ とします。 if (regex.test(fileName.toLowerCase())) { this.fileSrc = URL.createObjectURL(file.raw) // URL を取得する コンソールにログを記録します。 } それ以外 { this.$message.error('画像ファイルを選択してください'); } this.loadStage = false; }, クリアピクチャ() { /**画像をクリア*/ このマップリストは[]です。 }, チェックパラメータ() { /*** * 提出情報を確認する */ this.$refs["form"].validate((valid) => { (有効)の場合{ params = this.form; とします。 this.submit(パラメータ); } }); }, 非同期送信(パラメータ) { /**提出する*/ resp = this.$api.companyApiList を待機します。 .addEditCompany(パラメータ); if (resp.data.code != "エラー") { // これを追加するか変更するかを決定します。$notify.success({ タイトル: 「ヒント」、 メッセージ: resp.data.msg、 表示閉じる: true, }); type = params.id && params.id != '' ? 'edit' : 'add' とします。 this.$emit("update", type); // フォームデータをクリアします this.$refs.form.resetFields(); } }, }, }; </スクリプト> <style スコープ lang="less"> /** フォームスタイル*/ .mapForm { ディスプレイ: フレックス; パディング: 10px; 境界線: 1px ピンク 。左 { フレックス: 2; border-right: 1px 破線ピンク; 右マージン: 4px; .mapコンテンツ{ 高さ: 700ピクセル; オーバーフロー-y: 自動; .selectClass{ マージン: 0px 5px; } .pointAbscissaOrdinate { 表示: インラインブロック; 幅: 140ピクセル; } } } 。右 { フレックス: 8; // 境界線: 1px ピンク色; 最大幅: 1100px; .imgDiv { 位置: 相対的; 高さ: 720px; 境界線: 2px 実線 コーンフラワーブルー; .マーカー{ 位置: 絶対; 境界線の半径: 50%; zインデックス: 999; 幅: 20px; 高さ: 20px; 背景色: 赤; テキスト配置: 中央; 行の高さ: 20px; 色: 黄色; .ポイント{ 表示: ブロック; 位置: 絶対; 左: 20px; 上: 0px; フォントサイズ: 12px; 色: 青; } } .marker:hover .point { 表示: ブロック; } } 。情報 { フォントサイズ: 12px; } .uploadBtn{ マージン: 10px 0px; } } .btn{ 左パディング: 160px; } } .formInputClass{ 幅: 200ピクセル; } </スタイル> 句読点の効果は次のとおりです。 これで、写真をアップロードした後に座標点をマークする element-ui に関するこの記事は終了です。より関連性の高い element-ui の写真アップロードコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04で国内ソースを変更する方法の例
>>: Navicat for SQLite で中国語データを CSV にインポートする方法
この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...
よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザ コンテンツ ウィンド...
目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
目次一般的な配列メソッドポップ()シフト解除()シフト()スライス()スプライス()配列から重複した...
まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...
質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...
さっそくAlibaba の oracle11g イメージをプルして構成する docker の記録を開...
この記事では、例を使用して、MySQL の非主キーの自己増分の使用方法を説明します。ご参考までに、詳...
この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...
目次概要リバースプロキシの役割Nginx リバース プロキシ イントラネット侵入 8081 ポートの...
目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...