Skip to content

Instantly share code, notes, and snippets.

Avatar

rxliuli rxliuli

View GitHub Profile
View CSS 流式布局问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>html</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<style>
.box {
View evgeny-nadymov.github.io 暗黑模式优化
/* 详情的背景 */
.page {
background-image: url(https://cdn.jsdelivr.net/gh/rxliuli/img-bed/20200306083232.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.dialog-details {
background-color: transparent;
}
@rxliuli
rxliuli / Rect.ts
Created Feb 19, 2020
计算矩形相交
View Rect.ts
export enum PointCompareEnum {
LeftTop,
Left,
LeftBottom,
Bottom,
RightBottom,
Right,
RightTop,
Top,
Equal,
@rxliuli
rxliuli / MessageLoading.tsx
Created Feb 15, 2020
使用纯函数 + JSX 实现 loading 弹窗
View MessageLoading.tsx
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import styles from './MessageLoading.module.css'
import { ReactComponent as IconLoading } from '../../assets/icon/icon-loading-balls.svg'
import { wait } from 'rx-util'
type Handlers = {
changeVisible: (visible: boolean) => void
changeMsg: (msg: string) => void
}
View 麦克风录音示例
import React, { ChangeEvent } from 'react'
import { readLocal } from 'rx-util'
type PropsType = {}
const HelloWorld: React.FC<PropsType> = function() {
//region 播放音频
async function play(arrayBuffer: ArrayBuffer) {
// Safari需要使用webkit前缀
View Vue 自动折行容器
```vuejs
<template>
<div class="outer" :style="outerStyle" ref="outer">
<div :class="enable || 'inner'" ref="inner">
<slot v-bind:props="{ enable, state, toggle }"></slot>
</div>
</div>
</template>
<script>
@rxliuli
rxliuli / reactive_layout_of_grid_and_float.md
Last active Aug 27, 2019
reactive_layout_of_grid_and_float
View reactive_layout_of_grid_and_float.md

float + flex 增强

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
View CSS 隐藏多余的文字引起错位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.box {
width: 500px;
View CSS 权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
span {
color: green;
@rxliuli
rxliuli / 数组分组
Last active May 30, 2019
将数组按照最大值进行分组,分组次数尽可能少,分组数量尽可能少
View 数组分组
function split(i: number, max: number): number[] {
const res = []
while (i > max) {
res.push(max)
i -= max
}
res.push(i)
return res
}
function fn(arr: number[], max: number): number[][] {