分类前端技术下的文章

2024-08-11

在H5页面中，可以使用JavaScript监听contextmenu和mousedown事件来分别处理长按和点击事件。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长按和点击事件</title>
<script>
window.onload = function() {
    var longPressTimer;
    var element = document.getElementById('myElement');
 
    element.addEventListener('contextmenu', function(e) {
        e.preventDefault();
        longPressTimer = setTimeout(function() {
            alert('长按事件触发');
        }, 1000); // 设置长按的时间为1000毫秒
    });
 
    element.addEventListener('mouseup', function(e) {
        e.preventDefault();
        clearTimeout(longPressTimer);
        if (e.which == 1) { // 判断是否是鼠标左键点击
            alert('点击事件触发');
        }
    });
};
</script>
</head>
<body>
<div id="myElement" style="width: 200px; height: 100px; background-color: #00FF00;">长按或点击这里</div>
</body>
</html>

在这个示例中，我们为目标元素添加了contextmenu和mouseup事件监听器。当用户长按时，会触发contextmenu事件，并设置一个定时器。如果在设定的时间内用户释放鼠标按钮，则会触发mouseup事件，并清除定时器。如果用户按住鼠标之后并没有释放鼠标按钮，则会执行长按的逻辑。如果是鼠标左键点击（which属性等于1），则会执行点击的逻辑。

- 阅读更多 -

Typescript 学习笔记 - 环境声明

System

2024-08-11

所有,typescript




// 定义全局变量，可以在任何地方使用
declare var require: any;
 
// 定义全局变量，可以在任何地方使用
declare global {
  var process: {
    env: {
      NODE_ENV: string;
    }
  };
}
 
// 定义全局函数，可以在任何地方使用
declare function require(moduleName: string): any;
 
// 定义全局变量，可以在任何地方使用
declare global {
  var globalVar: string;
}
 
// 使用示例
console.log(process.env.NODE_ENV);
console.log(globalVar);

这个代码示例展示了如何在TypeScript中使用declare关键字来声明全局变量和函数。这对于TypeScript开发者在编写Node.js或者浏览器端的代码时非常有用，因为它允许开发者在不包含类型定义文件的情况下，继续使用这些全局变量。

- 阅读更多 -

Element Plus输入框组件el-input圆边角样式修改

System

2024-08-11

所有,vue.js

在Element Plus中，要修改el-input组件的圆角样式，可以通过CSS覆盖默认的样式。以下是一个简单的例子，展示如何通过自定义类来实现：

首先，在你的Vue组件的<style>标签中添加以下CSS：




.rounded-input .el-input__inner {
  border-radius: 20px; /* 设置圆角大小 */
}

然后，在你的el-input组件上添加这个自定义类：




<template>
  <el-input class="rounded-input" placeholder="请输入内容"></el-input>
</template>

这样就会应用上面定义的CSS样式，使得输入框的边角变得圆润。你可以根据需要调整border-radius的值来改变圆角的曲率大小。

- 阅读更多 -

antd-protable的分页逻辑封装

System

2024-08-11

所有,typescript

在Ant Design Pro Table中，分页逻辑可以通过pagination属性进行配置。你可以将分页逻辑封装在一个自定义的React组件中，并在需要分页的地方使用这个组件。

以下是一个简单的PaginationWrapper组件的示例代码，用于封装分页逻辑：




import React, { useState } from 'react';
import { ProTable } from '@ant-design/pro-table';
 
const PaginationWrapper = ({ tableProps }) => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
 
  const handleTableChange = (pagination, _, snapshot) => {
    setCurrent(pagination.current);
    setPageSize(pagination.pageSize);
  };
 
  return (
    <ProTable
      {...tableProps}
      pagination={{
        current,
        pageSize,
        onChange: handleTableChange,
      }}
    />
  );
};
 
export default PaginationWrapper;

