文档流

```js
// 导入 需要看暴露出的类型
import {getClassByType, getFileSize, isIE, getTypeByFileName} from "@/utils/util";
import {fileManagerApi} from "@/api/fileManagerApi";
//引入 lodash 防抖
let lodash = require('lodash')
// 引入 pdf.js 最新版都是坑
let PDFJS = require('pdfjs-dist');
import pdfWorker from "pdfjs-dist/build/pdf.worker.min";
PDFJS.GlobalWorkerOptions.workerSrc = pdfWorker
// 引入marked 解析md语法
import marked from 'marked'
const rendererMD = new marked . Renderer ()
marked . setOptions ({
  renderer: rendererMD ,
  gfm: true ,
  tables: true ,
  breaks: false ,
  pedantic: false ,
  sanitize: false ,
  smartLists: true ,
  smartypants: false
})
```

### 滚动条元素跳转


```javascript
        let element = document.getElementById('canvas' + val);
        element.scrollIntoView(); //跳转到指定id 是否要等渲染完成
```

### 监听滚动条时间

```javascript
 document.querySelector("#content-div").addEventListener('scroll', this.handleScroll)// 初始化监听事件
 handleScroll: lodash.debounce(function () {})
```

### 文档流

#### 默认上下布局，左右布局

- 空白折叠现象。



```html
// 比如，如果我们想让img标签之间没有空隙，必须紧密连接.
<img src="img/00.jpg"/><img src="img/02.jpg"/>
```

- 高矮不齐，底边对齐
- 自动换行，一行写不完时，换行写

#### 标准文档流等级

+ 块级元素 能接受宽高
+ 行内元素 与其他元素并排 不能设置宽、高 ，需要设置  margin或者padding
+ 文本级别： p、span、a、b、i、u、em 
+ 容器级别  div、h系列、li、dt、dd 

#### display

+ inline 行内元素
+ block 块级元素
+ flex 流动布局
+ none 不显示，不占据布局

#### 脱离文档流

浮动、绝对定位、固定定位

#### 样式

```css
//去掉上下箭头
input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button { -webkit-appearance: none; }

input[type="number"]{ -moz-appearance: textfield; }
```

```css
  // 流动居中
  .others {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100%;
    }
```

```css
    .text {
      height: 100%;
      width: 100%;
      box-sizing: border-box; //padding和 margin 包含在总宽高之内
      padding: 15px;
    }
```



```css
    height: calc(100% - 50px); // 计算高度
    overflow: auto;
```

##### $nextTick()

```
methods: {
  updateMessage: async function () {
    this.message = '已更新'
      //在这里可以看出，message并没有立刻被执行
      //要理解页面刷新和代码执行速度的差别
      //通常我们在页面上立刻就能看到结果，那是因为一轮队列执行其实很快，感觉不出DOM刷新的过程和所耗费的时间
      //但对于代码的执行，属于即刻级别，DOM没更新就是没更新，就是会有问题
    console.log(this.$el.textContent) // => '未更新'

    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}
Vue的DOM刷新机制是个异步队列，并不是你想象中的立刻、马上、即时更新！
这个异步队列是一轮一轮的执行并刷新
上面带来的问题是，一些依赖DOM更新完毕才能进行的操作（比如对新增加的DOM元素进行事件绑定），无法立刻执行，必须等待一轮队列执行完毕
最容易碰到上面问题的地方：created生命周期钩子函数中对DOM进行操作
解决办法：使用this.nextTick(回调函数)方法，将对DOM的操作作为它的回调函数使用。
```

##### this 和箭头函数

```vue
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
```

##### watch 

```js
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
        注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
```



create

```
created
类型：Function

详细：

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。


```

mounted

```
mounted
类型：Function

详细：

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
```



实体引用

```
<  &lt;
>  &gt;
"  &quot;
'  &apos;
&  &amp;
```

p 标签会留下上下边距。大小相当于字号大小



```
    vertical-align: top; //对齐 inline-block
    inline 行内展示，不能设置宽高
    block 块展示，可以设置宽高
    inline-block 行内展示，可以设置宽高
    想要box-sizing： border-box生效就需要设置固定宽高
    两个元素间只能有一个最大的margin
```



```
Object.assign({},this.$listeners,{
                focus:(event)=>{
                    this.$emit('focus',event.target.value)
                }
               //将原生事件绑定到组件
```



```
.sync 父子对象之间的双向绑定
```

```
v-slot and slot 代表的是具名插槽


v-slot and slot-scope 代表的是作用域插槽


为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
```

```
!important; 让浏览器首选这个样式
```

