Toypipi's blog

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

CSS BEM（块元素修饰符）是一种命名约定和方法论，用于在编写可维护和可扩展的 CSS 代码时提供结构和规范。它的目标是解决样式表的命名冲突问题，并提供一种一致性和可重用性的编码方式。

BEM 的命名约定由以下三个部分组成：

块（Block）：代表一个独立的、可重复使用的组件或模块，它是页面上的一个独立单元。块的命名应该简洁、清晰，并用一个单词或短语表示，使用连字符分隔单词（例如：button、header）。

元素（Element）：代表块的内部元素，它们不能独立存在，必须作为块的一部分存在。元素的命名应该以块的名称为前缀，用两个连下划线 ** 进行分隔（例如：button**text、header__logo）。

修饰符（Modifier）：代表块或元素的不同状态或变体。修饰符是可选的，可以通过改变外观、行为或状态来扩展块或元素。修饰符的命名应该以块或元素的名称为前缀，用两个连短划线 – 进行分隔（例如：button–primary、header–fixed）。

阅读全文 »

发表于 分类于 本文字数： 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}]
   };
阅读全文 »
0%