Toypipi's blog

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

在 JavaScript 中，可以使用匿名函数的直接调用（Immediately Invoked Function Expression，IIFE）来立即执行函数。

下面是一个使用匿名函数直接调用的示例：

1
2
3
4
(function() {
  // 在这里编写需要执行的代码
  console.log("这是一个匿名函数的直接调用示例。");
})();

在上面的示例中，我们使用 (function() { … })() 的语法来创建一个匿名函数，并立即调用它。函数体内的代码会立即执行。

阅读全文 »

发表于 分类于 本文字数： 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"],

参考文档

0%