工作常见问题

一个想走出去的码农

已于 2022-09-14 11:18:15 修改

阅读量794

点赞数

分类专栏：项目文章标签： vue.js 前端 javascript

于 2021-12-09 14:47:48 首次发布

本文链接：https://blog.csdn.net/weixin_51811318/article/details/121810448

版权

项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

C端

1.关于底部遮挡问题

请添加图片描述
底部按钮遮挡内容（苹果X）
在上边的区域加上 padding-bottom: calc(110rpx + env(safe-area-inset-bottom));

2.下拉刷新

参考页面

pages/coupon/center/index

pages/setGame/gameList

onPullDownRefresh:function(){

    this.couponActivityList = [];//下拉列表为空

    this.pageIndex = 1;//页面

    this.queryCouponActivity();//调用接口

    setTimeout(function() {

            uni.stopPullDownRefresh();

      }, 1000);

  },

3.图片上传

3.1上传图片记得先下载图片命名需要注意http://app.heading123.cn:10088/wiki/pages/viewpage.action?pageId=31557084

3.2

4.拉取tag

git checkout -b 自己的分支名远程分支名

如果没有这个分支–自己要先到develop到git pull一下然后再新建分支

B端

1.弹窗关闭清除校验

给弹框绑定close事件，表单里面绑定ref，事件里用一个清除校验

closedialog(){
       this.$refs['form'].resetFields()
}

在这里插入图片描述

2.获取表单的列的元素–进行排序

给table绑定事件---->@sort-change=“tableChange”

拿到里面的元素-----column中记得定义每一列的prop 根据prop拿值

tableChange(column, prop, order) {
 //排序
console.log(column,prop,order,'0000000');
      this.clickPraise=column.prop == "clickPraiseCount"&&column.order == "ascending"?"ASC":column.prop == "clickPraiseCount"&&column.order == "descending"?"DESC":""
      this.releaseTime=column.prop == "lastReleaseTime"&&column.order == "ascending"?"ASC":column.prop == "lastReleaseTime"&&column.order == "descending"?"DESC":""
     this.auditTime=(!column.prop)&&column.order == "ascending"?"ASC":(!column.prop)&&column.order == "descending"?"DESC":""
      this.getList();
    },

记得调用方法时将排序清空

3.传参注意

通过新建值传入不改变data里面的值
在这里插入图片描述

4.校验

4.1禁止输入emoji表情符

  const checkEmoji = (rule, value, cb) => {
      if (/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/.test(value)) {
        return cb(new Error('禁止输入emoji表情符'))
      }
      cb()
    }

5.转数组+加数据

//①格式是{“1”：“a”,"2":"b"}
const arr = Object.keys(this.types)
         for(let i = 0; i < arr.length; i++) {
           this.options.push({ label: this.types[arr[i]], value: arr[i] })
         }
//②转化成[{value:1,lable:'a'},{value:2,lable:"b"}]
//③往里面加数据利用push
this.options.push({label:'不限',value:'0'})

6.时间格式化

2021-11-18 11:11:11

handleTime(val){
  let date = new Date(val);
  let year = date.getFullYear();
  let month = date.getMonth();
  let day = date.getDate();
  let h = date.getHours();
  h = h > 9 ?  h:'0' + h ;
  let m = date.getMinutes();
  m = m > 9 ?  m:'0' + m ;
  let s = date.getSeconds();
  s = s > 9 ?  s:'0' + s ;
  let time = year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s
  return time
},

7.过多少秒调用接口或者赋值

参考页面accounts/user/user-list—396行

利用箭头函数因为指向不一样

setTimeout(() =>{ 
//赋值
  this.disable=false
//调接口
this.getList()
     }, 10000);

8.rules规则传值

参考页面–>mall/park-pay-rules

多个输入框绑定一个规则，想判断当前判断的是哪一个输入框，可以传递一个参数区分

:rules="[{ required: false,validator: (rule,value,callback)=>{gradeDiscount(rule,value,callback,'0','price')}, trigger: ['change', 'blur']}]"

这里区分的是传递了一个price 在这里插入图片描述

9.时间选择器动态选择一年

9.1安装dayjs (npm i dayjs)

9.2导入dayjs

import dayjs from "dayjs"

9.3 el-date-picker 中加上:picker-options=“pickerOption”

