$nextTick()

$nextTick()的理解小崔的博客-CSDN 博客

vue 的 dom 是异步更新的，当 v-if 满足后，并不能立马获取到元素

<div id=app>
  <div id="div" v-if="showDiv">我是显示文本</div>
  <button @click="showAndGetText">获取内容</button >
</div>
<script>
var app = new Vue({
  el: '#app',
  data () {
    return {
      showDiv : false
    },
    methods: {
      showAndGetText () {
        this.showDiv  = true
        this.$nextTick(function () {
        let text = document.getElementById('div').innerHTML
        console.log(text)
        })
      }
    }
  }
})
</script>
​

自定义 Markdown 目录

解析目录

先用 vditor 解析为 HTML，在 after 回调函数里获取元素中的所有 h1 到 h6 的元素，设置自定义属性 name=element.textContent，便于监听点击然后解析成{index,headText}的数组，返回给父组件，然后再将不连续的 index 变为连续的，例如 3,0,1,1,4 变为 0,0,1,1,2，两个指针，pre=-1 和 current，然后 i 从 0 开始遍历数组，current=[i].index，current>pre，current=pre+1，current<pre && current!=pre-1，current=0，pre=current，然后再解析为 VTreeview 需要的数据格式[{id,name,children}]

监听滚动

监听滚动，拿到 index，设置 VTreeview 的 active

监听点击

nextTick 里拿到 VTreeview，然后遍历对 v-treeview-node__root 和 v-treeview-node__label 设置点击事件，拿到 name，然后根据之前遍历 h1 到 h6 设置的 name 获取元素，然后调用 $vuetify.goTo()即可

自定义 axios

创建新 instance+ 自定义 request 拦截器

先创建 js 文件，配置不需要 route 的方法，例如 request 拦截器

// static/js/myrequest.js
import axios from "axios";
import {getToken} from "~/static/js/utils/auth";
import errorCode from "~/static/js/utils/errorCode";

// Create a custom axios instance
const request = axios.create({
  //TODO axios中请求配置有baseURL选项，表示请求URL公共部分
  // baseURL: 'https://ordinaryroad.top',
  baseURL: 'https://localhost',
  // 超时
  timeout: 10000,
  // 携带cookie信息,保持session的一致性
  withCredentials: true
})

// request.onRequest(config => {
//   console.log('Making request to ' + config.url)
//   console.log('onRequest', config)
// })
//
// request.onError(error => {
//   console.log("onError", error)
//   const code = parseInt(error.response && error.response.status)
//   if (code === 400) {
//     redirect('/400')
//   }
// })

// request拦截器
request.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?';
    for (const propName of Object.keys(config.params)) {
      const value = config.params[propName];
      var part = encodeURIComponent(propName) + "=";
      if (value !== null && typeof (value) !== "undefined") {
        if (typeof value === 'object') {
          for (const key of Object.keys(value)) {
            // let params = propName + '[' + key + ']';
            let params = propName;
            var subPart = encodeURIComponent(params) + "=";
            url += subPart + encodeURIComponent(value[key]) + "&";
          }
        } else {
          url += part + encodeURIComponent(value) + "&";
        }
      }
    }
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

export default request  
​

自定义 response 拦截器 +this.$request

然后创建 plugin，并在 nuxt.config.js 启用，配置需要 route 的方法，例如 response 拦截器

然后可以在 vue 中用 this.$request 调用自定义拦截器后的 axios

// plugins/request.js
import request from '~/static/js/myrequest';
import errorCode from "~/static/js/utils/errorCode";
// export default function ({$axios}, redirect, inject) {
export default function ({$axios, route, app}, inject) {

  const {store, router} = app;

  // 响应拦截器
  request.interceptors.response.use(res => {
      // 未设置状态码则默认成功状态
      const code = res.data.errorCode || 200;
      // 获取错误信息
      const msg = errorCode[code] || res.data.errorMsg || errorCode['default']
      if (code === 2001) {
        if (confirm('登录状态已过期\n螺线继续留在该页面请按取消键，重新登录请按确认键')) {
          store.dispatch('user/LogOut').then(() => {
            router.push({path: '/dashboard/user/login', query: {redirect: route.fullPath}})
          })
        }
        /**
         MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
         ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
         **/
        return Promise.reject(new Error(msg))
      } else if (code === 500) {
        alert(msg)
        /**
         Message({
        message: msg,
        type: 'error'
      })
         **/
        return Promise.reject(new Error(msg))
      } else if (code !== 200) {
        alert(msg)
        /**
         Notification.error({
        title: msg
      })
         **/
        // return Promise.reject('error')
        return res.data
      } else {
        return res.data
      }
    },
    error => {
      console.log('err' + error)
      let {message} = error;
      if (message === "Network Error") {
        message = "后端接口连接异常";
      } else if (message.includes("timeout")) {
        message = "系统接口请求超时";
      } else if (message.includes("Request failed with status code")) {
        message = "系统接口" + message.substr(message.length - 3) + "异常";
      }
      alert(msg)
      /**
       Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
       **/
      return Promise.reject(error)
    }
  )

  // Inject to context as $request
  inject('request', request)
}
​