vue element-ui 常用事件方法

这篇具有很好参考价值的文章主要介绍了vue element-ui 常用事件方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 前提

已安装elementUI并正确引入

2. 参数说明

参数 说明
:action 是执行上传动作的后台接口,本文置空采用http-request取而代之拦截请求,进行文件上传
:multiple="true" 设置是否可以同时选中多个文件上传,这个也是<input type='file'>的属性
:limit="1" 上传文件数量,设置最多可以上传的文件数量,超出此数量后选择的文件是不会被上传的。
:on-exceed 绑定的方法则是处理文件超出限制数量后的动作
:file-list="fileList" 用于显示已上传文件列表,其中fileList是数组对象,初始为空。
参数 说明
accept="image/jpeg,image/gif,image/png" 限制上传文件的格式

具体可参考HTML5 input file类型,accept(文件类型控制)

  • 这个是直接使用<input type='file'>一样的属性了,accept属性的值可以是accept="image/gif, image/jpeg, text/plain, application/pdf"等等.
  • 添加了accept属性仅仅是选择文件时限制格式,其实用户还是可以点选“所有文件”选项,上传其他格式。
  • 如果需要在上传时校验文件格式,则需要在:before-uploadon-change这个钩子绑定相应的方法来校验,具体校验方法查看3. 页面中使用中的beforeUploadhandleChange方法
参数 说明
abort 取消上传请求
this.$refs.upload.abort( file);/ /这里的file为fileList 中的 file 对象
参数 说明
slot="tip 用于添加提示如正确的文件格式应该为***,如
<div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
参数 说明
abort 取消上传请求
this.$refs.upload.abort( file);/ /这里的file为fileList 中的 file 对象

其他参数具体参考
elementUI官方API文档>upload

3. 页面中使用

  • template
<template>
    <el-upload
        :class="{disabled:preview||fileIds.length===1}"
        ref="upload"
        action
        list-type="picture-card"
        :file-list="fileList"
        :disabled="preview"
        accept="image/jpeg,image/gif,image/png"
        :multiple="true"
        :limit="1"
        :auto-upload="true"
        :on-preview="handlePictureCardPreview"
        :before-remove="beforeRemove"
        :http-request="getUploadFile"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :on-progress="onProgress"
        :on-error="handleError"
        :on-exceed="handleExceed"
    >
        <!-- 触发上传的按钮 -->
        <i class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
    </el-upload>
</template>
  • script
