vue中的主動(dòng)觸發(fā)點(diǎn)擊事件
更新時(shí)間：2022年04月22日 09:48:43 作者：Withered Wood
這篇文章主要介紹了vue中的主動(dòng)觸發(fā)點(diǎn)擊事件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
主動(dòng)觸發(fā)點(diǎn)擊事件
由vue代碼觸發(fā)點(diǎn)擊事件，實(shí)現(xiàn)的效果是：點(diǎn)擊按鈕，觸發(fā) <input> 輸入框點(diǎn)擊事件，從而實(shí)現(xiàn)選擇文件。
示例如下：
<template> ? ? <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"> ? ? <el-button class="operation-button-select" @click="handleButtonSelected">選擇文件（可多選）</el-button> </template>
<script>
?
? ? export default {
? ? ? ? name: 'HomePage',
? ? ? ? methods: {
? ? ? ? ? ? // 按鈕點(diǎn)擊事件
? ? ? ? ? ? handleButtonSelected() {
? ? ? ? ? ? ? ? // 主動(dòng)觸發(fā)點(diǎn)擊事件
? ? ? ? ? ? ? ? this.$refs.selectFiles.dispatchEvent(new MouseEvent('click')); ??
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>如何自動(dòng)觸發(fā)點(diǎn)擊事件
? ?// 兩秒后模擬點(diǎn)擊
setTimeout(function() {
? ? // IE
? ? if(document.all) {
? ? ? ? document.getElementById("desc1").click();
? ? }
? ? // 其它瀏覽器
? ? else {
? ? ? ? var e = document.createEvent("MouseEvents");
? ? ? ? e.initEvent("click", true, true);
? ? ? ? document.getElementById("desc1").dispatchEvent(e);
? ? }
}, 1000);desc1為元素的id，額外寫上點(diǎn)擊這個(gè)id會(huì)觸發(fā)的事件。1s后就會(huì)執(zhí)行
模擬點(diǎn)擊下載文件、圖片
var url = 'http://192.168.10.133/www/xunzhanMob/logo.jpg';
?? ? ? ? ?var a = document.createElement('a');
?? ? ? ? ?console.log(a)
?? ? ? ? ?var event = new MouseEvent('click');
?? ? ? ? ?a.download = '';
?? ? ? ? ?a.href = url;
?? ? ? ? ?a.dispatchEvent(event);以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vuex刷新頁面丟失登錄token信息的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開心的摸魚2023-04-04
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
隨著搬運(yùn)工的逐漸增加,原創(chuàng)作者的利益收到了極大的影響。所以給圖片或視頻加上水印顯得極其重要。本文分享一個(gè)由canvas和vue.js制作的圖片水印添加器，需要的可參考一下2022-06-06
這篇文章主要為大家介紹了vue3 name 屬性的使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本文主要介紹了Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了用vue快速開發(fā)app的腳手架工具，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí)，我們可以引用兩個(gè)不同版本的 Vue，分別是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那么它們的區(qū)別是什么呢，今天我們就來分析下這兩個(gè)不同版本之間的區(qū)別，一起看看吧2020-02-02