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监听数据传输中的变化
watch:{
'typeLink':function (a,b) {
console.log(a,b)
}
}
网友评论