骚操作 | Gyh's blog

# 其他

# img 白边

在 div 中的 img 在 margin padding 为 0，且 broder 为 none 的情况下依然存在白边，原因在于，img 标签默认情况下 display:inline-block; img 在 div 中的白边就是因为 inline-block；造成的，所以此时将 img 的 display 设置为 block；白边就消失了

# iphone 连接 mac 不稳定

sudo killall -STOP -c usbd

# flutter 误删除

flutter create  -i objc .

-i 是表示iOS项目开发语言，objc和swift两个选项，其中objc是默认的。
-a 是表示Android项目开发语言，java和kotlin两个选项，其中java是默认的。

1
2
3
4

# android 截屏

adb shell /system/bin/screencap -p /sdcard/screenshot.png
将截图复制到电脑盘中
adb pull /sdcard/screenshot.png D:\\screenshot

1
2
3

# flutter 读写权限

maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }

1
2

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

1
2

# 空白程序坞

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock

# 连续点击

data(){
    return {
        // 显示登出
        showLogout: false,
        lastTime: 0,
        timer: null,
        clickTime: 0
    }
},
method:{
   handleClickHeader() {
      var currentTime = new Date().getTime()
      // 记录两次相连的点击时间间隔，大于1秒，重新记录点击次数
      this.clickTime =
        currentTime - this.lastTime < 1000 ? this.clickTime + 1 : 1
      this.lastTime = new Date().getTime()
      console.log('count', this.clickTime)
      if (this.clickTime > 4) {
        this.showLogout = true
        console.log('点击4次以上执行这部分代码')
      }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# proxy 版双向绑定

const input = document.getElementById("input")
const p = document.getElementById("p")
const obj = {}

const newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    console.log(`getting ${key}!`)
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver)
    if (key === "text") {
      input.value = value
      p.innerHTML = value
    }
    return Reflect.set(target, key, value, receiver)
  },
})

input.addEventListener("keyup", function(e) {
  newObj.text = e.target.value
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 修改 commit

git commit --amend

# 滑动穿透

@touchmove.prevent

# 获取文件 md5

getMd5(file, callBack) {
  var tmp_md5
  var fileReader = new FileReader()
  var blobSlice =
    File.prototype.mozSlice ||
    File.prototype.webkitSlice ||
    File.prototype.slice
  var chunkSize = 2097152
  // read in chunks of 2MB
  var chunks = Math.ceil(file.size / chunkSize)
  var currentChunk = 0
  var spark = new SparkMD5()

  fileReader.onload = function(e) {
    spark.appendBinary(e.target.result) // append binary string
    currentChunk++

    if (currentChunk < chunks) {
      loadNext()
    } else {
      tmp_md5 = spark.end()
      callBack(tmp_md5)
    }
  }

  function loadNext() {
    var start = currentChunk * chunkSize
    var end = start + chunkSize >= file.size ? file.size : start + chunkSize

    fileReader.readAsBinaryString(blobSlice.call(file, start, end))
  }

  loadNext()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# cdn 的引入

安装

npm i --save-dev html-webpack-plugin

配置

let cdn
if (env === "development") {
  cdn = {
    js: [
      "https://jic.talkingdata.com/app/h5/v1?appid=76034ADCDE254FEA8E59372051AB0AB2&vn=flipped-web-2.0本地环境&vc=2.0",
    ],
  }
} else {
  if (process.env.VUE_APP_ENV === "preview") {
    cdn = {
      js: [
        "https://jic.talkingdata.com/app/h5/v1?appid=76034ADCDE254FEA8E59372051AB0AB2&vn=flipped-web-2.0测试环境&vc=2.0",
      ],
    }
  } else {
    cdn = {
      js: [
        "https://jic.talkingdata.com/app/h5/v1?appid=76034ADCDE254FEA8E59372051AB0AB2&vn=flipped-web-2.0正式环境&vc=2.0",
      ],
    }
  }
}

module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].cdn = cdn
      return args
    })
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

注入

<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
<% } %>

1
2
3

# vue 命名规范

命名规范
其实刚开始我写 vue 文件的时候也不注意，各种驼峰啊、大写开头 (PascalCase)还是横线连接 (kebab-case)混着来，谁叫 vue 都可以，在 风格指南 中也没有定论。不过基于本项目我还是整理了一套文件的命名规则。

Component
所有的Component文件都是以大写开头 (PascalCase)，这也是官方所 推荐的。

但除了 index.vue。

例子：