在上述代码中，PaginationWrapper组件使用了React的useState钩子来管理当前页和每页条目数。handleTableChange函数会在分页事件发生时被调用，并更新状态。在ProTable组件中，我们将封装好的状态作为pagination属性传入，从而实现分页的控制。

使用PaginationWrapper组件的方式如下：




import PaginationWrapper from './PaginationWrapper';
 
const MyTable = () => {
  const tableProps = {
    // ... 其他ProTable属性
  };
 
  return <PaginationWrapper tableProps={tableProps} />;
};

在这个例子中，PaginationWrapper组件接收一个tableProps属性，该属性包含了所有传递给ProTable组件的属性，同时PaginationWrapper内部处理分页逻辑。这样，你可以在多个表格中重用分页逻辑，而不需要在每个表格中都写一遍分页的代码。

- 阅读更多 -

记录一次ts代码中因为this指向导致的报错

System

2024-08-11

所有,typescript

错误解释：

在JavaScript（以及TypeScript，它是JavaScript的超集）中，this 关键字引用的是当前代码执行的上下文。如果在一个对象的方法中使用 this，通常它指向当前对象。但是，如果你在回调函数或者异步代码中使用 this，可能会导致 this 不再指向原来的对象，从而引发一个错误。

解决方法：

使用箭头函数：箭头函数没有自己的 this，它会捕获其在定义时所处的上下文中的 this 值。




class MyClass {
  myProperty = 'value';
 
  constructor() {
    setTimeout(() => {
      console.log(this.myProperty); // 正确引用MyClass的实例
    }, 100);
  }
}

使用 .bind()：你可以在创建函数时就绑定 this 的值。




class MyClass {
  myProperty = 'value';
 
  constructor() {
    setTimeout(function() {
      console.log(this.myProperty);
    }.bind(this), 100);
  }
}

使用 self 或其他变量保存 this 的引用：在回调或异步代码中保存 this 的引用到另一个变量。




class MyClass {
  myProperty = 'value';
 
  constructor() {
    const self = this;
    setTimeout(function() {
      console.log(self.myProperty);
    }, 100);
  }
}

使用 async/await 时，使用 await 表达式而不是 .then()，这样 this 仍然会指向正确的上下文。




class MyClass {
  myProperty = 'value';
 
  async myAsyncMethod() {
    const result = await someAsyncCall();
    console.log(this.myProperty); // 正确引用MyClass的实例
  }
}

确保在修复 this 的指向问题时，不要破坏类的封装性和模块的依赖管理。

System

2024-08-11

所有,typescript

报错解释：

这个错误表示 Node.js 运行时不识别文件扩展名 .ts，即 TypeScript 文件。通常这种错误出现在尝试直接运行一个 TypeScript 文件时，因为 Node.js 默认不知道如何执行 TypeScript 代码。

解决方法：

首先确保你已经安装了 TypeScript 编译器 (ts-node) 和 Node.js 类型定义文件 (@types/node)。
```
npm install -g ts-node @types/node
```
然后，使用 ts-node 运行你的 TypeScript 文件，而不是直接使用 node 命令。
```
ts-node your-file.ts
```
如果你希望直接运行编译后的 JavaScript 文件，你需要先使用 TypeScript 编译器 (tsc) 将 TypeScript 代码转换为 JavaScript。
```
tsc your-file.ts
```
这会生成一个同名的 .js 文件，然后你可以用 node 命令运行这个 JavaScript 文件。
```
node your-file.js
```

确保你的环境配置正确，如 tsconfig.json 文件中的设置，以确保 TypeScript 编译器按预期工作。

- 阅读更多 -

vue3+ts-实现搜索关键词变红

System

2024-08-11

所有,typescript

在Vue 3和TypeScript中，可以通过使用一个计算属性来处理搜索关键词并将其变红的需求。以下是一个简单的示例：




