封装代码合集

我是朋朋啊

已于 2023-07-18 14:04:54 修改

阅读量480

点赞数 2

分类专栏：前端学习笔记文章标签： vue.js javascript

于 2022-01-18 09:18:57 首次发布

本文链接：https://blog.csdn.net/weixin_44535571/article/details/122552919

版权

前端学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

封装动态添加路由(router.beforeEach)

动态路由封装

对比两个对象是否完全相同

对象是否完全想同

使用axios.create 封装参数

request (options) {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }

其中options的配置项

  baseURL: 'https://s-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar',"token","token"},
  url:``,
  methods:"post/get///",
  data,
  paramas,

盒子拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body { 
        display: flex;
        padding: 100px;
    }
    div {
        width: 100px;
        height: 100px;
        margin-right: 50px;
    }
</style>
<body>
    <div style="background:purple" draggable="true">DIV1</div>
    <div style="background:orange" draggable="true">DIV1</div>
    <div style="background:aqua" draggable="true">DIV1</div>
</body>
<script>
    let div = document.getElementsByTagName("div");
    let container = null;
    for(let i=0;i<div.length;i++){
        // 开始拖动的时候 把拖动的盒子保存
        div[i].ondragstart = function(){
            container = this;
        }
        // 默认的当你dragover的时候会阻止做drop操作 所以要取消这个默认设置
        div[i].ondragover = function(){
            event.preventDefault();
        }
        // 当结束的时候,给拖动的div所在位置下面的div做drop事件
        div[i].ondrop = function(){
            if (container != null && container != this) {
                let temp = document.createElement("div")
                document.body.replaceChild(temp,this)
                document.body.replaceChild(this,container)
                document.body.replaceChild(container,temp)
            }
        }
    }
</script>
</html>