0228-0308的笔记

1 父元素设置display:flex后，子元素中图片被压缩

原因：给父元素设置flex后，子元素会等比占据空间
解决办法：给图片的元素添加 flex:none

flex解释：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

优先级：auto (1 1 auto) 或者 none （0 0 auto);

flex-grow, flex-shrink 和 flex-basis的详细：

• flex-grow 项目的放大比例，默认为0（即如果存在剩余空间，也不放大）
  如果item都为1，则均等平摊整个空间。如果有一个item和其他的item不相等，则按照比例放大。
• flex-shrink 项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）
  如果item都相等，则均等平摊空间，若空间不足，则都等比例缩小。如果有一个item为0；当空间不足时，其不缩小。
  
  ps：负值无效。
• flex-basis 在分配多余空间之前，项目占据的水平上的空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

2 border在hover之前要先加上宽度

div{
    border 5px solid transparent
}
div:hover{
    border-color:red
}

这样就不会引起重排，影响页面布局。

3 box-shadow

css3 属性 添加上下，左右阴影，兼容到ie9

box-shadow: h-shadow v-shadow blur spread color inset;

属性值

• h-shadow 必需的。水平阴影的位置。允许负值,为0时，代表水平不偏移，为负时代表往左偏移
• v-shadow 必需的。垂直阴影的位置。允许负值，为0时，代表垂直不偏移，为负时代表往上偏移
• blur 可选。模糊距离，当水平和垂直的值都为0时，blur有值，依然有阴影，说明blur是有大小的，但不会影响该元素的大小
• spread 可选。阴影的大小,color所在的大小
• color 可选。阴影的颜色
• inset 可选。从外层的阴影（开始时）改变阴影内侧阴影（不选inset时默认是外阴影，没有outset之说）

例子

div
{
    box-shadow: 10px 10px 5px 0px #888888 inset;
}

4 vue引入图片

两种，按照约定俗成的习惯，不经过webpack处理的放在static，需要经过处理的放assets：

• 一种是不经过webpack处理，直接写绝对路径拿static里的文件，直接写/static/xx/xxx.png。
• 一种是经过使用webpack处理，（转成base64）不管是require还是import，使用如你所写的方式主动引入，并声明为一个变量，后续使用这个变量。

注意只有在js逻辑里跑的代码，才需要使用主动引入的方式，毕竟，代码开始执行跑在客户端的时候是没有webpack环境的，向你直接在template中写的是会直接走webpack的。

通过imgUrl保存图片路径，然后使用标签去展示图片的话，有几种方法：

1 把图片放在static文件夹下，可以按照平常引入图片的方式引入。
2 把图片放在cdn上，把网络地址存在imgUrl里，然后直接<img :src="imgUrl">去展示。(待验证)
3 图片放在assets文件夹，然后在data里面require进图片

data() {
    imgUrl:require('./assets/logo.png')
}

然后<img :src="imgUrl">去展示即可。背景图的url也是如此。

5 vue中style使用background

在vue中动态使用style的background时，需要拼接字符串的形式

在vue中直接使用style时 花括号一定别忘记

:style = '{ backgroundImage : " url ( " + item.img + " ) " } ' 

如果是width这种就不用加了

:style = "'width:' + item.width + 'px'"

6 pointer-events:none

pointer-events有两个值：

auto： 与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

说明：
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）

阻止事件触发，比如：

• 阻止用户的点击动作产生任何效果（点击不了）
• 阻止缺省鼠标指针的显示（鼠标放上去是指针，无其他变化）
• 阻止CSS里的 hover 和 active 状态的变化触发事件（hover，active无效）
• 阻止JavaScript点击动作触发的事件

例子：

1 提交页面，提交按钮点击后，添加这个样式属属性style="pointer-events"，来防止重复提交。
2 几个li标签，让第二个不能触发点击事件，可以对第二个li设置style="pointer-events"，这样索引依然在，只不过无法触发

7 arr.splice()

向/从数组中添加/删除项目，然后返回被删除的项目,会改变原数组。

array.splice(index,num,item1,item2,...)

• index: 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
• num: 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
  如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
• item1, ..., itemX 可选。要添加到数组的新元素

// 移除数组的第三个元素，并在数组第三个位置添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var item = fruits.splice(2,1,"Lemon","Kiwi");
console.log(fruits) // ["Banana", "Orange", "Lemon", "Kiwi", "Mango"]
console.log(item) // ['apple']

8 原生JS删除类名，添加类名

• 1 直接className,但会覆盖原有类名

    document.getElementById("test").className='abc';

• 2 利用setAttribute属性，但会覆盖原有的类名

    document.getElementById("test").setAttribute("class","test1");
  
    document.getElementsByClassName("test")[0].setAttribute("class","test1");

• 3 classList

  Element.classList 是一个只读属性，返回一个元素的类属性的实时DOMTokenList 集合。

  使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。(存在兼容性问题，ie11以下不支持所有方法)

  方法：
  • 1 add() 添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。可以添加多个类
  • 2 remove() 删除指定的类值。
  • 3 item ( Number ) 按集合中的索引返回类值
  • 4 toggle () 当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
  • 5 contains( String ) 检查元素的类属性中是否存在指定的类值。
  • 6 replace( oldClass, newClass ) 用一个新类替换已有类。

9 window.onresize = myChart.resize

echarts自适应屏幕，需要在myChart.setOption后面添加window.onresize = myChart.resize

10 vue的事件获取原生的event对象

有时候需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
    Submit
</button>

methods: {
    warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
    }
}

11 elementui的table获取复选框的值

• el-table打个ref=multipleTable，然后this.$refs.multipleTable.selection获取勾选列表,返回的是一个数组，当前所有选中行的数据的集合（外部获取一次性的数据集合）

• el-table中添加@selection-change="handleSelectionChange"，这个是选中时返回的当前数据，选多个勾，就显示多少勾的行数据（内部获取动态数据）

  12 elementui的form表单重置

• 1、表单加ref属性

    <el-form ref="refname"></el-form>

• 2、form的每个item加prop属性（踩了好久的坑这个,需要和绑定数据的最后名称一致，prop属性添加到form-item上）

    <el-form-item prop="name">
        <el-input v-model="query.name"></el-input>
    </el-form-item>

• 3、绑定点击事件中传入refname

    <el-form-item>
        <el-button @click="resetForm('refname')">清空</el-button>
    </el-form-item>

• 4、注册事件

    restForm(refname) {
        this.$refs[refname].resetFields()
    }

• 5、检查是否有初始值

  在data数据上需要挂载表单数据初始值为 ‘‘

如果使用了$store.state.fm.plan管理关联表单数据，那么在form中需要添加:model="$store.state.fm"。

#### 13 Computed property "route" was assigned to but it has no setter
这个是在computed时，我要判断几个el-checkbox-group中checkbox的选中情况，如果全部手动选中，这全选则选中，否则不选中，所以用computed判断，但爆这个错。

很多人说是因为在代码中改了route的值，但我并没有改，后来才发现，我虽然在代码里没有改route的值，但是在页面上切换tab的时候，element-UI会去改route的值，一开始是没有问题的，直到有一次更新了vue的版本，然后就开始出现上面的错误。

template
<el-tabs type="card" v-model="route">
</el-tabs>

js：
computed: {
    route: {
        get: function () {
        return this.$store.state.curTab.route
        },
        set: function () {
        }
    }
}

14 elementui的table的宽度自适应 （待解决）

不加宽度可以达到自适应，可以给某个cell添加min-width

0228-0308的笔记

原文：https://www.cnblogs.com/sqh17/p/10520304.html