Skip to content

Instantly share code, notes, and snippets.

@YangShunGit
YangShunGit / img或video适配容器宽高.md
Created February 26, 2022 03:16
img或video设置100%仍不能铺满全屏时,需要设置object-fit属性

object-fit :CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

需要确保有overflow样式

overflow: auto;

需要添加muted静音属性

example.tsx

  <video controls autoPlay loop muted>
      your browser does not support the video tag
      <source src={mp4} type="video/mp4" />
   </video>
@YangShunGit
YangShunGit / 生成SSHkey.md
Created February 25, 2022 02:21
生成SSH key

使用git bash输入:

ssh-keygen -t rsa -C "your_email@example.com"

回车 回车 回车 即可

@YangShunGit
YangShunGit / Service Workers离线缓存和HMR热更新冲突.md
Created February 24, 2022 10:18
Service Workers离线缓存和HMR热更新冲突时导致页面一直刷新解决

F12打开开发者工具

切换到Application(应用)栏

点击栏板右上角【取消注册】,既可清除Service Workers缓存

@YangShunGit
YangShunGit / index.txt
Created February 18, 2022 14:11
require 目录的机制
require 目录的机制是:
如果目录下有 package.json 并指定了 main 字段,则用之
如果不存在 package.json,则依次尝试加载目录下的 index.js 和 index.node
require 过的文件会加载到缓存,所以多次 require 同一个文件(模块)不会重复加载
判断是否是程序的入口文件有两种方式:
require.main === module(推荐)
module.parent === null
@YangShunGit
YangShunGit / index.tsx
Created February 18, 2022 10:07
关于react 引入 psd.js
import PSD from 'psd.js/dist/psd.min'
import demo from './demo.psd'
PSD.fromURL(demo).then(function(psd) {
console.log(psd.tree().export())
});
@YangShunGit
YangShunGit / SourceComp.tsx
Last active February 18, 2022 09:59
react-dnd demo文件,初步实现lowCode拖拽代码
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useDrag, useDrop } from 'react-dnd'
import Moveable from "react-moveable";
import produce from "immer"
export default function SourceComp(props) {
const {
item,