# vue3-components

**Repository Path**: FifiYu/vue3-components

## Basic Information

- **Project Name**: vue3-components
- **Description**: 使用vue3封装在vue项目上写过的组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-02-21
- **Last Updated**: 2025-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# vue_component

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


## 1 取消重复的http请求
> 测试过程中发现network中重复的请求确实canceled了, 但是在请求日志中还是看到了连续的请求, 还不知道原因, 以下是实现方法.
- 当请求方式method, 请求路径url, 请求参数(params/data) 都相同时, 可以视为同一个请求发送了多次, 需要取消之前的请求
- AXIOS 官网从v0.22.0开始, 已弃用CancelToken, 改用AbortController
- 以fetch API方式使用 AbortController 取消请求 <https://github.com/mdn/dom-examples/blob/master/abort-api/index.html>
- 我在 src > network > request.js 中封装了axios
- 使用虚拟API模拟请求<https://console.virapi.com/>

```js
  export const request = (config) => {
    //创建axios示例
    const instance = axios.create({
      baseURL: 'https://api.virapi.com',
      timeout: 3000,
      headers: {
        // 'Content-Type': 'application/x-www-form-urlencoded',
        "app-token": '$2a$10$29LBQK.7YTrIxCWNIWzbWeGv/d4qEIK6qNxtmtpWLxrFFI5Iub9bq'
      }
    })
    // instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    //2.axios的拦截器
    //2.1请求拦截的作用
    instance.interceptors.request.use(config => {
      // console.log(config);
      //1.比如说config中的一些信息不符合服务器的要求，需要加工一下
      //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
      //3.某些网络请求（比如登录（token））必须携带一些特殊的信息
      //4.取消请求主要有两个场景：
      // 当请求方式method，请求路径url，请求参数（get为params，post为data）都相同时，可以视为同一个请求发送了多次，需要取消之前的请求
      // 当路由切换时，需要取消上个路由中未完成的请求

      removePending(config) // 在请求开始前，对之前的请求做检查取消操作
      addPending(config) // 将当前请求添加到 pending 中
      return config
    }, err => {

      // 处理请求错误
      return Promise.reject(err)
    })
    //2.2响应拦截
    instance.interceptors.response.use(res => {
      // 将请求在请求列表中移除
      removePending(res)
      return res.data
    }, err => {
      // 异常情况console，方便排查问题
      console.log('error', err)
      // 移除重复请求
      removePending(err.config || {})

      return Promise.reject(err)
    })
    // 返回真正的请求
    return instance(config)
  }

  // 声明一个 Map 用于存储每个请求的标识 和 取消函数
  const pending = new Map()
  /**
   * 添加请求
   * @param {Object} config 
   */
  const addPending = (config) => {
    const url = [
      config.method,
      config.url,
      qs.stringify(config.params),
      qs.stringify(config.data)
    ].join('&')
    // config中有 noCancel标识表示不需要加入pending
    if(!config.noCancel){
      let controller = new AbortController();
      const signal = controller.signal;
      config.signal = signal
      if (!pending.has(url)) { // 如果 pending 中不存在当前请求，则添加进去
        pending.set(url, controller)
      }
      // 原 CancelToken方法
      // config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
      //   // cancel 函数的参数会作为 promise 的 error 被捕获
      //   if (!pending.has(url)) { // 如果 pending 中不存在当前请求，则添加进去
      //     pending.set(url, cancel)
      //   }
      // })
    }
  }
  /**
   * 移除请求
   * @param {Object} config 
   */
  const removePending = (config) => {
    const url = [
      config.method,
      config.url,
      qs.stringify(config.params),
      qs.stringify(config.data)
    ].join('&')
    if (pending.has(url)) { // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
      // const cancel = pending.get(url)
      // cancel(url)
      const controller = pending.get(url)
      // 取消请求
      controller.abort()
      pending.delete(url)
    }
  }
```

- 使用方法
  
```vue
  <template>
  <div>
  <el-button type="primary" @click="cancelTokenGet">点击取消重复Get请求</el-button>
  <el-button type="primary" @click="cancelTokenPost">点击取消重复Post请求</el-button>
  </div>
</template>

<script>
import {request} from "network/request"

export default {
  name:'useMessage',
  methods:{
     cancelTokenGet(){
      request({
        url:'/vir_gitee2686ce3bg5350/demo/visualapi',
        headers:{
        },
        // noCancel:true
      }).then(res=>{
        console.log(res)
      }).catch((err)=>{
        console.log(err)
      })
    },
     cancelTokenPost(){
      request({
        url:'/vir_gitee2686ce3bg5350/demo/comment',
        method:'post',
        headers:{
          'Content-Type': 'application/json',
        },
        data:{
          id:123,
          content:'评论'
        }
      }).then(res=>{
        console.log(res)
      }).catch((err)=>{
        console.log(err)
      })
    }
  }
}
</script>
```

## 2.install()方法
- 使用install()注册全局组件, 全局自定义指令

```js
export default {
  install(app) {
    组件
    指令
  }
}
```
- 在components > message 和 utils > directive > has 中均暴露了install() 
  - message 为自定义提示, 在vue2中通过Vue.extend创建组件构造器, 挂载组件;在vue3中需要使用 {createVNode, render}渲染组件,此处我使用了vuex控制组件显示,也可直接使用data控制,  以下是使用方法
   ```js
    this.$cus_message('success')
    ```
   - has 为自定义指令, 用于控制权限按钮的显示, 以下是使用方法
    ```js
     <el-button  v-has="'权限名称'" type="text" size="small">编辑</el-button>
    ```

## 3.vue.draggable
- <https://github.com/SortableJS/vue.draggable.next>
- 使用vuedraggable实现控制表头顺序 views > CusColumn.vue

## 4.vue-router导航守卫
- 使用router.beforeEach((to,from) => {}) 注册全局前置守卫, 在用户访问没有权限的路由时, 跳转至提示页面

## 5.动态菜单

- 封装NavMenu组件, 用于展示根据用户权限返回的菜单列表
- components > layout > NavMenu