vue2 常用功能事件方法

Engss

已于 2023-12-11 11:41:22 修改

阅读量133

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2023-11-21 13:29:06 首次发布

本文链接：https://blog.csdn.net/qq_45674825/article/details/134529627

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何在ElementUI中使用FormData进行文件上传，包括before-upload钩子的实现以及下载文件的方法，同时涉及了input元素的类型限制和事件处理如onkeydown和onkeyup的使用。

摘要由CSDN通过智能技术生成

上传文件使用 FormData 方法

<el-upload
    class="upload-demo"
    action="#"
    accept=".pdf, .zip"
    :before-upload="beforeUpPdf"
    :show-file-list="true"
  >
    <el-button size="small" type="primary" icon="el-icon-upload2" plain
      >上传PDF</el-button
    >
</el-upload>

// 上传之前
beforeUpPdf(file) {
  let formData = new FormData();
  formData.append("file", file);
  uploadImportArchivePDF(formData).then((res) => {
    this.msgSuccess("上传成功");
    // this.getList();             // 刷新数据
  });
},

下载文件

handleDownload(row) {
      // const dowrl = import.meta.env.VITE_APP_BASE_API + row.filePath; // 文件的URL地址
      const dowrl = row.filePath; // 后端返回的地址
      const url = window.URL.createObjectURL(
        new Blob([dowrl], { type: "application/pdf" })
      );
      const link = document.createElement("a");
      link.href = url;
      let fileName = row.archiveNo; //保存到本地的文件名称
      link.setAttribute("download", fileName);
      // 将<a>元素添加到页面上
      document.body.appendChild(link);
      // 触发点击事件，开始下载
      link.click();
      // 下载完成后，移除<a>元素
      document.body.removeChild(link);
},

handleDownload(row) {
      // const dowrl = import.meta.env.VITE_APP_BASE_API + row.filePath; // 文件的URL地址
      const dowrl = row.filePath; // 后端返回的地址
      // 打开新页面下载
      // window.open(dowrl);
},


// 接口下载文件


import { Loading } from "element-ui";

handleDownload(row) {
      let downloadLoadingInstance = Loading.service({
        text: "正在下载文件，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getDownloadCommon(row.id)
        .then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]));
          const link = document.createElement("a");
          link.href = url;
          let fileName = row.fileName; //保存到本地的文件名称
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          downloadLoadingInstance.close();
        })
        .catch((err) => {
          downloadLoadingInstance.close();
        });
    },

监听回车调用登录

// vue2 写法

  mounted() {
    // 监听 enter 事件（调用登录）
    document.onkeydown = (event) => {
      let e = event || window.event;
      if (
        e.code === "Enter" ||
        e.code === "enter" ||
        e.code === "NumpadEnter"
      ) {
        this.handleLogin();
      }
    };
  },
// vue3 写法

onMounted(() => {
  // 监听 enter 事件（调用登录）
  document.onkeydown = (e: KeyboardEvent) => {
    e = (window.event as KeyboardEvent) || e;
    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
      if (loading.value) return;
      login(loginFormRef.value);
    }
  };
});

el-inpu 限制类型

oninput ="value=value.replace(/[^\d]/g, '')" // 只能输入数字(正整数)
oninput ="value=value.replace(/[^\-\d]/g, '')" // 只能输入数字（包含正负数）
oninput ="value=value.replace(/[^\-\d.]/g, '')" // 只能输入数字和小数
oninput ="value=value.replace(/[^\d.]/g, '').replace(/^(\d+)\.(\d\d).*$/, '$1.$2')" // 只能输入数字和小数，只保留一个小数点
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d+).*$/, '$1$2.$3')" // 只能输入数字和小数，只保留一个小数点(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" // 只能输入数字和小数，只保留一个小数点，只保留2位小数(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d${3}).*$/, '$1$2.$3')" // 只能输入数字和小数，只保留一个小数点，只保留3位小数(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/(\.)(\d*)(\1*)/g,'$1$2').replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1.$2')" // 【终极】只能输入数字和小数，只保留一个小数点，只保留3位小数(包含负数)

1、只能输入英文字母和数字,不能输入中文
 
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> 
2、只能输入字母和汉字
 
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers"> 
3、只能输入数字和英文
 
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
4、小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号
 
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false"> 
5、小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号
 
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"> 
6、只能是数字和小数点和加减乘除
 
<input onkeypress="return event.keyCode>=4&&event.keyCode<=57"> 
7、只能输入数字,能输小数点
 
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"> <input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"> 
8、文本框只能输入数字代码(小数点也不能输入)
 
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

下拉框

    <el-form-item label="库房">
        <el-select
          v-model="queryParams.storeId"
          placeholder="请选择"
          clearable
          size="small"
          @change="storeChange"
          @visible-change="visibleStore"
        >
          <el-option
            v-for="dict in storeList"
            :key="dict.storeId"
            :label="dict.name"
            :value="dict.storeId"
          />
        </el-select>
      </el-form-item>



    storeChange(e) {
      this.queryParams.areaId = null;
    },
    // 分区下拉
    visibleArea(e) {
      this.$forceUpdate();    // 强制刷新
      if (e) {
        if (this.queryParams.storeId) {
          this.getlistArea(this.queryParams.storeId);
        }
      }
    },