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
}
复制代码

转载于:https://juejin.im/post/5b3e8d12f265da0f6a033627