<script>
export default {
    data() {
        return {   
            /* 文件上传区 */
            fileList: [], // 文件列表
            isValidUpload: true, // 图片是否符合要求
            delFileUid: '', // 待删除的图片uid
            dialogImageUrl: '', // 预览的图片地址
            dialogVisible: false, // 是否显示-预览图片
            fileObj: {}, // 待上传文件
            fileIds: [], // 存放文件uid与后台传过来的id
            imgId: [] // 需要上传的后端返回的文件ID
        };
    },
    methods:{
        // --------------------el-upload上传文件-开始--------------------
        // 图片预览-on-preview-事件
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        // 文件上传
        // autoUpload

        // 文件上传-on-exceed-事件-文件超出个数限制时的钩子
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 5 个文件,请重新选择`);
        },

          // 文件上传-on-change-事件-文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
        handleChange(file, fileList) {
            // console.log('handleChange>', 'file', file, 'fileList', fileList);
            // console.log('file.type', file.raw.type);
            const isPNG = file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            let errMsg = '';
            if (!isPNG) {
                errMsg = '上传图片只能是 JPG 格式!';
                // this.$message.error('上传图片只能是 JPG 格式!');
                fileList = fileList.pop();
            } else if (!isLt2M) {
                errMsg = '上传图片大小不能超过 2MB!';
                // this.$message.error('上传图片大小不能超过 2MB!');
                fileList = fileList.pop();
            }
            this.isValidUpload = isPNG && isLt2M;
            if (!this.isValidUpload) {
                this.$confirm(`${errMsg}`, '系統提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showCancelButton: false,
                    customClass: 'confirm-success',
                    type: 'error'
                })
                    .then(() => {
                        //
                    })
                    .catch(() => {
                        //
                    });
            }
            return this.isValidUpload;
        },

        // 文件上传-before-upload-事件-文件上传前
        beforeUpload(file) {
            // console.log('beforeUpload>', 'file', file);
            this.fileObj = new FormData();
            this.fileObj.append('file', file, file.name);
            console.log('beforeUpload>', 'file', file, 'fileObj', this.fileObj);
            if (file.type.split('/')[0] === 'image') {
                let _this = this;
                let reader = new FileReader();
                // let fileNew = event.target.files[0];// 写在beforupload时注释掉此行,在handleChange中时取消此行的注释
                reader.readAsDataURL(file);
                reader.onload = function(theFile) {
                    let image = new Image();
                    image.src = theFile.target.result;
                    image.onload = function() {
                        if (!_this.creativeSize(this.width, this.height)) {
                            _this.$message.info(
                                `${file.name}尺寸为${this.width}*${this.height},图片最佳比例为 560 * 670 !`
                            );
                            file.width = this.width;
                            file.height = this.height;
                            console.log(file.width, file.height);
                        } else {
                            file.width = this.width;
                            file.height = this.height;
                            console.log(file.width, file.height);
                        }
                    };
                };
            };
        },

        // 方法-计算图片比例是否符合要求
        creativeSize(width, height) {
            let minWidth = 560;
            let minHeight = 670;
            let isCreativeSize = true;
            if (width * minHeight > height * minWidth) {
                isCreativeSize =
                    width - Math.ceil((height * minWidth) / minHeight) < 2;
            } else {
                isCreativeSize =
                    height - Math.ceil((width * minHeight) / minWidth) < 2;
            }

            if (width < minWidth || height < minHeight) {
                // this.$message.error(`像素不够`);
                return false;
            } else if (isCreativeSize) {
                return true;
            } else {
                return false;
            }
        },

        // 文件上传-http-request-事件-拦截请求
        getUploadFile(fileObj) {
            // console.log('getUploadFile>', 'fileObj', fileObj);
            // 上传图片
            if (this.isValidUpload) {
                // 请求接口-上传图片
                this.uploadFile(this.fileObj).then(res => {
                    // console.log('uploadFile', res);
                    if (res.code === 1) {
                        this.fileIds.push({
                            uid: fileObj.file.uid,
                            imgId: res.data
                        });
                    }
                    // console.log('uploadFile>','fileIds', this.fileIds);
                });
            }
        },

        // 文件上传-on-progress-事件
        onProgress(event, file, fileList) {
            // console.log('onProgress', response, file, fileList);
        },

        // 文件上传-before-remove-事件-移除文件前
        beforeRemove(file, fileList) {
            // console.log('beforeRemove>','file', file);
            return this.$confirm(`确定移除 ${file.name}?`);
        },

        // 文件上传-on-remove-事件-移除文件后
        handleRemove(file, fileList) {
            for (let i = 0; i < this.fileIds.length; i++) {
                if (this.fileIds[i].uid === file.uid) {
                    if (!this.delFileUid) {
                        this.delFileUid = this.fileIds[i].imgId;
                    } else {
                        this.delFileUid =
                            `${this.delFileUid},` + this.fileIds[i].imgId;
                    }
                    this.fileIds.splice(i, 1);
                }
            }
            // console.log('handleRemove>', 'delFileUid', this.delFileUid);
            let params = {
                id: this.delFileUid
            };
            this.delsData(params);
        },

        // 接口-删除文件
        delsData(params) {
            if (this.delFileUid) {
                this.dels({ ids: this.delFileUid }).then(res => {
                    // console.log('dels', res);
                    this.delFileUid = '';
                    console.log('delsData>', 'delFileUid', this.delFileUid);
                });
            }
        },

        // 文件上传-on-error-事件
        handleError(err, file, fileList) {
            console.log('handleError', err, file, fileList);
        },
       
        // --------------------el-upload上传文件-结束-------------------- *

        // 表单提交
        submit(formName) {
            console.log('ruleForm',this.ruleForm);
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log('submit');
                    let imgId = [];
                    for (let i = 0; i < this.fileIds.length; i++) {
                        imgId.push(this.fileIds[i].imgId);
                    }
                    let params = {
                        name: this.ruleForm.name,
                        fileIds: imgId
                    };
                    // 提交接口
                    this.interfaceName(params)
                        .then(res => {
                            console.log(res);
                            if (res.code === 1) {
                                this.$confirm(`提交成功`, '系統提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    showCancelButton: false,
                                    customClass: 'confirm-success',
                                    type: 'success'
                                })
                                    .then(() => {
                                        this.$router.push('');
                                    })
                                    .catch(() => {
                                        // this.$message.info('已取消');
                                    });
                            } else {
                                // this.$message.error(res.msg);
                            }
                            this.fileIds = [];// 清除待文件序列
                            this.resetFormDetail();
                            this.$refs.upload.clearFiles();// 清除上传列表
                        })
                        .catch(err => {
                            console.log(err);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 方法-重置表单
        resetFormDetail() {
            this.formDetail.name = '';
        },
    }
}
</script>

二、input等的change事件中传递自定义参数


通过鼠标或键盘输入字符

Input 为受控组件,它总会显示 Vue 绑定值。
通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。
不支持 v-model 修饰符。

一、无效写法

@change="doSomething(val, index)"

<div v-for="(item,index) in itemList">
   <el-input v-model="item.value" @change="doSomething(val, index)"> </el-input >
</div>

二、有效写法

@change="((val)=>{changeStatus(val, index)})"

<div v-for="(item,index) in itemList">
   <el-input v-model="item.value" @change="((val)=>{doSomething(val, index)})"> </el-input>
 </div>


https://www.jianshu.com/p/3401d353eda4。文章来源地址https://www.toymoban.com/news/detail-412844.html

到了这里,关于vue element-ui 常用事件方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element-ui el-input输入框绑定@keyup.enter回车事件无效

    由于element-ui把input进行了封装,input外面是多一层div的。 在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 所以对于el-input,使用 @keyup.enter是无效的,需要加上 .native 限制符 .native修饰符的作用:

    2024年02月16日
    浏览(39)
  • vue怎么安装element-ui教程

    1.在项目中打开cmd命令窗口,输入命令---- npm i element-ui -S命令 图1 安装成功: 图2 2.安装成功,将其引入到自己的项目中,具体操作步骤如下: 在main.js文件中 引入 element 组件  : import ElementUI from \\\'element-ui\\\' import \\\'element-ui/lib/theme-chalk/index.css\\\'  Vue.use(ElementUI) 图3 (1)如何判断

    2023年04月18日
    浏览(27)
  • Vue2.0安装Element-ui

    1.在项目终端输入 如果想知道是否安装成功   2.随后在main.js里引入element组件 然后去使用element   就这样成功了  

    2024年02月16日
    浏览(32)
  • Vue中使用element-ui 给按钮绑定一个单击事件,实现点击按钮就弹出一个dialog对话框

    1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 2.创建对话框 在element中找到dialog对话框对应的代码,把代码粘贴到对应的位置 3.对话框与按钮的绑定

    2024年01月18日
    浏览(44)
  • #html直接引用vue和element-ui的方法

    可以在官网下载vue和element-ui到本地,直接引入。也可以用npm下载依赖后,将指定的文件保存到HTML项目的js文件夹中,以下为引用方法: 1.引入vue 2.引入element-ui (1).js (2).css (3).icon图标 3.使用

    2024年02月12日
    浏览(27)
  • vue项目element-ui上传组件自定义方法无法获取进度

    原因:element-ui中的up-load组件使用时,若用自定义上传http-request,会重新申明XMLHttpRequest,on-progress里的申明则被覆盖,无法使用该钩子,无法添加进度条 方案一:假进度条;写个假进度条优化用户体验,使用el-upload组件里on-change方法的status状态,配合定时器 ,以vue3为例 ,

    2024年02月15日
    浏览(37)
  • 【Vue】Element-UI按需引入项目启动报错解决方法

    原因可能是版本不匹配的原因, Vue-Cli 脚手架的版本跟 element-ui 不一致了,按官网的配置已经不太行了。 报错代码 解决方式 在 babel.config.js 将 es2015 进行替换成 @babel/preset-env 。 启动项目 明显最终的JS文件的大小少了一些。

    2024年02月14日
    浏览(38)
  • [vue+element-ui] form中输入框无法输入问题的解决方法

    目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容。 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在。 最终发现问题是input标签中v-model写的不恰

    2024年02月02日
    浏览(41)
  • Vue使用element-ui/plus组件布局容器container失效解决方法

    这个错我遇到了好几次,每一次都花了很长时间解决,还是决定写个笔记记录一下。 在使用elementu官网的布局容器时,他是这样的。 我在确定elementui引入正确的情况下是这样写的。 注意,我在SideNav,Header,Main,Footer组件套了el-aside,el-header... 然后暴露出来在Home中引用。 当然错

    2024年02月11日
    浏览(38)
  • Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    第一步 :按照官方文档使用npm安装element-ui,并完整引入Element-ui npm i element-ui -S  main.js中所有的内容删去,改为 随便写点东西,run一下 成功引入element-ui,但是不喜欢默认的蓝色,看起来很烂大街,想换掉。 第二步 :由于不喜欢默认的蓝色主题,可以使用在线主题生成工具

    2024年02月14日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包