强制拉取远程分支

git fetch --all     //拉取所有更新，不同步；
git reset --hard origin/master     //本地代码同步线上最新版本(会覆盖本地所有与远程仓库上同名的文件)；
git pull   //再更新一次（其实也可以不用，第二步命令做过了其实）

js

// 遍历对象的key（不包括symbols）
Object.getOwnPropertyNames(obj)
// 遍历对象symbols的key
Object.getOwnPropertySymbols(obj)

vscode快捷键

功能	快捷键
括号跳转	ctrl shift \
折叠所有代码	ctrl k + ctrl 0
展开所有代码	ctrl k + ctrl j
文件预览	ctrl k + enter

// 阻止浏览器默认事件
document.body.addEventListener('touchmove',function(e){
    e.preventDefault()
  },false)

// 实现页面完全不可滚动
document.body.addEventListener('touchmove',function(e){
    e.preventDefault()
  },{ passive:false })

promise

promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

$router

this.$router.push({ name: 'payOrder', params: { addressId: this.radio } })
this.$route.params.addressId

this.$router.push({path: `/pay/editadress`,})

去除小数点后无用的0

parseFloat(value)

p标签显示1行溢出显示省略号

  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;

p标签显示2行溢出显示省略号

<p style="-webkit-box-orient: vertical;">text</p>
<style>
p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}
</style>

p标签首行缩进

p {
    text-indent: 30px;
}

p标签保留换行

white-space: pre-wrap;

vue按钮防抖

man.js创建全局指令

Vue.directive('throttle', { 
    inserted(el, binding) { 
        el.addEventListener('click', () => { 
            el.style.pointerEvents = 'none'; 
            if (!el.disabled) { 
                setTimeout(() => { 
                    el.style.pointerEvents = 'auto'; 
                }, binding.value || 2000); 
            } 
        }); 
    } 
});

在vue页面这样用 // 若不设置防抖时间，默认2s v-throttle

<p @click="search" v-throttle="10000">搜索</p>

vue中参数变化的同页面跳转页面不刷新的解决方式

// 全局导航守卫
router.beforeEach((to, from, next) => {
  if(to.name === from.name && to.query.id !== from.query.id) {
    next({ name: 'empty', query: { toName: to.name, toId:to.query.id} })
  }else {
    next()
  }
})

// empty中间路由
    let toName = this.$route.query.toName
    let toId = this.$route.query.toId
    this.$router.push({
      name: toName,
      query: { id: toId },
    })

给组件绑定原生事件

@click.native="fn()"

水平滚动列表

<!DOCTYPE html>
<html>
<head>
    <title>横向滑动</title>
    <style type="text/css">
        .slide-box{
            margin-top: 200px;
            height:35px;
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        .slide-item{
            padding:5px 10px;
            height: 35px;
        }
    </style>
</head>
<body>
    <div class="slide-box">
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
        <div class="slide-item">横向滑动</div>
    </div>
</body>
</html>

隐藏滚动条

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

清除浮动


    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

el-select 设置默认选中后无法切换

解决：重新赋值form

this.form = {...this.form}

按钮防抖

// 防抖
export const DebounceBy = (fn, t) => {
  let delay = t || 500
  let timer
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer)
    }
 
    let callNow = !timer
 
    timer = setTimeout(() => {
      timer = null
    }, delay)
 
    if (callNow) fn.apply(this, args)
  }
}

使用：

import { DebounceBy } from '@/common/union.js'

 // 在method的方法里面直接使用
fn:DebounceBy(function(value){
/*写你自己的业务代码*/
},3000)

git代理配置

git config --global http.proxy socks5://127.0.0.1:1080
// 端口号默认1080 具体看vpn监听端口

// 查看配置
git config --global -e

// 取消代理
git config --global --unset http.proxy

正则表达式

 金额 :      /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/

div不设置宽度按内容宽度自适应

width: max-content;
// max-width: max-content;

el-form-item 自定义label

<el-form-item prop="endTime">
  <label slot="label">
     <el-checkbox v-model="endTimechecked">截止时间</el-checkbox>
  </label>
  <el-date-picker :disabled="endTimechecked?false:true" value-format="yyyy-MM-dd mm:hh:ss" v-model="formInfo.endTime" type="datetime" placeholder="请选择截止时间" style="width: 200px">
  </el-date-picker>
</el-form-item>

图片上传前压缩

npm i image-conversion --save
template

