vue中的主動觸發(fā)點擊事件
更新時間:2022年04月22日 09:48:43 作者:Withered Wood
這篇文章主要介紹了vue中的主動觸發(fā)點擊事件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
主動觸發(fā)點擊事件
由vue代碼觸發(fā)點擊事件,實現(xiàn)的效果是:點擊按鈕,觸發(fā) <input> 輸入框點擊事件,從而實現(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: {
? ? ? ? ? ? // 按鈕點擊事件
? ? ? ? ? ? handleButtonSelected() {
? ? ? ? ? ? ? ? // 主動觸發(fā)點擊事件
? ? ? ? ? ? ? ? this.$refs.selectFiles.dispatchEvent(new MouseEvent('click')); ??
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>如何自動觸發(fā)點擊事件
? ?// 兩秒后模擬點擊
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,額外寫上點擊這個id會觸發(fā)的事件。1s后就會執(zhí)行
模擬點擊下載文件、圖片
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);以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))
這篇文章主要介紹了Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
Vue.js實現(xiàn)在下拉列表區(qū)域外點擊即可關(guān)閉下拉列表的功能(自定義下拉列表)
這篇文章主要介紹了Vue.js實現(xiàn)在下拉列表區(qū)域外點擊即可關(guān)閉下拉列表的功能(自定義下拉列表) ,需要的朋友可以參考下2017-05-05
15 分鐘掌握vue-next函數(shù)式api(小結(jié))
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10

