前端VUE3,JQ,uniapp,综合(Ctrl+F搜索)
js input大于0的整数 正则
//是否 >0 整数let reg = /^[1-9]*[1-9][0-9]*$/if(reg.test(e.target.value)){是}else{错}js上传blob图片
用户选定图片后 ,点击确认 ,首先js拿到blob图片资源 ,利用FileReader 转成base64类型 再上传
let reader = new FileReader();
reader.readAsDataURL(fileList[i]) //fileList[i] blob类型
reader.onload = function (e){
ajax上传方法('接口地址',{
imgData:e.currentTarget.result; //e.currentTarget.result 是base64类型的图片
})
}解决uniapp微信小程序菜单连点重复打开同一页面
#html部分<button @click="toReg()">注册</button>#js部分data() {
return {
jumping:false,
}},methods:{
toReg(){
let that = this
if(that.jumping){
console.log('跳转中');return ;
}
that.jumping = true;
uni.navigateTo({
url:'xxx',
success:()=>{
setTimeout(()=>{
that.jumping = false
},500)
}
})
}}Input Number 数字输入框
小程序限制input只能输入数字
注意这种情况没用使用双向绑定v-model
<input placeholder="请输入验证码" @input="onMyInput" /> <script>export default {
data() {
return {
code:'',
}
},
methods: {
onMyInput(e){
let str = e.detail.value//获取input内的所有内容 [新值]
console.log(str)
let reg = /^[0-9]*$/;
if(!reg.test(str)){
return this.code //验证不通过返回旧值
}
this.code = str //验证通过 新值覆盖旧值
},
}
}</script>TypeScript 声明一个对象的属性(key)的类型和默认值
单个变量类型和默认值let name : string = '张三'let age : number = 20let arr : Array<any> = [1,2,3,'a','b','c']
对象key的属性和默认值
let obj = {
dataList:{
type:Array<any>(),//类型
default:[],//默认值
},
showTotalAmount:{
type:Boolean,
default:true
},
showTotalNum:{
type:Boolean,
default:false
}}VUE点击按钮跳转连接(打开新窗口)
window.open('http://aaa.com')VUE项目发布后刷新报404
nginx配置文件中加入
location / {
try_files $uri $uri/ /index.html;
}参考
防止页面按钮连点 ,导致表单重复提交
页面上很多按钮 点击按钮就会请求接口 ,防止按钮连点 ,导致重复提交
<button :disabled="state.loading">提交1</button><button :disabled="state.loading">提交2</button><button :disabled="state.loading">提交3</button>jsconst state = reactive({
loading:Boolean(false),//页面加载状态})const a = async ()=>{
state.loading = true //请求接口前修改为true 所有按钮禁用
await req(url,data)
state.loading = false //请求完成 为false 所有按钮可点击}const b = async ()=>{
state.loading = true
await req(url,data)
state.loading = false}el-checkbox全选
普通的 el-checkbox 自己实现全选
注意 不是el-checkbox-group
页面上表格数据 ,每行数据前放一个el-checkbox 页面底部再有一个el-checkbox用来做全选
<div v-for="item in state.list" :key="item.id" class="prolistss"> <el-checkbox v-model="item.is_checked" true-label="1" false-label="0" @change="handleCheckedCitiesChange" /> <el-image :src="item.url"/></div><el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" label="全选" size="large" />
单行数据的勾选变化时 ,统计勾选的数量 ,来改变
全选按钮的状态
const handleCheckedCitiesChange = (value: string[]) => {
let myLength = state.list.length //页面数据总共多少行
var myCount = 0 //已选行数
state.list.forEach((item:any)=>{
if(item.is_checked == '1'){
myCount++
}
})
if(myCount == myLength){
console.log('全选')
isIndeterminate.value = false //取消全选按钮的 模糊状态
checkAll.value = true //全选按钮 选中
}else{
if( myCount > 0 ){
console.log('部分选')
isIndeterminate.value = true
}else{//
console.log('全不选')
isIndeterminate.value = false
checkAll.value = false
}
}}全选按钮点击时 ,修改所有单行按钮的状态
const handleCheckAllChange = (trueOrFalse: boolean) => {
console.log('handleCheckAllChange',trueOrFalse)
if(trueOrFalse){ //全选按钮 选中
state.list.forEach((item:any)=>{
item.is_checked = '1'
})
}else{ //全选按钮 取消
state.list.forEach((item:any)=>{
item.is_checked = '0'
})
}
isIndeterminate.value = false //取消模糊状态}el-table多选批量设置
数据行数多 ,客户想要批量设置
勾选后 改变其中一行 其他选定的行跟随改变
未勾选的行可以分别设置
图片.png
模板 <el-table @selection-change="handleSelectionChange">
<el-table-column>
<template #default={row}>
<el-input-number v-model="row.apply_num_limit" @change="handleChange(row)" />
</template>
</el-table-column>
</el-table>js<script lang="ts" setup>const list= ref(Array<any>()) //本页面数据
const selectedIdList = ref(Array<any>()) //保存勾选的行ID
const handleSelectionChange = (val:any)=>{
selectedIdList.value = [] //清空勾选的ID
val.forEach((item:any) => { //记录勾选的ID
selectedIdList.value.push(item.id)
});
}
const handleChange = (row:any) => {
//批量设置
if(selectedIdList.value.indexOf(row.id) != -1){//如果当前改变行是勾选状态
list.value.forEach((item:any)=>{
if(selectedIdList.value.indexOf(item.id) != -1){//页面数据中的其他行也是勾选状态
item.apply_num_limit = parseInt(row.apply_num_limit) //赋值
}
})
}
}</script>下拉菜单el-select
<el-select v-model="state.pub_flow_main_id" class="m-2" placeholder="成本中心" size="large" :disabled="true" //禁用 filterable //筛选 @change="functionName"//变化事件 参数(val) 为<el-option> 中的:value="item.id" clearable //可清空 > <el-option v-for="item in state.flowList" :key="item.id" :label="item.name" :value="item.id" /> </el-select>
vue3 + ts 子组件更新props
子组件可以直接修改父组件传进来的值
子组件定义事件名称update:事件名
const emits = defineEmits(['update:dataList','addCartEvent'])//子组件定义属性const props = defineProps({
dataList:{
type:Array,
default:Array<any>(),
},
showTotalAmount:{
type:Boolean,
default:true
},
showTotalNum:{
type:Boolean,
default:false
}})
/**
* 删除购物车物料
*/
const toDel = (row:any = null)=>{
ElMessageBox.confirm(
'确定删除选定的物料?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(()=>{
props.dataList.forEach((item:any,idx:any) => {
if(item.id == row.id){
props.dataList.splice(idx,1)
}
});
-- 触发事件 子组件触发 父组件数据也会跟着边 emits('update:dataList',props.dataList)
})
.catch(e=>{
// console.log('取消删除')
})}父组件调用子组件
<checkList v-model:dataList="父组件变量" @update:dataList="handUpdateDataList" -- 可有可无 @addCartEvent="addCart(state.multSelected)" -- 与本例子无关 > </checkList>
vue3 + ts 定义多个props属性
//子组件定义属性
const props = defineProps({
dataList:{
type:Array<any>(),
default:[],
},//
num:{
type:Number,
default:0
}})vue3 + ts 定义多个computed
const num = computed(()=>{
let totalNum = 0
props.dataList.forEach((item:any) => {
totalNum += item.purchaseNum });
return totalNum})const amount = computed(()=>{
let totalAmount = 0
props.dataList.forEach((item:any) => {
totalAmount += parseFloat(item.purchaseNum) * parseFloat(item.get_price.tax_price)
});
return totalAmount})VUE3 子组件watch props的值
可以写多个watc ,
子组件const mycontent = ref('')const props = defineProps({
content: {
type: String,
default() {
return ''
},
},});watch(
()=>props.content,//由于被监听的变量类型问题 ,用这种写法
() => {
//
mycontent.value = props.content
})watch(
mycontent,
(val) => {
//
emit('update:content', val)
})VUE3 使用pinia代替VUEX
每个组件都维护着自己的数据 ,当多个组件共用一份数据的时候就需要使用pinia
比如头部有一个我的购物车 ,显示当前购物车内的商品
多个页面中可以向购物车加入商品 ,每次加入商品 头部的购物车都需要刷新
图片.png
1 .安装pinia
main.ts中
import { createPinia } from 'pinia'app.use(createPinia())src目录下创建一个文件夹名称随意
piniaStore文件夹下创建js/ts文件
headCart.ts
文件内容如下
import { defineStore } from "pinia";import { req } from "../api/myapi";export const useHeadCart = defineStore('headCart',{
//这里放数据
state(){
return {
cartLoading:false,
myCart:[],
myCartNum:0,
myCartTotalAmount:0,
}
},
//这里写方法
actions:{
//刷新购物车
async flushHeadCart() {
console.log('pinia -> flushHeadCart');
this.cartLoading = true
let res = await req("eshopIndexHeadGetMyCart",{})
this.myCart = res.data.myCart this.myCartNum = res.data.myCartNum this.myCartTotalAmount = res.data.myCartTotalAmount this.cartLoading = false
}
}})读取数据 修改数据
import { useHeadCart } from "../piniaStore/headCart";const headCart = useHeadCart()//调用方法headCart.flushHeadCart()//读取数据<span class="sale-car-bage">{{headCart.myCartNum}}</span>VUE3 获取路由参数
import { useRoute } from "vue-router";const route = useRoute()let id = route.query.idJS转换UTC时间
2022-06-08T13:06:40.000000Z 转成 YYYY-mm-dd H:i:s
/**
* UTC时间转换
* @returns {string}
* @param datetime UTC时间
* @param dateSeprator 日期拼接符
* @param timeSeprator 时间拼接符
* @Eexample dateFormat("2021-09-03T22:42:05.659+00:00", "/", ":")
* dateFormat("2021-09-03T22:42:05.659+00:00")
*/
export function transTimestamp(datetime, dateSeprator = '-', timeSeprator = ':') {
if (datetime) {
const date = new Date(datetime)
const year = `${date.getUTCFullYear()}`
let month = `${date.getUTCMonth() + 1}`
let day = `${date.getUTCDate()}`
let hour = `${date.getUTCHours()}`
let minute = `${date.getUTCMinutes()}`
let second = `${date.getUTCSeconds()}`
if (month.length === 1) {
month = `0${month}`
}
if (day.length === 1) {
day = `0${day}`
}
if (day.length === 1) {
day = `0${day}`
}
if (hour.length === 1) {
hour = `0${hour}`
}
if (minute.length === 1) {
minute = `0${minute}`
}
if (second.length === 1) {
second = `0${second}`
}
return `${year}${dateSeprator}${month}${dateSeprator}${day} ${hour}${timeSeprator}${minute}${timeSeprator}${second}`
}}ref
ref创建响应式变量 ,改变变量的值可以使用 xxx.value = xxx
const checkAll = ref(false)//方法中使用const func = ()=>{
checkAll.value = true}elementui table 默认勾选
elementui table中 type="selection"类型的勾选
<el-table ref="multipleTableRef" :data="state.list" height="550" border style="width: 100%; font-size:12px" @selection-change="handleSelectionChange" > <el-table-column align="center" type="selection" width="55" /> <el-table-column align="center" label="序号" width="70" ></el-table>
加载完数据后 ,要实现的效果
图片.png
当请求接口后 ,根据某个字段 初始化勾选状态
接口数据赋值给页面后 ,在nextTick()中 使用 multipleTableRef.value.toggleRowSelection(item) 可以实现效果
const multipleTableRef = ref()
//接收数据
const fetchData = async () => {
state.listLoading = true
let res = await req('adminMyCartList',state.queryForm)
if(res.code == 200){
state.list = res.data.cartList //接口返回数据
//处理选中状态
nextTick(() => {
state.list.forEach((item:any) => {
if(item.is_checked == 1){
multipleTableRef.value.toggleRowSelection(item)
}
});
})
}element-ui-plus 时间选择 el-date-picker
<el-date-picker v-model="state.hope_delivery" :disabled-date="disabledDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择期望交期" />
设置禁用日期 ,组件内的每个日期都会挨个的传入 disabledDate方法 ,
方法返回true 日期被禁用 返回false 日期可用
const disabledDate = (time: Date) => {
let point = Date.now() + (3600 * 24 * 1000 * parseInt(state.statPrice.max_delivery_days_num))
// time.getTime()是每天凌晨的时间戳
// 小于时间点point 就禁选
return time.getTime() <= point}state.statPrice.max_delivery_days_num = 3时的效果
图片.png
element-ui-plus 顶部提示
图片.png
ElMessage({
message: res.msg,
type: 'success',
})element-ui-plus 弹窗确认
图片.png
ElMessageBox.alert('设置成功', '提示', {
confirmButtonText: '确定',
callback: (action:any) => {
//后续操作
},
})element-ui-plus confirm
图片.png
ElMessageBox.confirm(
'确定要添加此物料吗',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
console.log('点击确定')
})
.catch(() => {
console.log('点击取消')
})vue3父子组件传值 ,外部调用组件内部方法
调用关系父组件 -> 子组件 -> 孙子组件 , 想要在父组件某个事件中 ,调用孙子组件内部的方法
调用顺序也是 父组件(方法) -> 子组件(方法 )-> 孙子组件(方法)
孙子组件headCart对外暴露方法 ,供子组件调用
<script lang="ts" setup>/**
* 组件自身刷新数据
*/
const flushData = ()=>{
console.log('flushData')
}
defineExpose({
flushData
})</script>子组件 引用孙子组件 headCart ,并且子组件也对外暴露方法 ,供父组件调用
<template>
<!-- 孙子组件 -->
<HeadCart ref="headCartRef"></HeadCart><template><script lang="ts" setup>
import HeadCart from "./headCart.vue" //引入孙子组件
const headCartRef = ref() //拿到孙子组件的引用
//子组件定义方法 调用孙子方法
const flushHeadCart = ()=>{
headCartRef.value.flushData()
}
//子组件对外暴露
defineExpose({
flushHeadCart
})</script>父组件引入子组件
<template>
<Header ref="headerRef"></Header></template><script lang="ts" setup>import Header from "/src/components/header.vue";
const headerRef = ref()
const addSingleCart = (item: any) => {
item.num = 1
req('eshopAddCart',{data:JSON.stringify([item])})
.then(res=>{
headerRef.value.flushHeadCart()
})
};</script>vue点击按钮触发了后边的事件
图片.png
用@click.stop="" 解决<el-button @click.stop="rushToBuy(item2.id)">抢购</el-button>
计算属性computed 和 v-for
接口返回的价格数据都是六位小数 模板中展示时{{price}}需要处理
接口返回的数据放在state.preparedMaterialsList ,利用计算属性处理价格 ,再生成一个新的变量 , 模板中使用这个新的变量
图片.png
模板中 v-for遍历computed返回的变量preparedMaterialsList 而不是state.preparedMaterialsList
图片.png
四舍五入,保留两位小数
数字 : 4.00500.toFixed(2) 结果并不是4.01 ,而是4.00
自定义方法
/**
* 四舍五入保留两位
*/const myToFixed = (val:any)=>{
return (Math.round(parseFloat(val) * 100)/100).toFixed(2)}模板中
<span style="font-size: 12px">¥</span>{{myToFixed(price)}}</span>微信小程序判断当前环境
当前环境是指, 开发环境 ,体验环境 ,正式环境
日常本地代码开发时 ,小程序所处的环境是开发环境
发布体验版小程序后 ,就成了体验环境
正式发布后 ,变成了正式环境
通常这三种环境下调用的后台接口地址是不同的
通过__wxConfig.envVersion获取当前环境 ,配置不同的接口地址
一般都写在一个单独的js配置文件里 Config.js
#Config.js//Api配置const ApiConfig = {}//['develop','trial','release']分别对应 开发版,体验版,正式版console.log('当前微信小程序环境',__wxConfig.envVersion)const env = __wxConfig.envVersion
if(env == 'develop'){
ApiConfig.apiurl = "http://localhost/api/"
ApiConfig.weburl = "http://localhost/"}if(env == 'trial'){
ApiConfig.apiurl = "http://mydevlop.com.cn/api/"
ApiConfig.weburl = "http://mydevlop.com.cn/"}if(env == 'release'){
ApiConfig.apiurl = "https://prod.com/api/"
ApiConfig.weburl = "https://prod.com/"}VUE2 父子组件传值
用elementui dialog做为子组件
父组件传递visible控制子组件是否显示
子组件通过props接收visible , 但是子组件内部不能直接修改父组件传过来的值.
所以在子组件内部定义一个本地变量 myVisible 用来保存 props接收的值
并且通过watch方法监听接收的值, 去更新内部myVisible 变量子组件关闭需要通知父组件, 所以dialog的close方法需上报数据
@close="$emit('dialogClose')"父组件接收并更新visible的值
#父组件<ChangePassword v-bind:visible="visible" @dialogClose="visible=false"></ChangePassword>data: function () {
return {
visible: false
}
},#子组件<template>
<el-dialog title="修改密码" :visible.sync="myVisible" @close="dialogClose" :append-to-body="true">
<el-form :model="form">
<el-form-item label="新密码" :label-width="formLabelWidth">
<el-input v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码确认" :label-width="formLabelWidth">
<el-input v-model="form.rePassword" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="myVisible = false">取 消</el-button>
<el-button type="primary" @click="myVisible = false">确 定</el-button>
</div>
</el-dialog></template><script>const axios = require('axios')
export default {
name: 'ChangePassword',
data () {
return {
form: {
password: '',
rePassword: ''
},
formLabelWidth: '120px',
myVisible: false
}
},
props: ['visible'],
watch: {
visible: function (newV, oldV) {
this.myVisible = newV
}
}
}</script>前端排序
接口返回的数据进行排序,
let arr = [{'id':'1','name':'aaa','price':'1.0','getInfo':{'spec':'1'}},{'id':'1','name':'aaa','price':'20.0','getInfo':{'spec':'2'}},{'id':'1','name':'aaa','price':'9999.9','getInfo':{'spec':'3'}},]arr.sort(sortBy('id',true))//按照id正序arr.sort(sortBy('id',false))//按照id倒序arr.sort(sortBy('getInfo.spec',false))//按照`getInfo.spec`倒序const sortBy = (attr:any,rev:any)=>{
//第二个参数为true or false 若没有传递 默认升序排列
if(rev == undefined){
rev = 1;
}else{
rev = (rev) ? 1 : -1;
}
return function(a,b){
let arr = attr.split('.')
if(arr.length > 1){
a = a[arr[0]][arr[1]];
b = b[arr[0]][arr[1]];
}
else{
a = a[attr];
b = b[attr];
}//注意转成整数型
a = parseInt(a)
b = parseInt(b)
if(a < b){
return rev * -1;
}
if(a > b){
return rev * 1;
}
return 0;
}}datepicker
禁选今天之前的日期 ,今天和往后可以选择
<el-date-picker v-model="state.hope_delivery" :disabled-date="disabledDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择期望交期" />const disabledDate = (time: Date) => {
//返回true的日期会被禁用
return time.getTime() <= (Date.now() - (3600 * 24 * 1000))}JQ获取name相同的radio被选中的值：
$(':radio[name="choose_type"]:checked').val();JQ逗号切割字符串 ,逗号拼接数组
exportIdList = "1,2,3,4"
// exportIdList = "1"
let arr = exportIdList.split(',')
console.log(arr)
let str = arr.join(',')
console.log(str)
图片.png
数组为空的情况
exportIdList = ""
let arr = exportIdList.split(',')
console.log(arr)
let str = arr.join(',')
console.log(str)
图片.png
JQ 根据值删除数组中的某个元素
arr.splice($.inArray(val,arr),1)
JQ 勾选指定订单导出 checkbox
function checkOne(that) {
let val = that.value //值
let exportIdList = $('#exportIdList').val() //隐藏input
let isChecked = that.checked if (isChecked == true){
let arr = []
if (exportIdList != ""){
arr = exportIdList.split(',')
}
arr.push(val)
exportIdList = arr.join(',')
console.log(exportIdList)
}
else{
let arr = exportIdList.split(',')
arr.splice($.inArray(val,arr),1)
exportIdList = arr.join(',')
console.log(exportIdList)
}
$('#exportIdList').val(exportIdList)}jq勾选导出支持分页
隐藏input
<input type="hidden" name="exportIdList" value="" id="exportIdList">
表头<th style="width: 30%" class="zjtextmiddle" > 勾选导出 <input type="checkbox" class="checkAll" id="checkAll" onclick="checkAll(this)" /></th>
列表中
<input type="checkbox" value="<%item.id%>" class="checkOne" onclick="checkOne(this)"/>
//单选function checkOne(that) {
let val = that.value //值
let exportIdList = $('#exportIdList').val() //隐藏input
let isChecked = that.checked//是否选定
if (isChecked == true){
let arr = []
if (exportIdList != ""){
arr = exportIdList.split(',')
}
//id不存在就加入
if (arr.indexOf(val) == -1){
arr.push(val)
}
exportIdList = arr.join(',')
}
else{
let arr = exportIdList.split(',')
arr.splice($.inArray(val,arr),1)
exportIdList = arr.join(',')
}
$('#exportIdList').val(exportIdList)}//本页全选function checkAll(that) {
let isChecked = that.checked //全选框是否选定
let exportIdList = $('#exportIdList').val() //隐藏input
//已经选定的id
let finalArr = []
if (exportIdList != ""){
finalArr = exportIdList.split(',')
}
//本页所有id
let currArr = []
$('.checkOne').each(function(key,item){
currArr.push(item.value)
})
//本页全选
if (isChecked == true) {
//全部选定
$('.checkOne').each(function(key,item){
$(item).prop('checked',true)
})
currArr.forEach(function(item){
if (finalArr.indexOf(item) == -1){
finalArr.push(item)
}
})
// finalArr = finalArr.concat(currArr) //合并
exportIdList = finalArr.join(',') //拼接字符串
}//本页全取消
else{
$('.checkOne').each(function(key,item){
$(item).prop('checked',false) //全部取消选定
})
//移除本页的id
currArr.forEach(function(item){
finalArr.splice($.inArray(item,finalArr),1)
})
exportIdList = finalArr.join(',') //拼接字符串
}
$('#exportIdList').val(exportIdList)}#分页数据加载完执行 handleCheckBox:function() {
let isAllChecked = true
let exportIdList = $('#exportIdList').val()
let arr = []
if (!exportIdList || exportIdList == ""){
return
}
arr = exportIdList.split(',') //已经选定的id数组
//本页所有id
$('.checkOne').each(function(key,item){
let id = item.value if (arr.indexOf(id) > -1){
$(item).prop('checked',true)
}else {
isAllChecked = false
}
})
console.log('全部选定',isAllChecked)
if (isAllChecked == true){
$('#checkAll').prop('checked',true)
}
}jq通过that获取input的值
<input type="checkbox" value="<%item.id%>" class="checkOne" onclick="checkOne(this)"/>
function checkOne(that) {
console.log(that)
let val = that.value
console.log(val)}微信小程序判断当前环境
当前环境是指, 开发环境 ,体验环境 ,正式环境
日常本地代码开发时 ,小程序所处的环境是开发环境
发布体验版小程序后 ,就成了体验环境
正式发布后 ,变成了正式环境
通常这三种环境下调用的后台接口地址是不同的
通过__wxConfig.envVersion获取当前环境 ,配置不同的接口地址
一般都写在一个单独的js配置文件里Config.js
#Config.js//Api配置const ApiConfig = {}//['develop','trial','release']分别对应 开发版,体验版,正式版console.log('当前微信小程序环境',__wxConfig.envVersion)const env = __wxConfig.envVersion
if(env == 'develop'){
ApiConfig.apiurl = "http://localhost/api/"
ApiConfig.weburl = "http://localhost/"}if(env == 'trial'){
ApiConfig.apiurl = "http://mydevlop.com.cn/api/"
ApiConfig.weburl = "http://mydevlop.com.cn/"}if(env == 'release'){
ApiConfig.apiurl = "https://prod.com/api/"
ApiConfig.weburl = "https://prod.com/"}JS给对象添加新的键值对
let myKey = 'status'
let value = 200
let myData = {}
myData[myKey] = value
console.log(myData)
结果
作者：江河湖海琴瑟琵琶
链接：https://www.jianshu.com/p/666b31c2ab5d