@/src/components/BackToTop/index.vue
@/src/components/Charts/Line.vue
@/src/views/example/components/Button.vue
JS 文件
所有的.js文件都遵循横线连接 (kebab-case)。

例子：

@/src/utils/open-window.js
@/src/views/svg-icons/require-icons.js
@/src/components/MarkdownEditor/default-options.js
Views
在views文件下，代表路由的.vue文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

例子：

@/src/views/svg-icons/index.vue
@/src/views/svg-icons/require-icons.js
使用横线连接 (kebab-case)来命名views主要是出于以下几个考虑。

横线连接 (kebab-case) 也是官方推荐的命名规范之一 文档
views下的.vue文件代表的是一个路由，所以它需要和component进行区分(component 都是大写开头)
页面的url 也都是横线连接的，比如https://www.xxx.admin/export-excel，所以路由对应的view应该要保持统一
没有大小写敏感问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# vue 小技巧与建议

# 大数据量的处理 Object.freeze

this.item = Object.freeze(Object.assign({}, this.item))

# Watch immediate

// bad
created() {
  this.fetchUserList();
},
watch: {
  searchText: 'fetchUserList',
}
// good
watch: {
  searchText: {
    handler: 'fetchUserList',
    immediate: true,
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

ps: watch 还有一个容易被大家忽略的属性 deep。当设置为 true 时，它会进行深度监听。简而言之就是你有一个 const obj={a:1,b:2}，里面任意一个 key 的 value 发生变化的时候都会触发 watch。应用场景：比如我有一个列表，它有一堆 query 筛选项，这时候你就能 deep watch 它，只有任何一个筛序项改变的时候，就自动请求新的数据。或者你可以 deep watch 一个 form 表单，当任何一个字段内容发生变化的时候，你就帮它做自动保存等等。

# .sync

# Computed 的 get 和 set

set 和 get 处理可以做上面说的进行一些数据处理之外，你也可以把它当做一个 watch 的升级版。它可以监听数据的变化，当发生变化时，做一些额外的操作。最经典的用法就是 v-model 上绑定一个 vuex 值的时候，input 发生变化时，通过 commit 更新存在 vuex 里面的值。

# 多语言

https://www.cnblogs.com/rogerwu/p/7744476.html

# sticky

<template>
  <div class="main">
    <div class="header">
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
      <div>头部展示内容-------------</div>
    </div>
    <div class="auto_fixed" :class="auto_fixed">
      自动粘滞固定头部，需要一直展示的
    </div>
    <div class="auto_fixed_fake" :style="{ display: auto_fixed.fixed ? 'block' : 'none' }"></div>
    <div class="content">
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
      <div>
        tabs内部内容，最帅程序员专享受------我的最爱--李易峰
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      auto_fixed: {
        fixed: false,
      },
    }
  },
  methods: {
    onScroll() {
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      let header_height = null
      if (document.getElementsByClassName("header")[0]) {
        header_height = document.getElementsByClassName("header")[0].offsetHeight
      }
      console.log("滚动的距离:" + scrolled, "头部的高度:" + header_height)
      this.auto_fixed = {
        auto_fixed: true,
        fixed: scrolled >= header_height,
      }
    },
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener("scroll", this.onScroll)
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
}
.header {
  padding: 8px 10px;
}
.auto_fixed {
  height: 3em;
  background: orange;
  line-height: 3em;
  text-align: center;
}
.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
}
.content {
  color: gray;
  padding: 8px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

# springboot 添加页面

protected void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/role_page").setViewName("system/role");
        registry.addViewController("/user_page").setViewName("system/user");
        super.addViewControllers(registry);
}

1
2
3
4
5
6

# js Math

1.丢弃小数部分,保留整数部分

parseInt(5/2)

2.向上取整,有小数就整数部分加 1

Math.ceil(5/2)

3,四舍五入.

Math.round(5/2)

4,向下取整

Math.floor(5/2)

# 通过 label 标签的 for 属性实现 input file 框的自定义样式

for 属性规定了 label 与哪个表单元素进行绑定，包含显式联系和隐式联系两种

显式联系：

以显式形式和控件联系起来，for 属性的值和控件的 id 要保持一致

<label for="upload">upload</label>
<input type="file" id="upload" />

1
2

隐式联系：

在标签中放入控件隐式地连接起来

<label>uplaod<input type="file" /></label>

<html>

