前端小册

Appearance

On this page

Vue使用过程小记（持续更新） ​

指令 ​

  • v-bind可以绑定对象
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

利用函数来传递数据有奇效 ​

// 表格是否可以勾选判断条件
selectable: {
  type: Function,
  default: () => {
    return true;
  }
}

vue的dispatch ​

  • 同级的actions可以引入dispatch
GenerateRoutes({ dispatch, commit }, data) {
  ...
}
  • dispatch最多就只接受两个参数，type和payload

传递第三个，为undefined

dispatch('AddRoutesIndex', {
  routes: accessedRouters,
  index: schoolRouterIndex
});

ElementUI中el-tabs组件中el-table的宽度问题 ​

在tabs使用table会出现滚动条遮住内容可以使用v-if控制el-tab-pane里的内容 例如v-if="activeName === 'second'"

通过跨域方式获取信息 ​

项目token.html引入cross-storage可以跨域获取信息

// utils/auth.js

var iportal = new CrossStorageClient('token.html');
iportal.onConnect().then(() => iportal.get(accessToken)).then(token_list => {
  const tokenObj = JSON.parse(token_list); // { "access_token":"4bd53dcc-2e94-4652-9463-d4495c2509ad", "token_type":"bearer", ... }
  resolve(tokenObj);
});

RefreshToken获取方案 ​

// /config/fetch.js
...
let isRefreshing = false; // refresh_token是否刷新成功
let queueRequests = []; // refresh_token刷新并行接口集合队列
switch (status) {
  case 401:
    const { config } = error.response;
    if (!isRefreshing) {
      isRefreshing = true;
      const refreshToken = RefreshToken.getInstance(store.state.config.webIportalURL);
      return refreshToken.init().then(token => {
        if (token && token.refresh_token && token.isPastDue) {
          config.headers.Authorization = token.token_type + ' ' + token.access_token;
          config.url = config.url.substr(config.url.indexOf('api/') + 4);
          queueRequests.forEach((cb) => cb(token))
          // 重试完清空这个队列
          queueRequests = []
          return axios(config);
        } else {
          ...
        }
      }).finally(() => {
        isRefreshing = false
      });
    } else {
      return new Promise((resolve) => {
        // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
        queueRequests.push((token) => {
          config.headers.Authorization = token.token_type + ' ' + token.access_token;
          config.url = config.url.substr(config.url.indexOf('api/') + 4);
          resolve(axios(config));
        })
      })
    }      
    break;
  case 403:
        ...