国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue.js實現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

daydream / 2950人閱讀

摘要：好了，讓我們來實現(xiàn)一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。

在網(wǎng)上看到一個這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:

這個網(wǎng)站是用react.js來寫的，于是，我就想著用vue.js也來寫一版，開始擼代碼。

首先要分析打字的原理實現(xiàn)，假設(shè)我們定義一個字符串str,它等于一長串注釋加CSS代碼，并且我們看到，當(dāng)css代碼寫完一個分號的時候，它寫的樣式就會生效。我們知道要想讓一段CSS代碼在頁面生效，只需要將其放在一對

你可以狠狠點擊此處具體示例查看效果。

當(dāng)看到打字效果的時候，我們不難想到，這是要使用間歇調(diào)用(定時函數(shù):setInterval())或超時調(diào)用(延遲函數(shù):setTimeout())加遞歸去模擬實現(xiàn)間歇調(diào)用。一個包含一長串代碼的字符串，它是一個個截取出來，然后分別寫入頁面中，在這里，我們需要用到字符串的截取方法，如slice(),substr(),substring()等，選擇用哪個截取看個人，不過需要注意它們之間的區(qū)別。好了，讓我們來實現(xiàn)一個簡單的這樣打字的效果，如下:




  
  
  JS Bin

你可以狠狠點擊此處具體示例查看效果。好的，讓我們來分析一下以上代碼的原理,首先放一個用于包含代碼顯示的標(biāo)簽，然后定義一個包含代碼的字符串，接著定義一個初始值為0的變量，為什么要定義這樣一個變量呢？我們從實際效果中看到，它是一個字一個字的寫入到頁面中的。初始值是沒有一個字符的，所以，我們就從第0個開始寫入，c一個字一個字的加，然后不停的截取字符串，最后渲染到標(biāo)簽的內(nèi)容當(dāng)中去，當(dāng)c的值大于等于了字符串的長度之后，我們需要清除定時器。定時函數(shù)看著有些不太好，讓我們用超時調(diào)用結(jié)合遞歸來實現(xiàn)。




  
  
  JS Bin

你可以狠狠點擊此處具體示例查看效果。

好了，到此為止，算是實現(xiàn)了第一步，讓我們繼續(xù)，接下來，我們要讓代碼保持空白和縮進(jìn)，這可以使用

標(biāo)簽來實現(xiàn)，但其實我們還可以使用css代碼的white-space屬性來讓一個普通的div標(biāo)簽保持這樣的效果，為什么要這樣做呢，因為我們還要實現(xiàn)一個功能，就是編輯它里面的代碼，可以讓它生效。更改一下代碼,如下:





  
  
  JS Bin
  


  

  





你可以狠狠點擊此處具體示例查看效果。


接下來，我們還要讓樣式生效，這很簡單，將代碼在style標(biāo)簽中寫一次即可，請看:





  
  
  JS Bin
  


   

   
   
  

 



你可以狠狠點擊此處具體示例查看效果。


我們看到代碼還會有高亮效果，這可以用正則表達(dá)式來實現(xiàn)，比如以下一個demo:






    
    
    
    代碼編輯器
    



    
        

            
{{ greeting }} world!

        

    
    
        //定義一個javascript對象
        var obj = { 
            greeting: "Hello," 
        }; 
        //創(chuàng)建一個實例
        var vm = new Vue({ 
            data: obj 
        });
        /*將實例掛載到根元素上*/
        vm.$mount(document.getElementById("app"));
    
    






你可以狠狠點擊此處具體示例查看效果。


不過這里為了方便，我還是使用插件Prism.js,另外在這里，我們還要用到將一個普通文本打造成HTML網(wǎng)頁的插件marked.js。


接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件.sync事件修飾符，自行查看官網(wǎng)vue.js。


雖然這里用原生js也可以實現(xiàn)，但我們用vue-cli結(jié)合組件的方式來實現(xiàn)，這樣更簡單一些。好了，讓我們開始吧:


新建一個vue-cli工程(步驟自行百度):


新建一個styleEditor.vue組件,代碼如下:








新建一個resumeEditor.vue組件,代碼如下:




 



新建一個底部導(dǎo)航菜單組件bottomNav.vue,代碼如下:








接下來是核心APP.vue組件代碼:









到此為止，一個可以快速跳過動畫，可以暫停動畫，還有音樂播放，還能自由編輯代碼的會動的簡歷已經(jīng)完成，還添加了用戶來控制寫字速度快慢的功能。代碼已上傳至git源碼,歡迎fork,也望不吝嗇star。


在線預(yù)覽。 


鄙人創(chuàng)建了一個QQ群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103275.html

相關(guān)文章

  • vue.js實現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

    摘要：好了，讓我們來實現(xiàn)一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。 在網(wǎng)上看到一個這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

    luffyZh 評論0 收藏0

  • vue.js實現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

    摘要：好了，讓我們來實現(xiàn)一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。 在網(wǎng)上看到一個這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

    FleyX 評論0 收藏0

  • 前端學(xué)習(xí)資源

    摘要：掘金日報第四期使用怎么能不知道這些插件合集掘金日報主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分前端后端產(chǎn)品設(shè)計工具資源和一些有趣的東西。目前已經(jīng)涵蓋了的相關(guān)資源鏈接，供大家參考與學(xué)習(xí)。 【掘金日報】第四期 使用Sublime？怎么能不知道這些 Sublime 插件合集！ 掘金日報主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分：前端、后端、Android、iOS、產(chǎn)品設(shè)計、工具資源和一些有趣的東西。 前端...

    xzavier 評論0 收藏0

  • 前端學(xué)習(xí)資源

    摘要：掘金日報第四期使用怎么能不知道這些插件合集掘金日報主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分前端后端產(chǎn)品設(shè)計工具資源和一些有趣的東西。目前已經(jīng)涵蓋了的相關(guān)資源鏈接，供大家參考與學(xué)習(xí)。 【掘金日報】第四期 使用Sublime？怎么能不知道這些 Sublime 插件合集！ 掘金日報主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分：前端、后端、Android、iOS、產(chǎn)品設(shè)計、工具資源和一些有趣的東西。 前端...

    weij 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<