9.4data()里加

 pickerOption:{
      disabledDate: (time) => {
       if (this.handlePickerDate) {
         const maxDate = dayjs(this.handlePickerDate).add(1, 'year').valueOf()
         const minDate = dayjs(this.handlePickerDate).subtract(1, 'year').valueOf()
         return time.getTime() > maxDate || time.getTime() < minDate
       }
       return false
      },
      onPick: (time2) => {
       if (time2.minDate && !time2.maxDate) {
         this.handlePickerDate = new Date(time2.minDate).getTime()
       }
       if (time2.maxDate) {
         this.handlePickerDate = null
       }
     }
   },

10.千位符方法

function getNumber(num) {
            if (typeof num !== 'string') {
                num = num.toString()
            }
            const nums = num.split('.')
            const reverseNum = nums[0].split('').reverse()
            const numList = []
            let list = []
            reverseNum.forEach((item, index) => {
                list.push(item)
                if (list.length === 3 && reverseNum[index + 1]) {
                    numList.push(item , ',')
                    list = []
                } else {
                    numList.push(item)
                }
            })
            const numStr = numList.reverse().join('')
            return nums.length === 2 ? numStr + '.' + nums[1] : numStr
        }

B端公司常用

1.为了不调多余的接口–组织

参考页面mall/users-growgrass

1.1首先在methods：{}里面写一个调用组织的方法

methods:{
async treeQuery(params) {
      await api.treeQuery(params).then((res) => {
        let {status, message ,data} = res;
        if(status == '0000' ) {
          if(data) {
            this.codes = [JSON.parse(localStorage.getItem("currentOrg")).code];
            data.orgs.forEach(item=> {
              this.codes.push(item.code);
            })
          }
        }else {
          this.$message.error(message);
        }
      })
    },
}

1.2在mounted（）里面调用组织的接口

let {code,orgTypeCode} = JSON.parse(localStorage.getItem("currentOrg"));
    // 获取到代码集合
    let params = {
      leafNodeType: "10003",
      status: "1",
      rootOrgCode: code
    }
    await this.treeQuery(params);

1.3此时给调用组织的接口参数赋值

----》this.dataForm.orgCodes = this.codes; this.getlist（）调用所需要的接口

2.默认近一个月的时间

参考页面：解绑车牌

2.1 首先调用element-ui组件

<el-date-picker
                  v-model="time"
                  type="datetimerange"
                  size="small"
                  align="right"
                  @change="changeDate"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >
  </el-date-picker>

2.2选取时间

  changePageAndSize(type, val) {
      if (type === "size") {
        this.dataForm.pageSize = val;
        this.dataForm.pageIndex = 1;
        this.$refs[`pageAndSize`].reset(1, val);
      } else {
        if (this.dataForm.pageIndex === val) {
          return;
        }
        this.dataForm.pageIndex = val;
      }
      // console.log( this.dataForm.pageSize,this.dataForm.pageIndex);
      this.loading = true;
      // 调接口
      this.getList();
    },
     changeDate(date) {
      if (date && date.length == 2) {
        const values = date;
        this.dataForm.beginTime = values[0];
        this.dataForm.endTime = values[1];
      } else {
        this.dataForm.beginTime = "";
        this.dataForm.endTime = "";
      }
      this.time = [this.dataForm.beginTime, this.dataForm.endTime];
    },

2.3获取默认时间

    // 获取默认时间
    setDefaultTime() {
      // 获取当前时间
      const date = new Date()
      const year = date.getFullYear()
      let month = date.getMonth() + 1;
      month = month >= 10 ? month : '0' + month;
      let day = date.getDate();
      day = day >=10 ? day : '0' + day;
      this.dataForm.endTime = year + '-' + month + '-' + day + ' 23:59:59';
      // 判断month是否需要减1
      // 1 如果是当月最后一天，month不减1 day为1
      // 2 如果不是当月最后一天 则month-1 day + 1
      if (day === new Date(year, month, 0).getDate()) {
        // 情况 1
        day = 1
      } else {
        // 情况 2
        month -= 1;
        // day += 1
        day=Number(day)+1
      }
       if (typeof month === 'string') {
        month = Number(month);
      }
      month = month >= 10 ? month : '0' + month;
      day = day >= 10 ? day : '0' + day;
      this.dataForm.beginTime = year + '-' + month + '-' + day + ' 00:00:00';
      this.time = [this.dataForm.beginTime, this.dataForm.endTime];
    },

