1. 程式人生 > >取消使用者所有操作,恢復初始狀態是怎麼實現的?

取消使用者所有操作,恢復初始狀態是怎麼實現的?

在產品開發中經常會出現一種需求——使用者對v-for模組內容作了一系列修改後,突然發現改錯了,那麼產品如何在不重新整理頁面的前提下友好的幫助使用者一步回到未改變之前的狀態?

首先需要獲取到可能需要復原的DOM:JQ or ref
// 用來獲取ref的字串
let ref = `tbody-button${index}`
// 獲取到點選的ref物件
let refs = this.$refs[ref][0]
// 點選的DOM
let el = refs.$el
DOM克隆 + DOM插入:這裡相當於一個冰點,保留原始資料,需要在合適的時機克隆
$(el).after($(el).clone(true
).css('display', 'none'))
此處進行了一系列DOM操作
根據使用者操作動態替換DOM節點
$(el).next().replaceWith($(el))
or
$(el).replaceWith($(el).next())

相關推薦

取消使用者所有操作恢復初始狀態是怎麼實現的?

在產品開發中經常會出現一種需求——使用者對v-for模組內容作了一系列修改後,突然發現改錯了,那麼產品如何在不重新整理頁面的前提下友好的幫助使用者一步回到未改變之前的狀態? 首先需要獲取到可能需要復原的DOM:JQ or ref // 用來獲取ref的字串

重置cmd恢復初始狀態

最近在網上看到很多網友想了解cmd(DOS)恢復預設設定的方法,進過本人的實踐,得出以下結論:(僅供參考) cmd(DOS)是嵌在windows作業系統內的一個子系統,因此也會受到windows作業系統的管理 大家可能都知道,windows管理自身內的應用軟體時,會

點擊旋轉再點擊恢復初始狀態

for htm all 具體實現 mov 實現 scl transform blue 今天遇到要做一個點擊 + 然後開始旋轉動畫後變成 x 具體實現如下 1.HTML <div class="box rotate"></div>

關於鏈表所有操作面試必考C++

val 插入 isl tail truct ise delete 彈出 添加 1 #include <iostream> 2 #include <stack> 3 using namespace std; 4 //鏈表的結構

Qt 畫圖工具擦除操作恢復透明色

在以transparent填充的QPixmap上用紅色畫筆畫出了線,現需要擦除部分紅色,恢復出原來的透明色。 使用QPainter::CompositionMode 影象疊加模式 下圖簡單示意了10種模式: 在Qt的官方文件裡我們也找到了具體模式的解釋

誤刪資料庫怎麼辦?mysql 回滾撤銷操作恢復資料

剛剛不小心把資料庫刪掉了,於是想著上網上找找有沒有可以恢復資料庫的方法,沒想到還真有,除了備份以外,還有以下方法。 在mysql有時執行了錯誤的update或者delete時導致大量資料錯誤恢復的辦法。執行時沒有開啟事務,也沒有對資料進行。這時就需要使用到sqlbinlog工具。 sqlbinlog需要開

CF E. Vasya and a Tree】 dfs+樹狀陣列(給你一棵n個節點的樹每個點有一個權值,初始全為0m次操作,每次三個數(v, d, x)表示只考慮以v為根的子樹所有與v點距離小於等於d的點權值全部加上x所有操作完畢後,所有節點的值)

題意: 給你一棵n個節點的樹,每個點有一個權值,初始全為0,m次操作,每次三個數(v, d, x)表示只考慮以v為根的子樹,將所有與v點距離小於等於d的點權值全部加上x,求所有操作完畢後,所有節點的值   首先要明確兩件事情性質1.每個人的操作只會影響到他的子孫(包括自己) 性質1.每個人的操

logminer挖掘歸檔日誌針對DDL誤操作恢復

oracle object 日誌挖掘,未開啟補充日誌功能,利用歸檔對DDL操作進行恢復: Oracle 的日誌文件中,對於表等用戶對象(Object),並不是保存名字,而是保存一個ID號。建立字典文件的目的就是使logminer在分析時可以將Object ID翻譯

iptables規則備份和恢復firewalld的9個zonefirewalld關於zone的操作firewalld關於service的操作

firewalld service zone iptables 筆記內容:l 10.19 iptables規則備份和恢復l 10.20 firewalld的9個zonel 10.21 firewalld關於zone的操作l 10.22 firewalld關於service的操作筆記日期:201

