Toypipi's blog

发表于 分类于 本文字数： 64 阅读时长 ≈ 1 分钟 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<el-card class="box-card" @mouseente native="enter" @mouseleave.native='leave'>
  <div slot="header">
   <span>卡片名称</span>
   <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
 <div v-for="o in 4" :key="o" class="text item">
   {{'列表内容 ' + o }}
 </div>
</el-card>

methods: {
 enter(){
   console.log('enter')
 },
 leave(){
   console.log('leave')
 }
},
阅读全文 »

发表于 分类于 本文字数： 264 阅读时长 ≈ 1 分钟

先说结论，可以通过 computed 和 watch 结合的方法实现监听复杂对象！

需求：有一个单选框按钮组（手动/自动），当点击手动时，输入框可以输入数值，当点击自动时，输入框禁用。

解决办法：

1.首先给单选框添加 change 事件（Element 组件库），实现当单选框按钮值改变时是否禁用输入框。 2.由于单选框的值会根据后端回传数据改变，所以通过 watch 方法监听单选框值改变，实现当后端回传数据导致单选框按钮值改变，而输入框未实现同步禁用的问题。

阅读全文 »

发表于 分类于 本文字数： 32 阅读时长 ≈ 1 分钟

解决办法，在 .eslintrc.js 文件中修改：

1
2
3
4
//修改前
extends: ['plugin:vue/recommended', 'eslint:recommended'],
//修改后
 extends: ['plugin:vue/recommended', 'eslint:recommended', "plugin:prettier/recommended"],

参考文档

发表于 更新于 分类于 本文字数： 562 阅读时长 ≈ 2 分钟

遇到的问题：VUE 项目里把 data 里定义的对象数组赋值给新的变量，新的变量对数组对象做了一些操作，但却把 data 里面原本的对象数组也修改了。

下面举一个简单例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function () {
     const b = [
       { name: "John", age: 25 },
       { name: "Jane", age: 30 },
     ];
     var a = b

     // 修改变量 a 的值
     a[0].age = 99;

     console.log(a); // 输出[{name: 'John', age: 99}, {name: 'Jane', age: 25}]
     console.log(b); // 输出[{name: 'John', age: 99}, {name: 'Jane', age: 25}]
   };
阅读全文 »

发表于 分类于 本文字数： 278 阅读时长 ≈ 1 分钟

BFC 定义

  1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
  2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
  3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

BFC 能解决什么问题

  1. 元素开启BFC 后，其子元素不会再产生margin 塌陷问题。
  2. 元素开启BFC 后，自己不会被其他浮动元素所覆盖。
  3. 元素开启BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
阅读全文 »
0%