<head>
  <style>
    .ui-upload {
      height: 30px;
      width: 80px;
      background-color: #00abff;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <label for="upload" class="ui-upload">upload</label>
  <input type="file" id="upload" style="display: none;" />
  <label class="ui-upload">upload<input type="file" style="display: none;" /></label>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 防止长按文字被选中出现复制框

使用 css 设置按钮 user-select:none;

# Jenkins nginx docker

# Ocam 录屏软件

# vscode 尝试 Lombok

这个家伙你用不用都无妨，反正我是挺喜欢的。这里就不啰嗦到底干嘛的，简单来说就是我可以用一个 @Data 注解帮我自动生成（编译后生成）getter、setter、toString、equals、hashCode 这些方法，反正多花时间写这些代码也不会提高你的能力，修改的时候还要多花时间，完全没！必！要！好吗？

按照官方的文档我尝试了不在 maven 环境下是行不通的！行不通的。如果你可以的话在文章评论下告诉我哈~

所以我们安装一个 Lombok Annotations Support for VS Code 就可以了。

在 maven 工程中添加 lombok 依赖

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.16.20</version>
    <scope>provided</scope>
</dependency>
复制代码

1
2
3
4
5
6
7

# 谷歌开发者工具之页面元素修改

有的时候我们需要临时改变页面上的文字，图案等信息，一种常见的方法是打开 Elememts，然后在修改页面的源码，这种做法比较麻烦。如果需要修改多处，需要频繁的修改源码。

而通过 Chrome 的控制台 Console 中，只需要下面一句简单的代码就可以使得整个页面变得可编辑（划重点）。

document.body.contentEditable=true

# 打开控制台命令菜单

通过 F12 打开的命令行并不能包含全部的菜单，在 Mac 下通过快捷键 Cmd + Shift + P，在 Windows,Linux 下通过Ctrl + Shift + P，可以打开所有的菜单选项，然后点击选择快速进入到对应的菜单中

# 清除浮动

浮动闭合办法：

.clearfix {
  overflow: auto;
  _height: 1%;
}

1
2
3
4

.clearfix {
  overflow: hidden;
  _zoom: 1;
}

1
2
3
4

.clear:after {
  display: block;
  content: "";
  clear: both;
}

1
2
3
4
5

# 设置盒子宽度

一开始写 css 样式时，第一个样式：

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

1
2
3
4
5
6

# 字体大小

浏览器默认情况下令 1em === 16px

# 用 div 画“三角”

#sanjiao {
  border-style: solid;
  border-width: 100px 100px 0px 100px;
  border-color: blue transparent transparent transparent;
  width: 0px;
}
.sanjiao2 {
  border: 100px solid;
  border-color: #333 transparent transparent transparent;
  width: 0;
}

1
2
3
4
5
6
7
8
9
10
11

# 动态加载 js 和 css

window.onload = function() {
  downloadCSS("a.css")
  downloadJS("b.js")
}
//动态加载CSS文件
function downloadCSS(url) {
  var elem = document.createElement("link")
  elem.rel = "stylesheet"
  elem.type = "text/css"
  elem.href = url
  document.body.appendChild(elem)
}
//动态加载JS文件
function downloadJS(url) {
  var elem = document.createElement("script")
  elem.src = url
  document.body.appendChild(elem)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# this

foo() ---> foo.call(window)
obj.foo() --> obj.foo.call(obj)

# CSS3 @keyframes 规则

@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}

1
2
3
4
5
6
7
8

@keyframes mymove {
  0% {
    top: 0px;
    left: 0px;
    background: red;
  }
  25% {
    top: 0px;
    left: 100px;
    background: blue;
  }
  50% {
    top: 100px;
    left: 100px;
    background: yellow;
  }
  75% {
    top: 100px;
    left: 0px;
    background: green;
  }
  100% {
    top: 0px;
    left: 0px;
    background: red;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# npm

npm install -g npm-check-updates

设置 npm 全局包下载路径
npm config set prefix "D:\workspace\npm_global"
设置 npm 缓存路径
npm config set cache "D:\workspace\npm_cache"

1
2
3
4

# yarn

npm 与 yarn 命令对比

# 更新 npm 包

https://segmentfault.com/a/1190000013759416

ncu -u

升级所有依赖
因为webpack4改了 它的hook api ，所以所有的loaders、plugins都需要升级才能够适配。
可以使用命令行 npm outdated，列出所以可以更新的包。免得再一个个去npm找相对于的可用版本了。

1
2
3
4
5

# 常用 npm 包

NProgress 进度条

Vue-vritual-scroll-list 大数据量优化

ECharts 图表插件 gallery

path-to-regexp url 字符串的正则表达式