//注意刚进页面调用

注意绑定值time: [],

2.防爆点击

v-debounce="handleCreateCard" 引号是方法名

3.返回页面想自动刷新

关闭路由缓存keepAlive="false"

4.防爆点击指令

// 全局自定义指令--防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
//使用方法 给 Dom 加上v-debounce及回调函数即可
// 如：v-debounce="share"，v-debounce="share"，v-debounce="{func:tabbar_btn,data:'a'}"（单个参数），v-debounce="{func:tabbar_btn,data:['b',0,'9']}",携带多个参数
const debounce = {
  inserted: function (el, binding) {
    let timer
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        if(binding.value.func){
          // 带参数
          binding.value.func(...binding.value.data)
        }else{
          // 不带参数
          binding.value()
        }
      }, binding.value.data ?binding.value.data:1000)
    })
  },
} 
export default debounce

工作中遇到的问题

1.watch值变化

watch:{
    'dataForm1.type'() {
      
    },//记得加逗号
}

2.调详情中的所属组织

this.$refs.applicationRef.setOrgData(orgCode)

3.去掉`el-input`中`type='number'`中的上下箭头

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }

4.C端自动换行

1.
text-overflow: ellipsis;
word-wrap: break-word;
2.
word-break: break-all;
text-align: left;
3. flex-wrap: wrap;
    justify-content: flex-start;

5.回到add之前

git reset --soft HEAD^

6.清除校验

this.$refs['newBasicRuleForm'].clearValidate('maxPoint')

7.重新校验

this.$refs['dataFormCommons'].validateField('twoValue')

8.绑定`table`的校验规则

设置el-form在el-form-item中绑定ref,当保存的时候校验

//ref ---> activityPoints
//查看状态-->validateState
const obj = this.$refs.activityPoints.find(item => item.validateState === 'error')
//如果查看有error那么就有对象返回，直接return
if (obj) return

9.绑定自定义校验规则，拿不到值

                          :rules="[{validator: (rule, value, callback) => validatePointCheckWay(rule,                                           item.activityPoints, callback),//拿不到值就把当前所拿到的值传进去
                                    trigger: ['change', 'blur','input'],
                                    requiredInfo: item.activityPrices, pointzero: false,}
                          ]"

10.保留两位小数的校验

包含0 ：/(^([1-9]{1}\d{0,6})(\.\d{1,2})?$)|(^0[.][0-9][1-9]$)|(^0[.][1-9][0-9]?$)|(^0$\b)/ 
不包含0 ：/(^([1-9]{1}\d{0,6})(\.\d{1,2})?$)|(^0[.][0-9][1-9]$)|(^0[.][1-9][0-9]?$)/

11.撤销代码

git revert --hard be8c6f6dd

12 .千分符


getNumber(num) {

   if (typeof num !== 'string') {

    num = num.toString()

   }

   const nums = num.split('.')

   const reverseNum = nums[0].split('').reverse()

   const numList = []

   let list = []

   reverseNum.forEach((item, index) => {

    list.push(item)

    if (list.length === 3 && reverseNum[index + 1]) {

     numList.push(item, ',')

     list = []

    } else {

     numList.push(item)

    }

   })

   const numStr = numList.reverse().join('')

   return nums.length === 2 ? numStr + '.' + nums[1] : numStr

  }

13.watch监听对象

 watch:{

 form:{

  handler:function(val,olVal){

    let  Flag=false

    for ( let key in val.sellPaymentParams ) {

    if(val.sellPaymentParams[key].amount||val.sellPaymentParams[key].payCode){

     Flag=true

    }

   }

   if(val&&olVal&&(val.customerName||val.telephone)){

    Flag=true

   }

   this.flag=Flag

   console.log(this,this.flag,'jjjjj')

  },

  deep:true,

  immediate:true

  }

 },

一个想走出去的码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
工作常见问题

C端1.关于底部遮挡问题底部按钮遮挡内容（苹果X）在上边的区域加上 padding-bottom: calc(110rpx + env(safe-area-inset-bottom));2.下拉刷新参考页面pages/coupon/center/indexpages/setGame/gameListonPullDownRefresh:function(){ this.couponActivityList = [];//下拉列表为空 this.pageIndex =
复制链接

扫一扫