<el-upload action="//up.qiniu.com" :show-file-list="false" :before-upload="beforeUpload" :on-success="(response, file, fileList)=>handleSuccessImg(response, file, fileList,'shareImg')" :data="upPram">
<el-button size="small" icon="el-icon-upload">选择要上传文件的文件</el-button><span style="color:red;">{{ziping?'正在压缩...':''}}</span>
</el-upload>

  // 引入image-conversion
// import imageConversion from 'image-conversion'
import * as imageConversion from 'image-conversion';
 methods: { 
// 第一种,不考虑图片长宽,只考虑图片大小的情况,图片超过4M就压缩
 beforeUpload (file) { return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 4 // 判定图片大小是否小于4MB
        if (isLt2M) {
          resolve(file)
        }
        console.log(file) // 压缩到400KB,这里的400就是要压缩的大小,可自定义
        imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
         resolve(res)
        })
      })
    }, 
//第二种,图片大小超过4M,长度超过2000就压缩
 beforeUpload2 (file) { // 图片不大于4m,宽度不大于2000
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL
        let isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        let img = new Image()
        img.onload = function () {
          file.width = img.width // 获取到width放在了file属性上
          file.height = img.height // 获取到height放在了file属性上
          let valid = img.width > 2000 // 图片宽度大于2000
          // console.log(11, file)
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (valid || isLt2M) {
            imageConversion.compressAccurately(file, {
              size: 400,
              width: 2000 }).then(res => { // console.log(33, res)
               resolve(res)
            })
          } else resolve(file)
        } // 需要把图片赋值
        img.src = _URL.createObjectURL(file)
      })
    },
  } </script>

系统日期格式化

    getNowFormatDate() {
      var date = new Date()  // Tue May 25 2021 14:17:32 GMT+0800 (中国标准时间)
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate   // 2021-05-25
    },

//长按禁止选择文字

* {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

图片裁剪

object-fit: cover;

vue3中给Vue绑定原型

const app = createApp(App);

import axios from "axios";
app.config.globalProperties.$axios = axios;

app.use(store).use(router).mount("#app");

在Vue 3组合式API中使用

1.在setup周期中，先在顶部定义一个变量：let { proxy } = getCurrentInstance();

2.在onMounted周期中使用，方式是：proxy.$axios......

公众号H5 隐藏/显示右上角菜单（分享复制链接等）

隐藏右上角菜单接口
wx.hideOptionMenu();

显示右上角菜单接口
wx.showOptionMenu();

关闭当前网页窗口接口
wx.closeWindow();

swiper 左右漏部分

image.png

  .swiper-box .swiper-slide {
    width: 80vw !important;
    background-color: yellowgreen;
    margin: 0 10vw;
  }
  .swiper-slide-prev {
    right: -14.8vw;
  }
  .swiper-slide-next {
    left: -14.8vw;
  }

视频进度条操作

document.querySelect('video').currentTime = document.querySelect('video').duration;

JavaScript对象多层属性获取方法

function getProperty(obj, keyStr){
  // let reg=new RegExp(/\[(\w+)\]/g);
  // keyStr = keyStr.replace(reg, '.$1');
  keyStr = keyStr.replace(/\[(\w+)\]/g, '.$1');
  let keyArray = keyStr.split(".");
  for (let i in keyArray) {
    obj = obj[keyArray[i]] || null;
  }
  return obj;

// 调用
let obj = {
  a: {
    b: {
      c: '12345',
      d: [{name: '孙红雷', 
      '/e-f$_*g/': (name) => name + ':\n这瓜保熟吗?', 
      h: (param) => param}]
    }
  }
};
let temp =getProperty(obj, 'a.b.d.0./e-f$_*g/');
let temp1=getProperty(obj, 'a.b.d[0].h');
console.log(temp(temp1('阿强')));

vue 中 v-html 通过正则表达式清除富文本标签中的style样式等

<div id="details-article" v-html="removeHtmlStyle(detailsData.content)"></div>

 removeHtmlStyle(html) {
      let rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g;
      let newHtml = "";
      if (html) {
        newHtml = html.replace(rel, "");
      }
      // 清除类名
      // let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;
      // let newClassHtml = "";
      // if (newHtml) {
      //   newClassHtml = newHtml.replace(relClass, "");
      // }
      return newHtml;
    },

富文本换行问题

{
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}

自定义组件挂载原型

https://www.jb51.net/article/258579.htm

富文本图片绑定点击事件

image.png

docx模板

DocxTemplater

excel插件

luckysheet

记录