1.驗證上傳文件的類型：
（1）驗證圖片類型
<template>
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
handleAvatarSuccess (res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload (file) {
const isIMG =
file.type === 'image/jpg' ||
file.type === 'image/jpeg' ||
file.type === 'image/png'
const isLt = file.size / 1024 / 50 <= 1
if (!isIMG) {
this.$message.error('上傳頭像圖片只支持jpg、jpeg、png格式!')
}
if (!isLt) {
this.$message.error('上傳頭像圖片大小不能超過50KB!')
}
return isLt && isIMG
}
</script>
（2）限制文件大小及其類型為壓縮包
<el-button
size="small"
plain
class="btn-upload"
accept="application/x-zip-compressed"
>點擊上傳
</el-button>
methods: {
beforeAvatarUpload (file) {
let fileName = file.name
let pos = fileName.lastIndexOf('.')
let lastName = fileName.substring(pos, fileName.length)
if (
lastName.toLowerCase() !== '.zip' &&
lastName.toLowerCase() !== '.rar'
) {
this.$message.error('文件必須為.zip或者.rar類型')
// this.resetCompressData()
return
}
// 限制上傳文件的大小
const isLt =
file.size / 1024 / 5 >= 1 && file.size / 1024 / 1024 / 100 <= 1
if (!isLt) {
this.$message.error('上傳文件大小不得小於5KB,不得大於100MB!')
}
return isLt
}
}
（3）驗證.txt文件也類似
<el-upload
class="upload-file"
style="display:inline-block;"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
>
<el-button size="small" plain class="btn-upload"
accept="text/txt">上傳關鍵字</el-button>
</el-upload>
beforeAvatarUpload (file) {
let fileName = file.name
let pos = fileName.lastIndexOf('.')
let lastName = fileName.substring(pos, fileName.length)
if (lastName.toLowerCase() !== '.txt') {
this.$message.error('請上傳.txt文件類型')
}
}
2.簡單的表單驗證處理
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="100px" //設置輸入框的寬度
size="small" //給定輸入框的尺寸大小
class="form"
>
....
</el-form>
<script>
ruleForm: {
name: '',
landing: ''
},
rules: {
name: [
{ required: true, message: '請輸入創意名稱', trigger: 'blur' }, //required設置它為必填選項
{ min: 3, max: 5, message: '長度在3到5個字符', trigger: 'blur' }
],
landing: [
{ required: true, message: '請輸入落地頁', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在3到5個字符', trigger: 'blur' }
]
}
</script>
3.回車提交內容
原生的input，使用 @keyup.enter就可以：
原生：<input v-model="form.name" placeholder="昵稱" @keyup.enter="submit">
但使用element-ui，則要加上native限制符，因為element-ui把input進行了封裝，原事件就不起作用了：
element-ui：
<el-input
type="text"
v-model="keyWord"
placeholder="請輸入關鍵詞，回車鍵(enter提交)"
@keyup.enter.native="submit">
</el-input>
submit () {
const isLength = this.keyWord.length
if (isLength > 30) {
this.$message.error('超長關鍵詞無法添加!')
return
}
this.keyWord = '' //enter提交之后清空輸入框的內容
}
注：取消則使用@submit.native.prevent：例<el-form :inline="true" @submit.native.prevent> </el-form> 取消輸入框中按下回車提交該表單的默認行為
4.設置路由 this.$router.push({}):
例<el-button @click="cancel">取消</el-button>
cancel () {
this.$router.push({
path: '/customCrowd'
})
}
5. 禁用屬性
:disabled="true"
注：在vue中this的使用：this是指整個當前的文檔；使用vue框架時script中不能使用冒號；在script中的內容必須使用
單引號不能使用雙引號；定義函數方法時要注意留出一個空格；避免定義未用到的變量；建議單獨建立一個全局的樣式文檔static/css/下，因為很多時候框架默認樣式權值更大，直接在當前文件中設置css樣式不起作用，但是要加上該文本的類名，避免影響其他區域；另外，style標簽中scoped的作用是表明以下定義的內容只在該區域中生效
6.使用vue的watch監聽數據傳輸中的變化
7.常見的分頁問題處理bug
問題描述：第n頁僅有一條數據，當刪除這條數據時再一次請求數據列表，此時this.page的值仍然是n,但實際上此時應該發送的是n-1,因此需要做判斷，利用刪除該數據前的列表請求回來的total值減1，再對this.pageSize取天花板函數Math.ceil((_this.total - 1)/10)
8.監聽輸入字數 使用input事件