<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <div v-html="highlightedContent"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const searchQuery = ref('');
    const content = ref('This is a simple example content.');
 
    const highlightedContent = computed(() => {
      if (!searchQuery.value) {
        return content.value;
      }
      const regex = new RegExp(searchQuery.value, 'gi');
      return content.value.replace(regex, match => `<span class="highlight">${match}</span>`);
    });
 
    return {
      searchQuery,
      highlightedContent,
    };
  },
});
</script>
 
<style>
.highlight {
  color: red;
}
</style>

在这个例子中，我们有一个搜索框和一个显示内容的div。通过v-model绑定的searchQuery用于接收用户输入的搜索词。计算属性highlightedContent根据searchQuery的值和内容content生成一个新的HTML字符串，其中匹配搜索词的部分被<span>标签包裹，并应用了一个.highlight类。在CSS中，.highlight类设置了红色字体。

System

2024-08-11

所有,typescript

《TypeScript入门与实战》是一本针对TypeScript 2.0及更新版本编写的入门书籍。这本书从TypeScript的基础概念开始介绍，逐步深入到高级特性，包括类型声明、类型推断、泛型、装饰器等，并通过大量实例教会读者如何应用这些概念。

这本书的目标读者是对编程有基础知识，但还没有接触或使用TypeScript的开发者。

以下是书中一个简单的TypeScript类型声明示例：




// 定义一个名为User的接口，包含name和age两个属性
interface User {
  name: string;
  age: number;
}
 
// 使用类型声明创建一个user变量
let user: User = {
  name: 'Alice',
  age: 25
};
 
// 修改user的age属性，这里会报类型错误，因为age应该是number类型
user.age = 'twenty-five';

这个示例展示了如何在TypeScript中定义一个接口，并且如何通过接口来声明变量类型，从而在编译时发现类型错误。这有助于提高代码的类型安全性。

System

2024-08-11

所有,typescript




# 安装eslint依赖
npm install eslint --save-dev
 
# 初始化eslint配置文件
npx eslint --init
 
# 安装vue3相关的eslint插件
npm install eslint-plugin-vue@next --save-dev
 
# 安装typescript支持
npm install @typescript-eslint/parser --save-dev
npm install @typescript-eslint/eslint-plugin --save-dev
 
# 安装prettier插件，用于eslint与prettier集成
npm install eslint-plugin-prettier --save-dev
 
# 安装husky，用于在git hooks中运行脚本
npm install husky --save-dev
 
# 设置husky hooks
npx husky install
 
# 添加husky hooks配置
npx husky add .husky/pre-commit "npx lint-staged"
 
# 安装lint-staged，用于在git commit之前运行eslint检查
npm install lint-staged --save-dev
 
# 在package.json中添加lint-staged配置
"lint-staged": {
  "*.{js,jsx,ts,tsx,vue}": [
    "eslint --fix",
    "git add"
  ]
}

以上代码示例展示了如何在一个vite+typescript+vue3项目中集成eslint、prettier、husky和lint-staged。这些工具能够帮助开发者维护代码风格的一致性，并在提交代码前发现并修复代码问题。

- 阅读更多 -

Vue3 使用Pinia中的Actions、getters

System

2024-08-11

所有,typescript




<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
 
<script>
import { defineComponent, computed } from 'vue';
import { useStore } from '../stores/counterStore';
 
export default defineComponent({
  setup() {
    // 使用Pinia中的store
    const store = useStore();
 
    // 使用getters
    const count = computed(() => store.count);
 
    // 使用Actions
    function increment() {
      store.increment();
    }
 
    // 将count和increment返回到模板中
    return { count, increment };
  }
});
</script>

这个例子展示了如何在Vue 3组件中使用Pinia状态管理库。首先，我们从store导入useStore，然后在setup函数中调用它。接着，我们使用computed来创建一个响应式的属性count，它依赖于store中的count getter。最后，我们定义了一个函数increment来调用store中的increment action。在模板中，我们可以直接使用count和increment。

- 阅读更多 -