oracle數據庫產生誤操作將一個字段置空了恢復數據

clas ora ati oracle數據庫 oracl col 就是 一個 log 工作的時候沒仔細檢查sql直接執行了,將線上的數據弄錯了,發現抓緊修改,還好只修改了一個表的一列; 在網上查了下oracle可以查詢24小時任何時刻的數據 select * from bt

這是一個定時腳本主要功能是遍歷該文件夾下的所有文件並存儲到數組對數據中的文件進行操作一個一個移動到指定的目錄下並刪除原有文件

for 定時 數據 gpo 刪除 目錄 復制文件 sleep 進行 1 #!/bin/bash 2 echo "這是一個定時腳本,主要功能是遍歷該文件夾下的所有文件並存儲到數組,對數據中的文件進行操作,一個一個移動到指定的目錄下,並刪除原有文件。" 3 j=0 4

掌握Git撤銷操作隨心所欲控制文件狀態

load idt 目的 慎用 transform pro git merge 影響 type 本文主要討論和撤銷有關的 git 操作。目的是讓讀者在遇到關於撤銷問題時能夠方便迅速對照執行解決問題,而不用去翻閱參數繁多的 git 使用說明。 一開始你只需了解大致功能即可,不

Vue頁面手動刷新導航欄激活項還原到初始狀態問題解決方案

item 每次 one emma == 題解 name efault mman 場景描述:在頁面中存在頂部導航和左側導航,左側導航和右側內容區使用了命名視圖實現,點擊左側導航的鏈接時,右側內容區相應顯示不同組件內容。問題:在當前鏈接手動刷新瀏覽器(例如:瀏覽器地址為/ent

手把手嘴對嘴講解UCOSII嵌入式操作系統的初始化過程(二)

同學 save sam 嵌入式操作系統 相關信息 trie allow 狀態 cos 本章重點講解空閑任務的建立過程。 任務建立函數定義如下: 1 INT8U OSTaskCreate (void (*task)(void *p_arg), 2

Oracle運維基本操作倒庫、備份、恢復與優化。

Oracle Linux Centos 系統 運維 Oracle基本操作創建表空間CREATE TABLESPACE test //這裏我們創建的表空間名稱叫做test,名字可以自定義 LOGGING DATAFILE ‘/data/ora01/app/oracle/oradat

SVN拉取後撤銷恢復未拉取之前的狀態

選項 歷史記錄 his 記錄 png 到你 上傳 this image 在做項目的時候,一不小心將服務器上的代碼覆蓋了本地的代碼,本來可以使用log查看svn上的歷史列表,然後選中某個選項,右鍵,點擊revert to this vision來使代碼恢復到任意一個版本。 可

vue 表格資料編輯點選取消或者完成按鈕後關閉編輯狀態沒有及時生效

點選編輯按鈕: 編輯狀態下,表格可以編輯。但是點選“確認”或者“取消”按鈕,列資料編輯狀態已經修改,但是檢視沒有改變。  頁面程式碼: 獲取當前行的index,並直接修改當前行用於判斷是否編輯狀態的資料為false(不可編輯);   根本原因是因為vue的檢視更新不及

vue 表格數據編輯點擊取消或者完成按鈕後關閉編輯狀態沒有及時生效

分享 inf bsp 狀態 修改 點擊 視圖 進行 解決 點擊編輯按鈕: 編輯狀態下,表格可以編輯。但是點擊“確認”或者“取消”按鈕,列數據編輯狀態已經修改,但是視圖沒有改變。 頁面代碼: 獲取當前行的index,並直接修改當前行用於判斷是否編輯狀態的數據為false

網頁爬蟲-通過已登入後的cookie模擬登陸狀態保持會話進行後續操作

剛開始的時候打算使用java程式直接登陸網站在進行後續操作,後來發現有些網站的重定向太多不好操作, 所以改用已登入的cookie 來保持會話, 使用方式很簡單,只需要在瀏覽器上登入你要操作的網站,然後獲取cookie值,將cookie放到程式裡就實現了儲存會話的功能了, 1、新增mave

sql server 操作 約束和備份恢復

--約束,確保資料滿足一定規則 --not null select * from emp select * from dept --unique 唯一性, --primary key 表中只有一個主鍵,但是可以將多個列定義為一個主鍵 cr