1. 验证上传文件的类型

（1）验证图片类型

（2）限制文件大小及其类型为压缩包

点击上传
methods: {beforeAvatarUpload (file) {let fileName = file.namelet 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 <= 1if (!isLt) {this.$message.error('上传文件大小不得小于5KB,不得大于100MB!')}return isLt}
}

（3）验证.txt文件也类似

上传关键字
beforeAvatarUpload (file) {let fileName = file.namelet pos = fileName.lastIndexOf('.')let lastName = fileName.substring(pos, fileName.length)if (lastName.toLowerCase() !== '.txt') {this.$message.error('请上传.txt文件类型')}
}

2.简单的表单验证处理

....

3.回车提交内容

原生的input，使用 @keyup.enter就可以：
原生：
但使用element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了：
element-ui：

submit () {const isLength = this.keyWord.lengthif (isLength > 30) {this.$message.error('超长关键词无法添加!')return}this.keyWord = ''     //enter提交之后清空输入框的内容
}

注：取消则使用@submit.native.prevent：例 取消输入框中按下回车提交该表单的默认行为

4.设置路由 this.$router.push({}):

取消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)}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！