### Wed Dec 20 2019 00:00:00 GMT+0800 (中國標準時間) 時間轉換 1. time.js ```javascript export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length) ); } let o = { "M+": date.getMonth() + 1, "d+": date.getDate(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ""; fmt = fmt.replace( RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str) ); } } return fmt; } ``` 2. 在需要用到的頁面的中引入 formatDate函數： ```javascript <script> import { formatDate } from "@/js/time.js"; </script> ``` 3. 編寫過濾 ```javascript filters: { formatDate(time) { var date = new Date(time); return formatDate(date, "yyyy-MM-dd hh:mm"); } } ``` ```vue <el-table-column prop=" releaseTime" label=" 發布時間"> <template scope="scope" > <span>{{scope. row. createTime formatDate} }</span> </ template> </e1- table -column> ``` ### input輸入金額正則表達式 - 實現 ```vue <el-form-item label="金額(元)" prop="contractAmount"> <el-input v-model="form.contractAmount" clearable maxlength="10" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="請輸入金額" /> </el-form-item> ``` - 在校驗中 ```javascript contractAmount:[ { required: true, type: 'string', trigger: 'blur', message:'金額不能為空'}, { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入正確額格式,可保留兩位小數' } ] ``` ### 表格序號連續 ```vue <el-table-column label="序號" type="index" width="50" align="center"> <template scope="scope"> <span>{{ (page - 1) * limit + scope.$index + 1 }}</span> </template> </el-table-column> ``` ### 刪除框靠在刪除按鈕旁 ```vue <el-popconfirm title="確定刪除這行信息嗎?" @onConfirm="del(scope.row)"> <el-button slot="reference" size="small" type="danger">刪除</el-button> </el-popconfirm> ``` ### handleDelete ```javascript handleDelete(row, index) { category.del(row.id).then(({ code, msg }) => { if (code === 0) { this.list.splice(index, 1) this.$notify({ title: 'Success', message: '刪除成功', type: 'success', duration: 2000 }) } else { this.$message.error(msg || '刪除失敗') } }).catch(error => { console.log(error) }) }, ``` ### vue多圖上傳 #### 圖片在沒有提交時預覽本地的 ```vue <el-form-item label="商品圖" prop="name"> <el-upload action="123" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-change="imgPreview" :on-remove="handleRemove" :auto-upload="false"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="silder_imageVisible"> <img width="100%" :src="form.silder_image" alt=""> </el-dialog> </el-form-item> ``` > action這里隨便填寫用:auto-upload="false"將其警用掉，使用自定義 > 方法:on-change=“imgPreview” ```javascript //移除圖片 //this.form.silderimgList上傳后的圖片文件數組 handleRemove(file, fileList) { console.log('移除圖片') this.form.silderimgList=[] for(let i=0;i<fileList.length;i++){ let str="" str = fileList[i].url this.form.silderimgList.push(str) } console.log(this.form.silderimgList); console.log('移除圖片') }, //點擊放大圖片 handlePictureCardPreview(file) { this.form.silder_image = file.url; //console.log(file.url) this.silder_imageVisible = true; }, //圖片上傳事件 imgPreview (file, fileList) { let fileName = file.name; let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test(fileName.toLowerCase())) { this.form.silder_image = file.url; } else { this.$message.error('請選擇圖片文件'); } console.log('圖片上傳事件') this.form.silderimgList=[] for(let i=0;i<fileList.length;i++){ let obj={} obj = fileList[i].raw this.form.silderimgList.push(obj) } this.form.name = fileList[0].raw console.log(file,fileList); console.log(this.form.silderimgList); console.log('圖片上傳事件') } ``` #### vue多圖上傳用**FormData** 對象 ```vue for(var i=0;i<file1.length;i++) { //使用for循環添加圖片 if(i>=9) continue; //圖片數目不能大于9 else{ if(file1[i].size<=5242880) //上傳圖片不能超過5M { formdata.append("mood_pic[]",file1[i]); /*注意，這里的雙引號里的變量名稱后面必須要加上[]*/ } } } ``` ### 可自適應文本高度的文本域 ```vue <el-input type="textarea" autosize placeholder="請輸入內容" v-model="textarea1"> </el-input> <div style="margin: 20px 0;"></div> <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="請輸入內容" v-model="textarea2"> </el-input> ```