前言
记录平时遇到的技术问题和学习到的新知识
使用form表单提交不会有跨域的情况
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
| <form id="formId"
action="http://localhost:3000"
method="get">
<label>
<input type="text" placeholder="请输入手机号" id="inputId" name="mobile"
pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"
required
>
</label>
<input type="submit" value="提交"/>
</form>
window.onload = function () {
var form = document.getElementById('formId')
var input = document.getElementById('inputId')
form.onsubmit = function (e) {
e.preventDefault()
var value = input.value
var params = Base64.encode(value)
input.value = 'xxxx'
form.submit()
input.value = ''
}
}
<form target="myIframe"></form> // 使用target
<iframe name="myIframe" style="display: none"></iframe>
|
路由参数补充
vue的provide与inject
1
2
3
4
5
6
7
8
9
|
provide(){
return {
getMap: this.getMap
}
}
inject:['getMap']
|
vue的$attrs与$listeners
$attrs就是一个容器对象，这个容器对象会存放:父组件传过来的且子组件未使用props声明接收的数据
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
|
<father>
<Child
:msg0="msg0"
:msg1="msg1"
/>
</father>
props:['msg0'],
created(){
this.$attrs
}
export default {
inheritAttrs: false,
};
<fu @fromSun="fromSun"></fu>
methods: {
fromSun(payload) {
console.log("孙传祖", payload);
}
}
<sun v-bind="$attrs" v-on="$listeners"></sun>
methods: {
sendToZu() {
this.$emit("fromSun", this.data);
}
}
|
生成目录树结构
JSON格式转化正则
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
|
export function parseJson(jsonStr) {
return JSON.parse(jsonStr, (k, v) => {
try {
if (eval(v) instanceof RegExp) {
return eval(v);
}
} catch (e) {
}
return v;
});
}
export function stringifyJson(json) {
return JSON.stringify(json, (k, v) => {
if (v instanceof RegExp) {
return v.toString();
}
return v;
});
}
|
vue的环境变量
1
2
3
4
5
6
7
8
9
10
|
# 环境
NODE_ENV = development
# 请求地址
VUE_APP_BASE_API = ''
|
在字符串中使用正则的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 字符串的函数：
match()
格式：字符串.match(正则)
功能：在字符串匹配是否符合正则表达式
返回值：匹配成功，返回装有匹配到字串的数组
匹配失败，返回null
replace()
格式：字符串.replace(oldStr/正则,newStr);
功能：用newStr将oldStr替换
返回值：替换成功的新字符串
split()
格式：字符串.split(分割符/正则);
功能：用分割符将原字符串进行分割
返回值：分割剩下的字串组成的数组
search()
格式：字符串.search(字串/正则)
功能：找到符合条件的字串第一次出现的位置
返回值：
如果找到，返回>=0的下标否则，返回-1
|
npm补充
1
2
3
4
5
6
7
| // 查看全局安装
npm list --depth 0 -g
// 全局卸载
npm uninstall -g name
// 注意laragon和本地的cmd的是不同的npm库，两者没有关系
// webstorm和vscode使用cmd （终端将默认的powershell换成cmd）
|
参考：webstorm配置cmd vscode配置cmd
vue使用SvgIcon
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
|
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: "SvgIcon",
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
yarn add svg-sprite-loader --dev
chainWebpack: (config) => {
const dir = resolve('src/icons')
config.module
.rule('svg')
.exclude.add(dir)
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(dir)
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
},
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon";
Vue.component('SvgIcon', SvgIcon)
let req = require.context("./svg", false, /\.svg$/)
let requireAll = requireContext => requireContext.keys().map(requireContext)
try {
requireAll(req);
} catch (error) {
console.error(error)
}
<SvgIcon iconClass="xxx" style="width: 16px;height: 16px;fill: red"></SvgIcon>
|
使用svgo优化svg
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
# Svgo 配置文件
# 参考：https:
plugins:
- removeStyleElement: true
- removeAttrs:
attrs:
- 'fill'
- 'fill-rule'
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
表单的autocomplete
1
2
3
4
5
6
7
|
<form autocomplete="on | off">
|
直接修改整个state
1
2
3
4
5
6
7
8
9
| REST_STATE(state) {
Object.assign(state, initState())
}
|
JS中的注释
Sass 和 JS之间变量共享
1
2
3
4
5
6
7
8
9
10
| // scss
$theme: blue;
:export {
theme: $theme;
}
// js
import variables from '@/styles/var.scss'
console.log(variables.theme) // blue
|
v-bind绑定对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <template>
<component :is="type" v-bind="link"></component>
</template>
<script>
export default {
computed: {
type() {
return 'a'
},
link() {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
}
}
</script>
|
移动端rem与vw适配
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
|
import 'amfe-flexible'
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
@function px2vw($px) {
@return $px * 100vw / 750;
}
div{
width: px2vw(100)
}
|
vue中css使用data数据
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div :data-content="true"></div>
div:after {
content: attr(data-content)
}
<div :style="{'--bodyHeight': window.innerHeight + 'px'}"></div>
div {
height: calc(var(--bodyHeight) - 100px);
}
|
滚动条样式
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
| // 滚动条样式
@mixin scrollbar() {
&::-webkit-scrollbar {
width: 5px;
height: 10px;
}
&::-webkit-scrollbar-thumb {
background-color: #BEBEBE;
border-radius: 32px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 32px;
}
}
div {
@include scrollbar;
}
&::-webkit-scrollbar {
display: block
}
<div class="father">
<div class="son"></div>
</div>
.father {
overflow-x: auto;
transform: scaleY(-1);
@include scrollbar;
.son {
transform: scaleY(-1);
height: 100%;
}
}
|
elementui 表单重置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const info = {
a: 1,
b: 2,
}
const keys = Object.keys(info);
keys.forEach((item) => {
info[item] = "";
});
|
pnpm 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| cnpm install -g pnpm # 全局安装 pnpm
pnpm config set registry https://registry.npm.taobao.org/ # 设置镜像源
# 使用pnpm安装包报错，使用下面两个命令
#（只使用 pnpm setup 其他全局包会用不了，使用下面的命令可能会解决，暂不知道其他方案）
#（注意：不报错千万不要使用）
pnpm setup # 自动设置环境变量，会出现环境全部错误cnpm yarn等都用不了
pnpm config set global-bin-dir "D:\nodejs" # pnpm全局bin路径
pnpm install # 安装
pnpm add xxx # 安装生产依赖
pnpm add xxx -D # 安装本地依赖
pnpm add -g xxx # 全局安装
pnpm remove # 移除依赖
pnpm store prune # 清除缓存
|
其他配置
注意：不要随便使用下面的配置，会出现错误，如果配置了可以删除配置即可
项目文件夹名称改了，需要删除node_modules重新安装（不然安装新的包会报错）
1
2
3
4
5
6
7
8
9
10
11
12
13
| pnpm config set store-dir "D:\.pnpm-store" # pnpm全局仓库路径(类似 .git 仓库)
pnpm config set global-dir "D:\nodejs\pnpm\pnpm-global" # pnpm全局安装路径
pnpm config set global-bin-dir "D:\nodejs" # pnpm全局bin路径
pnpm config set state-dir "D:\nodejs\pnpm" # pnpm创建pnpm-state.json文件的目录
pnpm config set cache-dir "D:\nodejs\pnpm\cache" # pnpm全局缓存路径
npm config get userconfig # 用户配置文件
npm config edit # 编辑查看配置
npm config delete xxx # 删除某个配置
npm rm -g pnpm # 卸载全局包
npm ls -g # 查看全局包
npm cache clean --force # 强制清除缓存
|
