Vue中的點點滴滴在此記錄

我不是寫文章方面的能手，在vue中不斷的學習和入坑，寫一些小技巧和解決方法，如果您是大佬，那請大佬給小弟我一些意見（剛剛開始哦）

選單

這可能是我見過的（現在）最好用的移動端拖拽的vue.js元件了

生命週期之destroyed簡單使用

vue中常用的路由傳遞引數的技巧

vue中ui(vant)中按需載入

vue路由設定相關標題

vue中使用第三方ui框架之樣式穿透方式

vue中傳遞引數的幾種方式（非路由）

minxins的好處

——————————————————————————————簡單的分割線

<a id="vue-01"target="_self">這可能是我見過的（現在）最好用的移動端拖拽的vue.js元件了

有這樣的需求，需要在移動端移動/拖拽相關的選單，並在其他地方（可能是父子路由，也可能是獨立的路由之間保持同步關係的時候，就需要使用拖拽元件來解決需要的問題了），

強大的元件地址vue-slicksort

上面的gif截圖中的效果，使用的就是[vue-slicksort]這個強大的元件來完成的，首先我先將我實現的程式碼奉上，請各位朋友，給我相關的建議哦

1.1 先進行元件安裝方式

####### 1.1.1(npm方式)

$ npm install vue-slicksort --save
複製程式碼

####### 1.1.2(yarn方式)

$ yarn add vue-slicksort
複製程式碼

1.2然後在子元件中的template模板中建立相關的骨架，如下(稍後會簡單說明其中引數的含義)

 <div class="root">
      <SlickList lockAxis="y" v-model="dropmenu" :useDragHandle="useDragHandle":pressDelay="pressDelay"
      @sortStart="onsortStart($event)"ref="SlickList"@input="oninput($event)">
        <SlickItem v-for="(item, index) in dropmenu"v-if="index>0" :index="index" :key="index">
          <div class="menu-list">
            <div class="list-left">
              <span class="iconfont icon-caidan"></span>
              <span class="text">{{item.title}}</span>
            </div>
            <div class="list-right">
              <span class="iconfont icon-kaiguan4"></span>
            </div>
          </div>
        </SlickItem>
      </SlickList>
      </div>
複製程式碼

2.接著匯入官網文件中提出的元件

<script>
 import { SlickList, SlickItem } from 'vue-slicksort';
 
 props:{
        //通過父傳遞給子的選單列表（也可能是物件）
        menu:[Array,Object],
        currentItem:Number,
        dragListShow:Boolean,
        dragTitle:String,
        useDragHandle:Boolean,
        pressDelay:Number,
      },
      data(){
        return{
          currentIndex:this.currentItem,//移動的下標
          username:'',
          dropmenu:this.menu,//需要拖動的目標源(如選單)

        }
      },
      methods:{
        onsortStart(e){
        },
        oninput(list){
          localStorage.setItem('droplist',JSON.stringify(list))
        },  
      },
      components:{
        SlickItem,
        SlickList,
      },
     
</script>
複製程式碼

3. 相關程式碼中的引數簡述

####### 3.1

####
| 引數名稱 | 型別 | 作用 |
| :-------- | --------:| :--: |
| lockAxis | String | 用於排序時在座標系中鎖定元素的移動 |
| useDragHandle | Boolean（預設是false） | 如果使用HandleDirective，設定為true |
| pressDelay| Number(預設是0)|如果需要當元素被按下一段時間再允許拖拽，可以設定這個屬性 |
|sortStart|event, node, index, collection|當拖拽開始時觸發|
|input|newList|當拖拽結束後產生新的列表時觸發|
#### 結語
複製程式碼

4 遇到的問題

####### 4.1當父子元件通訊時，如果子元件props接收的引數，直接使用如下

<div class="root">
      <SlickList lockAxis="y" v-model="dropmenu" :useDragHandle="useDragHandle":pressDelay="pressDelay"
      @sortStart="onsortStart($event)"ref="SlickList"@input="oninput($event)">
        <SlickItem v-for="(item, index) in dropmenu"v-if="index>0" :index="index" :key="index">
          <div class="menu-list">
            <div class="list-left">
              <span class="iconfont icon-caidan"></span>
              <span class="text">{{item.title}}</span>
            </div>
            <div class="list-right">
              <span class="iconfont icon-kaiguan4"></span>
            </div>
          </div>
        </SlickItem>
      </SlickList>
      </div>
      //dropmenu將這個變成menu時，會出現沒有效果，這是因為vue官網說了vue 2.x元件之間的關係是單向的,不明白的朋友，可以點選這些
複製程式碼

props 很詳細的說明為什麼不能子元件直接修改父元件引數的原因了

生命週期之destroyed簡單使用

大家對於驗證碼這個功能應該不陌生吧，不管是ios,android,還是h5(web app)都寫過相關的，這個功能不難，先上我寫的程式碼吧

export  const  Btnlist=function ({commit,state},update) {
  let count=state.btnlist.btnMinute;
  clearInterval(countdonw)
  let countdonw=setInterval(CountDown,1000);
  function CountDown(){
    state.btnlist.disabled1=true;
    state.btnlist.updateText=`重新傳送${count}s`;
    if(count===0){
      state.btnlist.disabled1=false;
      state.btnlist.updateText=update
      clearInterval(countdonw)
      geturl(state)
      btnCount++
    }
    count--;
    commit(types.SETBtnlist,state.btnlist)
  }
}
複製程式碼

簡單描述上面我寫的程式碼的過程，採用vuex的actions進行倒數計時的功能，其中使用了setInterval(function,秒數)讓其進行相關的倒數計時，並讓count--,程式碼不難吧，如果用到當前頁面時，可能不會發現程式碼的相關問題，以為是OK了.........

5.倒數計時出現了什麼問題呢?

####### 5.1 場景和問題(因為專案程式碼，不方便提供截圖和程式碼了)

假如你在login.vue這個元件中編寫了這樣的場景，一個使用者名稱輸入框和密碼輸入框，及提交按鈕，編寫了相關的邏輯（如正則驗證了使用者名稱和密碼是否合法之類的功能），也做了驗證碼的倒數計時功能，準備點提交之後，確實功能實現了，但問題出現了，這邊可能會出現一個問題，

######## 5.1.1 如果跳轉成功後，倒數計時如果還沒有變成0呢，會出現什麼情況（PC和移動端時） ######## 5.1.2 如果點瀏覽器自帶的後退箭頭按鈕，倒數計時又會怎麼樣？（PC瀏覽器端是我們程式設計師故意這麼做的時候） ######### 其中這2種情況，會造成相同的問題，當count還是大於0的時候，一直會在瀏覽器內部執行CountDown()方法，直到count=0的時候，它才會停止，雖然count=0才會停止，可能保證CountDown()方法停止[真的嗎],（本菜鳥這方面沒研究過，有研究過的朋友，可以給我說下原理，本菜鳥先在這邊謝謝了） ######## 5.2 解決方法（本菜鳥的）使用vue的生命週期 destroyed此api方法，可以解決故意後退或者返回相關操作來解決倒數計時問題，虛擬碼如下(寫上你所需要的邏輯即可)

destroyed(){
    button=false;
    count=0
}
複製程式碼