⑴ vue高德地圖 如何一次添加多個點標記到地圖實例
首先你需要提交你的公司的資料信息，地址信息 ，公司名稱 以及電話信息，門臉照片給官方，
提交給官方後，他們會審核的，一般都是 1-7個工作日審核 審核通過後1-3天時間展現
如果發現地圖有錯誤，可以進行糾錯處理。
⑵ iview表格導出Excel時遇到的問題：導出.xls文件&導出的表格部分列錯位
有一項目中有將表格內容導出到Excel表格的需求，ivew中table中有exportCsv方法可以直接使用（下圖從官網組件API文檔中截取），但導出來是.csv後綴名的文件，雖然表現出來也差不多，但咱需求文檔上明確寫的需要.xls，所以做了些改動。
源碼中默認導出的的是.csv文件，想要導出.xls文件，只要在源碼中加一個導出.xls文件的選擇項就好
更改文件：
node_moles/iview/dist/iview.js :
我這邊是新增了一個exportXls方法，內容除".xls"後綴名以外和exportCsv方法一致
node_moles/iview/src/components/table/table.vue:
表現為（模擬數據）：
第一行第二行的內容列一部分跑到了後面的列里，並把後面列的內容擠跑了
而我原本的數據是（模擬數據，以便理解）：
原因如下紅框部分 ：
解決方案：
給初始數據的英文符號「,」替換成中文符號「，」
content = content.replace(/\,/g, '，')；
⑶ iView Admin升級iview 4.0
原來用的iView 3用了蠻久了，最近發現iView官方都改名了，應該是象徵著新的開始，所以也琢磨著升級到4.0.
記錄下升級涉及的具體操作。
1.package.json 中，添加新包 view-design：
2.Webpack 入口 main.js 中，把原先引用的 iview 替換為 view-design.
3.如果是按需引用，任何使用 from 'iview' 的都要替換為 from 'view-design』。
4.還包括以下零星幾個文件中的老版本的iview樣式引用需要處理
/src/index.less:
/src/locale/index.js
⑷ 輕量級富文本編輯器quill editor結合iview的使用
vue-quill-editor是我們在使用vue框架的時候常用的一個富文本編輯器，在進行富文本編輯的時候，我們往往要插入一些圖片，vue-quill-editor默認的處理方式是直接將圖片轉成base64編碼，這樣的結果是整個富文本的html片段十分冗餘，有可能導致提交失敗，或者是用戶體驗很差，數據要傳遞很久才全部傳送到伺服器。 因此，在富文本編輯的過程中，對於圖片的處理，我們更合理的做法是將圖片上傳到伺服器，再將得到的圖片鏈接插入到富文本中，以達到最優的體驗。
首先安裝quill editor npm install vue-quill-editor --save
全局掛載
在main.js中引用
使用
在需要用到富文本的vue中引用和配置quill editor工具欄
在editorOption中的handlers事件中處理圖片上傳（配置中的handlers是用來定義自定義程序的）
iview自帶的upload上傳自帶三個函數
在methods裡面處理一下圖片
如果有錯誤，歡迎大家多提提意見~
⑸ iview Upload在beforeUpload時將文件傳給後台該怎麼寫呢
這幾天遇到一個問題，在Upload組件中上傳之前需要添加一個Modal，阻止上傳， 提示用戶信息，用戶點擊確認按鈕後，再進行上傳，
理想總是很豐滿，過程真是狗血呀
於是在API 也找到了方法，提供了一個before-upload方法可以使用，於是乎，興高采烈的再before-upload中寫了
⑹ iView爬坑記——表單驗證
版本：iView 2.7.4
自從項目用了iView之後，感覺做新需求的一半時間都在瘋狂踩坑，所以寫個文檔記錄一下踩過的坑。
此篇為iView表單驗證的爬坑記錄。
更新：2019.3.10
在項目開發中，表單驗證時一直出現各種「不能為空」、驗證不通過等情況，但是自身輸入和驗證方法沒有問題時，一般來說是輸入框的value為 undefined 的。
比較簡單的檢測方法就是寫一個驗證方法，列印或 debugger 查看此時的輸入值的取值（ value ）是否為輸入值，如果不是或為 undefined ，那麼就是取值錯誤，而非驗證方法錯誤。
參考文檔例子：
解決方法 ：
雖然我們在官網上會看到類似例子：
但是建議放棄利用這個方法驗證輸入值的數據類型。
例如，該驗證方法的 type 類型有 number ，但它默認獲取輸入值為 string ，所以會導致 type 不符（並非因為輸入的值不是數字）。
現在用的版本中還未修復此問題，如果已修復則可忽視該建議
在平時項目中，會遇到需要選擇日期，但提交時日期不能為空這一需求，那麼應該如何驗證？
根據上面第一條列印 value 值，發現如果日期沒有選擇，日期選擇器上的 value 值為 ["",""] （使用的是 <DatePicker type="date"></DatePicker> ）。
解決方法：
這時候就不能根據長度驗證，所以必須循環/遍歷判斷 value 的數組每一項是否為空。
之前表單驗證時遇到一個問題，在不同電腦上， TimePicker 的最終數據值類型不同（不知道是否因為一個是Mac一個是Windows10）。
搜索了一下度娘，發現也有其他人有類似問題。
問題為：
Mac上 TimePicker 最終數據類型為 數組 ，而Win10上 TimePicker 最終數據類型為 本地時區時間 （例如：2017-11-16T05:23:20.000Z）。
解決方法：
表單提交前記得判斷 TimePicker 最終數據的類型，避免傳值給後端時報錯。
表單驗證規則中， trigger 屬性填寫的是在什麼情況下觸發該驗證，例如 blur 或者 change 。
但是我們會有某些需求，需要讓該輸入框在提交的時候才驗證，並不需要實時驗證，此時就會有把 trigger 刪掉的做法。
該做法的結果是， 一進入有表單的頁面時，表單就會進行一次校驗 。
有時候在項目中會有幾個表單的輸入框使用同一個校驗方法（比如校驗數字、身份證之類的），需要根據頁面情況顯示特定的錯誤信息提示，但是這個校驗方法又是單獨一個JS文件。
那麼可以在校驗規則上添加 message ，寫上特定的錯誤信息提示，這樣頁面上顯示的就是特定的錯誤信息提示。
在規則中有未填或填錯，會有正常提示，但是如果全部填寫，步驟1卻沒辦法判斷成功並進入方法，會直接報錯，有可能是寫自定義規則的時候，沒有寫 callback() 。
⑺ iView怎麼用
我正在使用iview， 首先保證系統有node.js, 可以支持npm安裝，然後按照下面的簡單步驟進行：
npm install iview --save
這樣在你的package.json可以看到：
"dependencies": {
"axios": "^0.16.2",
"iview": "^2.0.0-rc.13",
在你的main.js這種文件裡面（也就是你的工程裡面new Vue的那個文件），加入下面代碼：
import iView from 'iview';
Vue.use(iView);
然後在自己新加的component 裡面，你就可以直接使用iview的控制項了，例如<Table>，很方便也很美觀。
最後推薦你研究下iview-admin這個，如果是做一個簡單的網站，比如cms管理，你可以直接下載他們的工程，參考他們的代碼，甚至直接這個工程進行修改。
⑻ 如何使用iview組件
iViewMediaPro 是一個可以快速簡單的組織、顯示、播放數碼圖片、字體、影象、聲音或其他多媒體文件，並可以自動劃分圖片格式並整理歸納的軟體。支持超過130種文件格式。還能以PDF的形式對圖片進行電子書一樣的瀏覽，兼容了MicrosoftWard、RTF、WMV、WMA等各個格式和平台的播放，方便快速管理與查找文件。
iViewMediaPro 3.1序列號（任選其一，或者用壓縮包中提供的注冊工具）
edi46-gfnax-ku9ns-xrpnt-rp6gr-efykb
4c9if-g3akg-8yv27-vv35k-tww3e-eytbb
gfct8-j9bv7-w9crg-g8acu-zg3xq-n45cb
⑼ iview的table的push怎麼使用
可以把包含空間的路徑部分用雙引號引起來
例如我在c盤的program files文件夾中建了一個a.txt文件
可以使用這種形式打開
system("c:\\\"program files\"\\a.txt");注意每個雙引號前要有轉義字元\前綴
⑽ Upload組件上傳限制（寬、高、尺寸、格式）
iview-Upload組件官網鏈接： https://iview.github.io/components/upload
效果展示
css
.out-box{
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 20px 20px 10px;
}
.img-border{
border: 1px solid #e6e6e6;
border-radius: 8px;
margin-right: 20px;
width:100px;
height:100px;
}
.upload-box{
width: 100px;
height:100px;
display: inline-block
}
.upload-inner-box{
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
background: #F5F5F5;
}
.upload-tip{
color:red
}
template
<div class="out-box">
<img class="img-border" v-if="seeView" :src="this.imageUrl" />
<Upload ref="uploadFiles"
:show-upload-list="false"
:max-size="5120"
:on-success="handleSuccess"
:on-exceeded-size="handleMaxSize"
:before-upload="beforeUploadImg"
:loading="true"
type="drag"
:format="['jpg','jpeg','png','gif']"
:on-format-error="handleFormatError"
action="url"
class="upload-box">
<div class="upload-inner-box">
<div style="padding-top: 20px">+</div>
<div style="font-size: 12px">請上傳圖片</div>
</div>
</Upload>
<div class="upload-tip">圖片大小勿超5M，尺寸為{{minWidth}}*{{minHeight}}，勿小於該尺寸，且盡量以該長寬比制圖以保證頁面效果</div>
</div>
data
seeView:"false",//是否展示已上傳的圖片
imageUrl:"",//上傳圖片的url
url:"",//上傳的地址
minWidth:number,//最小寬度
minHeight:number,//最小高度
methods
//上傳成功
handleSuccess(response, file, fileList) {
this.imageUrl = response.result;
this.seeView = true;
},
//上傳的文件大小超出要求
handleMaxSize() {
this.$Modal.warning({
title: "提示",
content: "上傳縮略圖大小不能超過5M!!!",
});
},
//上傳文件格式不符合要求
handleFormatError() {
this.$Modal.warning({
title: "提示",
content: "上傳縮略圖格式錯誤!!!",
});
},
//上傳前對圖片寬高的檢驗
beforeUploadImg(file) {
this.checkImageWidth(file, minWidth).then((checkWidth) => {
if (checkWidth) {
this.checkImageHeight(file, minHeight).then((checkHeight) => {
if (checkHeight) {
this.$refs.uploadFiles.post(file);
}
});
}
});
return false;
},
// 非同步方法 檢驗圖片寬度
async checkImageWidth(file, widthCheck) {
let width = await this.getImageWidth(file);
let checkWidth = width > widthCheck || width == widthCheck;
if (!checkWidth) {
this.$Notice.warning({
title: "圖片寬度錯誤",
desc:
file.name +
" 的寬度為" +
width +
"px, 請上傳寬度大於" +
widthCheck +
"px的圖片. ",
});
}
return checkWidth;
},
// 獲取圖片寬度
getImageWidth(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image();
img.src = reader.result;
img.onload = function () {
resolve(this.width);
};
}
};
});
},
// 非同步方法 檢驗圖片高度
async checkImageHeight(file, heightCheck) {
let height = await this.getImageHeight(file);
let checkHeight = height > heightCheck || height == heightCheck;
if (!checkHeight) {
this.$Notice.warning({
title: "圖片高度錯誤",
desc:
file.name +
" 的高度為" +
height +
"px, 請上傳高度大於" +
heightCheck +
"px的圖片. ",
});
}
return checkHeight;
},
// 獲取圖片寬度
getImageHeight(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image();
img.src = reader.result;
img.onload = function () {
resolve(this.height);
};
}
};
});
},