<table id="caao6"><object id="caao6"></object></table>
  • <small id="caao6"><label id="caao6"></label></small>
    <acronym id="caao6"><rt id="caao6"></rt></acronym>
  • <acronym id="caao6"></acronym>
  • Vue觸發隱藏input file的方法實例詳解

     更新時間:2019-08-14 15:01:29   作者:佚名   我要評論(0)

    1、使用input透明覆蓋法
      將input的z-index設置為1以上的數字并覆蓋到需點擊的內容上,將input的樣式opacity設置為0(即為透明度為0),這樣通過綁定在inp

    1、使用input透明覆蓋法

      將input的z-index設置為1以上的數字并覆蓋到需點擊的內容上,將input的樣式opacity設置為0(即為透明度為0),這樣通過綁定在input上的change事件觸發     ----推薦

    <p class="uploadImg">
      <input type="file" @change="picUpload($event)" accept="image/*" />
    </p>
    .uploadImg {
      width: 100%;
      height: 1.46rem;
      position: relative;
      input {
       width: 1.46rem;
       height: 100%;
       z-index: 1;
       opacity: 0;
       position: absolute;
       cursor: pointer;
      }
    }

    2、使用vue的ref參數直接操作input的點擊事件觸發

    <div class="upload-btn-box">
      <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">點擊上傳</Button>
      <input ref="filElem" type="file" class="upload-file" @change="getFile">
    </div>
    
    choiceImg(){
      this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
    },
    getFile(){
      console.log("成功");
    }

    3、使用HTML的lable機制觸發input事件

    <label for="upfile" class="pTitleRight" @click="IDRecognition">
    <span>身份證識別</span>
      <i class="iconfont"></i>
      <input ref="filElem" type="file" accept="image/*" id="upfile" name="upfile" style="display: none;" @change="uploadPic">
    </label>
    
    IDRecognition: function() {},  //觸發事件 
    uploadPic: function() {
     console.log('dsa');
    }

      lable上的for屬性綁定input的id,即可通過觸發lable上的點擊事件觸發input的change事件    ----推薦

    總結

    以上所述是小編給大家介紹的Vue觸發隱藏input file的方法實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
    如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

    您可能感興趣的文章:

    • vue中使用input[type="file"]實現文件上傳功能
    • vue給input file綁定函數獲取當前上傳的對象完美實現方法

    相關文章

    • Vue觸發隱藏input file的方法實例詳解

      Vue觸發隱藏input file的方法實例詳解

      1、使用input透明覆蓋法   將input的z-index設置為1以上的數字并覆蓋到需點擊的內容上,將input的樣式opacity設置為0(即為透明度為0),這樣通過綁定在inp
      2019-08-14
    • Python3 chardet模塊查看編碼格式的例子

      Python3 chardet模塊查看編碼格式的例子

      如下所示: 需要注意的是,如果遇到GBK2312等編碼的,在decode和encode時,一律使用GBK進行編碼或者解碼,這是因為GBK是其他GBK
      2019-08-14
    • DedeCMS 5.7 sp1遠程文件包含漏洞(CVE-2015-4553)

      DedeCMS 5.7 sp1遠程文件包含漏洞(CVE-2015-4553)

      一、漏洞描述 該漏洞在/install/index.php(index.php.bak)文件中,漏洞起因是$$符號使用不當,導致變量覆蓋,以至于最后引起遠程文件包含漏洞。 二、漏洞影響版本
      2019-08-14
    • Django如何使用第三方服務發送電子郵件

      Django如何使用第三方服務發送電子郵件

      在 Django 網站中使用 mailgun 的郵件收發服務。 1.在 mailgun 官網上注冊個賬號(免費,免費賬號每個月有10000條收發郵件的服務,對我來說已經完全夠用了),
      2019-08-14
    • Python 利用高德地圖api實現經緯度與地址的批量轉換

      Python 利用高德地圖api實現經緯度與地址的批量轉換

      我們都知道,可以使用高德地圖api實現經緯度與地址的轉換。那么,當我們有很多個地址與經緯度,需要批量轉換的時候,應該怎么辦呢? 在這里,選用高德Web服務
      2019-08-14
    • Django為窗體加上防機器人的驗證碼功能過程解析

      Django為窗體加上防機器人的驗證碼功能過程解析

      這里我們使用 django-simple-captcha 模塊,官方介紹如下:https://github.com/mbi/django-simple-captcha 一鍵安裝: pip install django-simple-captcha
      2019-08-14
    • python 疊加等邊三角形的繪制的實現

      python 疊加等邊三角形的繪制的實現

      python語言程序設計基礎 習題2.5 import turtle def drawTriangle(num,len,flag):#flag用來調整畫三角形的方向 flag*=-1 len/=2 if(num==1):
      2019-08-14
    • Django如何實現網站注冊用戶郵箱驗證功能

      Django如何實現網站注冊用戶郵箱驗證功能

      我們在很多網站上都可以看到用戶注冊使用電子郵件激活或啟用的方式。也就是說,用戶在注冊后填寫正確的電子郵件地址,接著網站會發送一封啟用電子郵件到用戶設
      2019-08-14
    • Django 項目重命名的實現步驟解析

      Django 項目重命名的實現步驟解析

      在日常學習工作過程中,我們難免需要復用以前的項目,這里講下復用 Django 項目并重命名的過程。 1.修改項目名稱,使用 pycharm -> refactor 重命名整個項目。
      2019-08-14
    • vue.js中ref和$refs的使用及示例講解

      vue.js中ref和$refs的使用及示例講解

      關于ref和$refs的用法及講解,vue.js中文社區( https://cn.vuejs.org/v2/api/#ref )是這么講解的: ref 被用來給元素或子組件注冊引用信息,引用信息將會注
      2019-08-14

    最新評論

    种子磁力搜索器