element-ui 上傳圖片后標(biāo)注坐標(biāo)點(diǎn)
什么是element-ui
element-ui是由餓了么前端團(tuán)隊(duì)推出的一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue.js 2.0的桌面組件庫,而手機(jī)端有對(duì)應(yīng)框架是 Mint UI 。整個(gè)ui風(fēng)格簡(jiǎn)約,很實(shí)用,同時(shí)也極大的提高了開發(fā)者的效率,是一個(gè)非常受歡迎的組件庫。
頁面大概如下:
組件使用的是layui的layer.open彈框。
左邊是表單信息,右邊是繪圖區(qū)域。
原文件mapForm.vue
<template> <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" clearable class="formInputClass"></el-input> </el-form-item> <el-form-item label="地圖描述" prop="remarks"> <el-input type="textarea" v-model="form.remarks" size="mini" clearable class="formInputClass"></el-input> </el-form-item> <el-form-item label="點(diǎn)位信息" prop="" v-if="mapList.length > 0"> <div class="mapContent"> <div v-for="(map,key) in mapList" :key="key"> <div class="pointAbscissaOrdinate"><span>點(diǎn)位坐標(biāo){{key+1}}:{{map.abscissa}}-{{map.ordinate}}</span></div> <el-select v-model="mapList[key]['point']" placeholder="請(qǐng)選擇" 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)"> {{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-upload> <el-button @click="clearPic" type="danger">清除所有點(diǎn)位</el-button> </div> <div class="info"><i class="el-icon-info"></i>顯示大小為1100px*720px</div> <div class="info"><i class="el-icon-info"></i>圖片框內(nèi)鼠標(biāo)左鍵標(biāo)點(diǎn)</div> <div class="info"><i class="el-icon-info"></i>圖片框內(nèi)鼠標(biāo)右鍵已經(jīng)標(biāo)注的點(diǎn)刪除該點(diǎn)</div> </div> </div> </template> <script> export default { name: 'mapFormComponent', data() { return { form: { mapName: "", }, rules: { mapName: [ { required: true, message: "請(qǐng)輸入地圖名稱", trigger: "blur" }, ], }, fileList: [], fileSrc: '', pointList: [ { name: "排放口1", point: "@FQ01" }, { name: "排放口2", point: "@FQ02" }, ], mapList: [], //斑馬線的數(shù)組 canBiaoZhu: true, //是否可以進(jìn)行標(biāo)注 pointColor: 'red', //點(diǎn)的顏色 pointSize: 20, //點(diǎn)的大小 pointSelectList: {}, notifyId: {}, loadStage: false, }; }, created() { }, mounted() { // 繪點(diǎn)區(qū)域事件綁定 let _this = this; if (document.getElementById('imgPainter')) { document.getElementById('imgPainter').onmousedown = (e) => { e = e || window.event if (e.button !== 2) { //判斷是否右擊 if (this.canBiaoZhu && this.fileSrc != '') { //判斷是否可以進(jìn)行標(biāo)注 需上傳圖片 var x = e.offsetX || e.layerX var y = e.offsetY || e.layerY this.mapList.push({ id: this.mapList.length + 1, name: '', abscissa: x, ordinate: y, }) // 設(shè)置變量 // this.pointSelectList.$set(0); let key = `point`; _this.$set(this.mapList[this.mapList.length - 1], key, "") } else { //提示上傳圖片 // 只顯示一次 if (_this.notifyId.id) _this.notifyId.close(); this.notifyId = _this.$notify.error({ title: '提示信息', message: '請(qǐng)先上傳圖片后再標(biāo)點(diǎn)', showClose: true, }); } } else { return false } } } // 右鍵阻止 var oDiv1 = document.getElementById('imgDiv'); oDiv1.oncontextmenu = function (ev) { var e = e || window.event; //阻止冒泡 e.cancelBubble = true; //阻止觸發(fā)默認(rèn)事件 e.returnValue = false; } }, methods: { changePoint() { /**point change */ this.$forceUpdate(); }, clearMarker(index) { /**清除marker */ this.mapList.splice(index, 1); }, handleChange(file, fileList) { this.loadStage = true; let fileName = file.name; let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test(fileName.toLowerCase())) { this.fileSrc = URL.createObjectURL(file.raw) // 獲取URL console.log(this.fileSrc); } else { this.$message.error('請(qǐng)選擇圖片文件'); } this.loadStage = false; }, clearPic() { /**清除圖片 */ this.mapList = []; }, checkParams() { /*** * 驗(yàn)證提交信息 */ this.$refs["form"].validate((valid) => { if (valid) { let params = this.form; this.submit(params); } }); }, async submit(params) { /**提交 */ let resp = await this.$api.companyApiList .addEditCompany(params); if (resp.data.code != "error") { // 判斷是否新增修改 this.$notify.success({ title: "提示", message: resp.data.msg, showClose: true, }); let type = params.id && params.id != '' ? 'edit' : 'add'; this.$emit("update", type); // 清空表單數(shù)據(jù) this.$refs.form.resetFields(); } }, }, }; </script> <style scoped lang="less"> /** 表單樣式 */ .mapForm { display: flex; padding: 10px; border: 1px solid pink; .left { flex: 2; border-right: 1px dashed pink; margin-right: 4px; .mapContent { height: 700px; overflow-y: auto; .selectClass { margin: 0px 5px; } .pointAbscissaOrdinate { display: inline-block; width: 140px; } } } .right { flex: 8; // border: 1px solid pink; max-width: 1100px; .imgDiv { position: relative; height: 720px; border: 2px solid cornflowerblue; .marker { position: absolute; border-radius: 50%; z-index: 999; width: 20px; height: 20px; background-color: red; text-align: center; line-height: 20px; color: yellow; .ponint { display: block; position: absolute; left: 20px; top: 0px; font-size: 12px; color: blue; } } .marker:hover .ponint { display: block; } } .info { font-size: 12px; } .uploadBtn { margin: 10px 0px; } } .btn { padding-left: 160px; } } .formInputClass { width: 200px; } </style>
標(biāo)點(diǎn)的效果如下:
到此這篇關(guān)于element-ui 上傳圖片后標(biāo)注坐標(biāo)點(diǎn)的文章就介紹到這了,更多相關(guān)element-ui 上傳圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例
最近在做一個(gè)列表的時(shí)候,涉及到時(shí)間格式化操作。本文主要介紹了微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例,分享給大家,感興趣的可以了解一下2021-07-07javascript之通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)(二)
上篇中的選項(xiàng)卡存在這樣的問題:把邏輯封裝在table.js中,不夠靈活,也就是說如果某個(gè)選項(xiàng)卡是實(shí)現(xiàn)異步請(qǐng)求或者跳轉(zhuǎn),而非div的顯隱切換,那么就得修過table.js來達(dá)到目的,顯然不是我所需要的。2010-05-05用box固定長寬實(shí)現(xiàn)圖片自動(dòng)輪播js代碼
這篇文章主要介紹了用box固定長寬實(shí)現(xiàn)圖片自動(dòng)輪播效果,需要的朋友可以參考下2014-06-06解決JSON.stringify()自動(dòng)將中文轉(zhuǎn)譯成unicode的問題
下面小編就為大家分享一篇解決JSON.stringify()自動(dòng)將中文轉(zhuǎn)譯成unicode的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01動(dòng)態(tài)加載腳本提升javascript性能
動(dòng)態(tài)加載腳本可以有效提升javascript性能,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-02-02JS作用域閉包、預(yù)解釋和this關(guān)鍵字綜合實(shí)例解析
這篇文章主要介紹了JS作用域閉包、預(yù)解釋和this關(guān)鍵字,結(jié)合實(shí)例形式分析了javascript作用域閉包、預(yù)解釋和this關(guān)鍵字在具體使用過程中的操作技巧與注意事項(xiàng),需要的朋友可以參考下2016-12-12