2. 程式人生 > >vue2.0實現點擊後顯示，再次點擊隱藏

vue2.0實現點擊後顯示，再次點擊隱藏

阿新 • • 發佈：2018-11-22
all element cli html glob .com 狀態 right sna

描述。點擊系統切換，彈出系統切換框。再次點擊系統切換，隱藏。點擊其他地方。也會隱藏

在layout.vue中寫的html代碼

技術分享圖片

技術分享圖片

1、在main.js中寫入全局函數

// 定義全局點擊函數,右側系統切換點擊其他地方隱藏系統切換菜單，在layout.vue中使用 Vue.prototype.globalClick = function (callback) { document.onclick = function () { callback(); }; }; 2、在layout.vue中的js部分代碼 mounted: function () { // 調用切換菜單
this.globalClick(this.moreSetupMenuRemove); }, methods:{　 moreSetupMenuRemove () { if(this.isshow && this.istagetShow){ this.leave(document.getElementsByClassName("switch-system")[0]); this.isshow = false; this.istagetShow = false; }else{
this.istagetShow = !this.istagetShow; if(!this.isshow){ this.istagetShow=false; } } }, toggle: function () { this.isshow = !this.isshow; }, leave: function (el, done) { el.style= "right : -200px"; console.log("leave方法");
}, // 以下三個與enter相關的方法只會在元素由隱藏變為顯示的時候才會執行 // el:指的是當前調用這個方法的元素對象 // done:用來決定是否要執行後續的代碼如果不執行這個方法，那麽將來執行完before執行完enter以後動畫就會停止 beforeEnter: function (el) { console.log("beforeEnter"); // 當入場之前會執行 v-enter el.style = "right: -200px"; }, enter: function (el, done) { console.log("enter"); // 為了能讓代碼正常進行，在設置了結束狀態後必須調用一下這個元素的 // offsetHeight / offsetWeight 只是為了讓動畫執行 el.offsetHeight; // 結束的狀態最後啊寫在enter中 el.style = "right: 0px"; // 執行done繼續向下執行 done(); } }

vue2.0實現點擊後顯示，再次點擊隱藏

相關推薦

vue2.0實現點擊後顯示，再次點擊隱藏

all element cli html glob .com 狀態 right sna 描述。點擊系統切換，彈出系統切換框。再次點擊系統切換，隱藏。點擊其他地方。也會隱藏 在layout.vue中寫的html代碼 1、在main.js中寫入全局函數 // 定義全局點擊

求解！ vue2.0實現購物車小球掉落特效第一次點選動畫失效（男默女淚的bug!）

點選新增按鈕時有一個小球掉落到購物車的特效，第一次點選時動畫特效沒有出來，且沒有進入afterEnter方法。後面點選都沒有問題。 效果如圖：（第一次點選） 但是我在enter方法裡面下了一個斷點之後就有動畫效果，且進入了afterEnter。效果如下： 希望大

點選顯示，再次點選除自身外隱藏效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

android點選home鍵，再次點選程式圖示重新啟動程式

今天無意中在網上看到一個部落格，上邊記錄著一個問題，就是程式，點選home鍵，返回 桌面，然後再次點選圖示，結果程式重啟。 我當時覺得我的軟體應該沒這個問題吧，結果一試，竟然也有這樣的問題，就搜尋了一下，現在把解決方法記錄一下 分析原因：我將啟動的Activ

TextView 點選後更改顏色 再次點選還原顏色

場景效果: 普通狀態:黑色 點選後變紅色 再次點選變黑色 依次重複 1:主佈局中 <TextView android:id="@+id/tv_TV" android:layout_width="wrap_content"

vue2.0 實現click點擊當前li，動態切換class

一行 for ont pla false style function float del <template>　　<div>　　　　<ul>　　　　　　<li v-for="(item,$index) in items" @cli

vue2.0實現圖片加載失敗默認顯示圖片

bsp asset mage res highlight return ner url onerror <div class="bg"> <img :src="goods.phoneFloorAd.resUrl" :onerror="error

實現類似於QQ空間相簿的點選圖片放大，再點後縮小回原來位置

package com.kale.gridviewanimtest; import android.graphics.Point; import android.graphics.Rect; import android.view.View; import android.view.Vie

讓窗體最小化到工作列中，雙擊後顯示回來

      1.給窗體拖一個NotifyIcon控制元件，按下F4，設定其屬性，如圖片屬性 2.用滑鼠選擇窗體，，按下F4，給其新增尺寸變化事件       /// <summary>         /// 最小化後需要處理的委託         /// &

圖片點擊放大，再次點擊回到原來狀態（圖片縮放）

點擊事件 nbsp 尺寸 狀態 調用 ges cnblogs view tps 1.生成一個類，繼承自UIView（ScalePictures），在這個類的.h中聲明一個類方法： +(void)scanBigImageView:(UIImageView *)currentI

基於vue2.0實現仿百度前端分頁效果（二）

前言 上篇文章中，已經使用vue實現前端分頁效果，這篇文章我們單獨將分頁抽離出來實現一個分頁元件 先看實現效果圖 程式碼實現 按照慣例，我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging

vue2.0 實現富文字編輯器功能

前端富文字編譯器使用總結： UEditor：百度前端的開源專案，功能強大，基於 jQuery，但已經沒有再維護，而且限定了後端程式碼，修改起來比較費勁 bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery... kindEditor：功能強大，程

Jquery滑鼠點選後變色，點選另一個按鈕顏色還原

轉載一個！ Jquery滑鼠點選後變色，點選另一個按鈕顏色還原 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

vue2.0 實現漢字A-Z排序與手機通訊錄效果

先上一張效果圖： 列表html  template  (使用 ydui移動端UI  , 地址：http://vue.ydui.org/) <yd-cell-group v-for="item in memberList" :title="item

android開發時為日期控制元件設定選擇範圍，再次點選時顯示上次選擇日期

下面做的是：28天<= 日期 <=65週歲 //計算28天前的日期 public static final long _MAX_TIME = 28 * 24 * 60 * 60 * 1000L;int inComingYear;int inComingMonth;int

element-ui+vue2.0 實現登入並實現一週內記住密碼

1.檔案目錄 2.主頁index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="

vue2.0 實現導航守衛 --- 齊梟飛 前端開發攻城獅（路由守衛） 使用vue-router+vuex進行導航守衛

路由跳轉前做一些驗證，比如登入驗證，是網站中的普遍需求。 對此，vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛（navigation-guards）。 導航守衛（navigation-guards）這個名字，聽起來怪怪的

利用html和Jquery實現照片牆（點選之後放大，再點選縮小）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jque

詳解基於Vue2.0實現的移動端彈窗(Alert, Confirm, Toast)元件

wc-messagebox 基於 vue 2.0 開發的外掛 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生UI(樣式來源: MUI) 一些想法 剛開始的時候想要用現成的彈窗元件來著, 但是查詢一圈沒有發現比較合適專

ASP.NET中怎樣實現圖片驗證碼功能，並且點選圖片會重新整理

------ 基本思路： 圖片的src=後臺的一個函式，此函式返回按照一定規則生成的圖片檔案流。 然後此圖片即可生成。 那麼怎樣重新整理驗證碼呢，這是個問題。 因為給圖片的src賦了值之後，想要更換一個圖片，那麼src的那個函式必須再執行一次才行。 <img src=