惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
The Blog of Author Tim Ferriss
S
Securelist
D
Docker
The Register - Security
The Register - Security
GbyAI
GbyAI
Recorded Future
Recorded Future
Engineering at Meta
Engineering at Meta
Stack Overflow Blog
Stack Overflow Blog
云风的 BLOG
云风的 BLOG
P
Proofpoint News Feed
罗磊的独立博客
博客园 - 【当耐特】
F
Full Disclosure
WordPress大学
WordPress大学
腾讯CDC
小众软件
小众软件
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
SecWiki News
SecWiki News
L
Lohrmann on Cybersecurity
I
InfoQ
MyScale Blog
MyScale Blog
量子位
Cyberwarzone
Cyberwarzone
博客园 - 三生石上(FineUI控件)
The Hacker News
The Hacker News
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Jina AI
Jina AI
博客园_首页
H
Help Net Security
K
Kaspersky official blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Webroot Blog
Webroot Blog
Blog — PlanetScale
Blog — PlanetScale
V
Vulnerabilities – Threatpost
Y
Y Combinator Blog
The Cloudflare Blog
P
Proofpoint News Feed
V
Visual Studio Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tailwind CSS Blog
爱范儿
爱范儿
P
Privacy International News Feed
Security Archives - TechRepublic
Security Archives - TechRepublic
The GitHub Blog
The GitHub Blog
C
Cybersecurity and Infrastructure Security Agency CISA
B
Blog RSS Feed

博客园 - ฅ˙-˙ฅ

用display实现效果:上面根据内容自适应高度;下面撑满所有,并且超出时候显示滚动条 react更改多层对象变量的方法 react umi model使用注意事项 拖动改变顺序 博文阅读密码验证 - 博客园 antd input控制只能输入数字并进行格式化显示(antd 3版本) react函数式组件:父组件调用子组件方法 react form表单中自定义组件的数据双向绑定实现 vue3+vant h5: Rem 移动端布局适配之postcss-pxtorem和lib-flexible 项目记录文档 前端mock方案:使用json-server mac安装使用nginx 博文阅读密码验证 - 博客园 umi修改antd主题颜色(通过less文件修改) 部署一个vue项目到阿里云服务器 vue项目通过点击按钮实现复制图片(非图片url和base64),可发送到聊天框 vue重新刷新当前路由(非浏览器强刷,不会出现闪屏) uni-app怎么使用路由守卫,并且路由配置和pages.json中只写一套 uni-app小程序iPhone X适配底部栏黑横线 使用css自定义变量实现实现主题切换功能
使用Vue.extend实现iview Upload在单文件上传时,拖拽多个文件给出错误提示
ฅ˙-˙ฅ · 2020-12-22 · via 博客园 - ฅ˙-˙ฅ

1. 扩展Select组件,注册新的组件(global-components.js文件中进行)

import Vue from 'vue';
import { Upload } from 'view-design';

// 扩展组件
// 拖拽文件上传时检测文件个数(单文件上传,拖拽大于一个报错)
const MyUpload = Vue.extend(Upload).extend({
  methods: {
    onDrop(e) {
      this.dragOver = false;
      if (this.itemDisabled) { return; }
      /* -- 新加 -- */
      if (!this.multiple && e.dataTransfer.files.length > 1) {
        this.$emit('onFileNumberError');
        return;
      } 
      /* -- end -- */
      this.uploadFiles(e.dataTransfer.files);
    },
  },
});

// 注册全局组件
Vue.component('my-upload', MyUpload);

2. main.js中引入上个文件

import "@/components/global-components";
···

3. 使用

<template>
      <my-upload @onFileNumberError="onFileNumberError">
            
      </my-upload>
</template>
<script>
export default {
      methods: {
            onFileNumberError() { this.$Message.error('一次只能上传单个文件') }
      }
}
</script>

用法和原Upload一样,只是多了onFileNumberError用于拖拽多个时报错