```
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外  子节点-》父节点的点击事件


.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取
消，则取消该事件，而不停止事件的进一步传播）比如我们页面的<a href="#">标签，

.capture：与事件冒泡的方向相反，事件捕获由外到内
出发从外至内

.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次
```

### 清除浮动

```
overflow: hidden; // 父元素设置此标签可以清除子元素浮动或者使用伪类
    
.cc:after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
```

```
当有元素浮动时，要注意情况
在三列的情况下，可以让后两列绑定浮动，并设置最小宽度
```

###  出现滚动条的地方需要有宽高

```
      const loading = this.$loading({ //页面loading
        lock: true,
        text: '文件获取中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
```



```
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3 
亲自试一试
例子解释
变量 add 的赋值是自调用函数的返回值。

这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。
```



```js
文件下载
        var fileName = "testAjaxDownload.txt";
        var form = $("<form></form>").attr("action", url).attr("method", "post");
        form.append($("<input></input>").attr("type", "hidden").attr("name", "fileName").attr("value", fileName));
        form.appendTo('body').submit().remove();
```

### 省略号

```css
省略号
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
```

```js
        let element = document.getElementById('canvas' + val); 滚动到指定位置
        element.scrollIntoView();
```

### vue 生命周期

beforeCreate：此时该实例内的所有东西都还没有创建，所以在这个生命周期钩子函数中事件,data都是undefined。
created：在这个生命周期之间，进行初始化事件，进行数据的观测，在created的时候数据已经和data属性进行绑定，但未开始编译模板。
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。
mounted：已经将编译好的模板，挂载到了页面指定的容器中显示。
beforeUpdata：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点。
updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
beforeDestory：实例销毁之前调用，在这一步，实例仍然完全可用。
destoryed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

### vue router 生命周期

离开组建之前：调用beforeRouterLeave
进入到新的页面：先调用beforeEach
进到路由的配置中：beforeEnter
进入组件之前：beforeRouterEnter
组件解析完成：beforeRselove
进入组件完毕：afterEach
当属性变化时 并没有重新加载组件：beforeEnter
组件渲染完成后：beforeRouterUpdata

###  设置title

```vue
// 设置全局titlerouter.beforeEach((to, from, next) => {  /* 路由发生变化修改页面title */  if (to.meta.title) {    document.title = to.meta.title  }else document.title = "cms"  next()}

ducument.title= ""
```



###  新页面打开



```vue
let blank = this.$router.resolve({path: 'view', query: {guid: val,contextPath:this.$route.query.contextPath }})window.open(blank.href, "_blank")
```

### flex 布局

### grid 布局

```css
// 容器属性
div {
  display: inline-grid; // block or inline
}

.container {
  display: grid;  // grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  // grid-template-rows: 70% 30%;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px); // 每列宽度100px，然后自动填充，直到容器不能放置更多的列。
}

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr; // 150 150 300 
    // grid-template-columns: 1fr auto minmax(100px, 1fr); // 伸缩 最小值和最大值
}

.container {  // 间距
  grid-row-gap: 20px;
  grid-column-gap: 20px;
    grid-auto-flow: column; //  默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"
}
.container { // justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

.container { // justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
 // 项目属性
grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性
justify-self 属性，
align-self 属性，
place-self 属性
```

### Flex布局

容器

```css
  flex-direction 属性决定主轴的方向（即项目的排列方向）。
                    row（默认值）：主轴为水平方向，起点在左端。
                    row-reverse：主轴为水平方向，起点在右端。
                    column：主轴为垂直方向，起点在上沿。
                    column-reverse：主轴为垂直方向，起点在下沿。
  flex-wrap  如果一条轴线排不下，如何换行  nowrap | wrap | wrap-reverse;
  flex-flow   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  justify-content  属性定义了项目在主轴上的对齐方式。
                    flex-start（默认值）：左对齐
                    flex-end：右对齐
                    center： 居中
                    space-between：两端对齐，项目之间的间隔都相等。
                    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  align-items  属性定义项目在交叉轴上如何对齐。
                flex-start：交叉轴的起点对齐。
                flex-end：交叉轴的终点对齐。
                center：交叉轴的中点对齐。
                baseline: 项目的第一行文字的基线对齐。
                stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
                flex-start：与交叉轴的起点对齐。
                flex-end：与交叉轴的终点对齐。
                center：与交叉轴的中点对齐。
                space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
                space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
                stretch（默认值）：轴线占满整个交叉轴。

项目

    order  属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
          
    flex-grow  属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    flex  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto。后两个属性可选。 auto 、none
    align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
```

### 颜色选择

[颜色选择](http://www.ruanyifeng.com/blog/2019/03/coloring-scheme.html)