撸码日常

Echarts y轴name显示问题

帮同事解决一个很简单的一个问题 用到的 api地址直达 api地址直达

直接随便找个案例 在这里写

option = {
  xAxis: {},
  yAxis: {
    name: 'y\n轴\n标\n题', //坐标名称 \n来换行
    nameTextStyle: { //文字样式
      color: 'red', //颜色
      align: 'center', //径向水平对齐方式
      verticalAlign: 'middle', //径向轴名称文字的垂直对齐方式
      padding: [200, 70, -10, -10],//上右下左
      fontSize: 20,//字体大小
    },
    nameLocation: 'center',//得到坐标轴名称的显示位置。
    nameRotate: 0,//坐标轴名字旋转，是个角度值
  },
  series: [{
    data: [[10, 40], [50, 100], [40, 20]],
    type: 'line'
  }]
};

ant design 有多个table组件复选框选中统计合并问题

• 项目需求，需要将数据分组以table形式展示可以选择最后提交所有组下选中人员的集合
  onChange 事件无法满足此需求，查看api 【onSelect，onSelectAll】

//table 组件[子组件]
   <a-table
      :columns="columnstable"
      :data-source="data"
      :scroll="{ x: 1000, y: 500 }"
      :pagination="false"
      :row-selection="rowSelection"
    ></a-table>

   data() {
    return {
      rowSelection: {
        onSelect: this.onSelect,
        onSelectAll: this.onSelectAllEvent
      },
     }
   }，
   methods: {
    onSelect(record, selected, selectedRows) {
      //获取单个取消或选中的对象 来分别处理多个表格的选中状态
     this.$emit('oneAction',{selected:selected,record:record})
    },
    onSelectAllEvent(selected, selectedRows, changeRows) {
      //获取每个表格的全选或全不选数据 来分别处理多个表格的选中状态
      this.$emit('allAction',{selected:selected,changeRows:changeRows})
    },
  },

     //父组件
     <selectTable
        @oneAction="oneAction"
        @allAction="allAction"
      ></selectTable>
    
    //seachTable 组件单个复选框操作
    oneAction(params){
     params.selected?this.getRuslutData(params.record,'push'):this.getRuslutData(params.record,'onePop')
    },
    //seachTable 每个组件全选操作
    allAction(paramsAry){
      paramsAry.selected?this.getRuslutData(paramsAry.changeRows,'pushAll'):this.getRuslutData(paramsAry.changeRows,'onePopAll')
    },
    /*
    *params
    *data[Array || Object]
    *type[String] 操作状态
    */
    getRuslutData(data,type){
      if(type == 'push'){
          this.selectDataCach.push(data)
      }else if(type == 'onePop'){
            this.selectDataCach = this.selectDataCach.filter(k => data.vctid !== k.vctid)
      }else if(type == 'pushAll'){
            this.selectDataCach = [...this.selectDataCach,...data]
      }else{
            //取差集
            this.selectDataCach =  this.selectDataCach.concat(data).filter(m => !(data.map(z =>z.vctid)).includes(m.vctid))
      }
      this.formdata.selectdata = this.selectDataCach.map(i => i.vctid)
    }

vue跳外链回退不触发方法问题

window.addEventListener('pageshow', ()=> {
      //这里写要触发的代码
    });

数组去重

//数组去重，今天项目中用到数组去重，总结下几总方便好用的方法
//方法一，不得不说reduce真的很强大【简单明了 推荐】
let _obj = {}
aryList.reduce((pro,cur) =>{    
    cur.id in _obj?null:(_obj[cur.id] = '',pro.push(cur))
    return pro

},[])
//方法二 Map【set不可重复，这个更简单】
let aryMap = new Map()
aryList.map(k => aryMap.set(k.id,k))
console.log([...aryMap.values()])

方法... 其他方法万变不离其宗

//判断对象中的属性值是否有空值 有则返回false
Object.values(i).every(m => m !== '' && m !== null)

记一次封装axios 网略请求问题

//响应拦截err时 监听状态码监听不到
//因为是项目迭代 之前封装没注意过这块
//查了下error.response 就可以取到状态码了
...
error => {
    if (error.status) ...
}
...

vue3+ts 遇到的问题都在这里

vue2.0 的时候父组件调用子组件的方法，很简单 直接this.$refs.xx.xxx() 就行
今天用vue3.0 + ts 来实现父组件调用子组件的方法

//子组件 父组件调用 openShar 来改变 showShare 没什么可说的
setup() {
    const showShare = ref<boolean>(false)
    const options = reactive([]);

    const openShar = () =>{
        showShare.value = true
    }
    return {
      options,
      showShare,
      onSelect,
      openShar
    };
  },

//父组件 Teleport 【瞬移】

<Teleport to="body">
        <my-share ref="shareRef" />
</Teleport>

 setup(){
        const navbarInfo = reactive<navBarInfoType>({
        title:'Vue3+Ts',
        backText:'返回',
        rightText:'分享'
    })
    //因为使用了ts 直接const shareRef = ref<boolean>(false) 这样定义
    //shareRef.value 索引不到 而且编译器会报错 
    //要写成下面这样 ref<InstanceType<typeof myShare>> [mySahare 是子组件]
    const shareRef = ref<InstanceType<typeof myShare>>()
    //打开分享
    const openShare = () =>{
       //这样就可以被ts索引到了
       shareRef.value?.openShar()
    }

    return {
        ...toRefs(navbarInfo),
        openShare,
        shareRef
    }
    }

今天遇到一个微信中打开h5网页，跳转路由后屏幕底部出现操作栏导致动态计算页面计算滚动区域的高度失效

//通过window.onresize监听可视区域的变化，然后赋值给响应数据，watch 监听数据重新赋值，直接上代码
<template>
  <div id="appraisal">
    <div ref="titRef" class="title">填写信息并评价</div>
    <div class="content">
      <div class="con-title">问题调查</div>
      <div class="pro-con" :style="radioGroupStyle">
        <div
          class="pro-item"
          v-for="(item, index) in starAry"
          :key="`pro-${index}`"
        >
          <div class="pro-item-h">{{ i }}.查勘员是否准时到场</div>
          <van-rate
            class="rate"
            v-model="item.strNum"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </div>
      </div>
      <div style="width: 100%; text-align: center">
        <span ref="btnRef" class="submit">提交</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { ref, onMounted, computed, reactive, toRefs, watch } from "vue";
interface radioGroupStyleType {
  height: string;
  "overflow-y": string;
  "-webkit-overflow-scrolling": string;
}
interface starObjItemType {
  id: string;
  strNum: number;
}
interface reactiveType {
  starAry: starObjItemType[];
  radioGroupHeight: string;
  documentHeight: number;
}
export default {
  name: "",
  setup() {
    const value = ref(3);
    const data = reactive<reactiveType>({
      radioGroupHeight: "",
      documentHeight: 0,
      starAry: [
        { id: "1", strNum: 3 },
        { id: "2", strNum: 1 },
        { id: "3", strNum: 3 },
        { id: "4", strNum: 2 },
        { id: "5", strNum: 3 },
        { id: "6", strNum: 2 },
      ],
    });
    window.onresize = () => {
      return (() => {
        data.documentHeight = document.body.clientHeight;
      })();
    };
    const titRef = ref<HTMLElement>();
    const btnRef = ref<HTMLElement>();
    const getRadioGroupHeight = (documentHeight: number) => {
      documentHeight == 0? documentHeight = document.body.clientHeight:documentHeight
      data.radioGroupHeight =
        documentHeight -
        Number(titRef.value?.clientHeight) -
        Number(btnRef.value?.clientHeight) -
        230 +
        "px";
    };
    watch(data, (val) => {
      getRadioGroupHeight(val.documentHeight);
    });
    const radioGroupStyle = computed((): radioGroupStyleType => {
      return {
        "overflow-y": "auto",
        height: data.radioGroupHeight,
        "-webkit-overflow-scrolling": "touch",
      };
    });

    onMounted(() => {
      getRadioGroupHeight(data.documentHeight);
    });
    return {
      value,
      titRef,
      btnRef,
      radioGroupStyle,
      ...toRefs(data),
      activeIcon: "https://img.yzcdn.cn/vant/user-active.png",
      inactiveIcon: "https://img.yzcdn.cn/vant/user-inactive.png",
    };
  },
};
</script>
<style lang="less" scoped>
#appraisal {
  background: #008681;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  .title {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .content {
    background: #fff;
    border-radius: 8px;
    padding: 0 20px 20px 20px;

    box-sizing: border-box;
    .con-title {
      font-size: 28px;
      width: 100%;
      text-align: center;
      padding-top: 50px;
      box-sizing: border-box;
      margin-bottom: 20px;
    }
    .pro-item {
      font-size: 20px;
      margin-bottom: 20px;
      .pro-item-h {
        margin-bottom: 10px;
      }
      .rate {
        padding-left: 15px;
      }
    }
  }
  .submit {
    font-size: 20px;
    padding: 2px 30px;
    color: #fff;
    background: #005a57;
    border: 1px solid #fff;
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
  }
  .img-icon {
    height: 20px;
  }
}
/deep/ .radio .van-radio__icon {
  font-size: 28px;
}
/deep/ .radio span {
  font-size: 28px;
  color: #fff;
  margin-left: 30px;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>

vant 下拉刷新遇到的坑

1.今天遇到的问题是下拉刷新与滚动条冲突，因为之前遇到过 refresh组件的父节点如果设置滚动就会引起浏览器回滚时出发下拉刷新
，检查了下refresh 父节点并没有设置overflow-scorll,就很神奇，然后发现父节点有设置overflow-x:hidden 搞定....

2.vant 中用toast.loading 做全局加载loading,要配置参数 duration:0 否则 会在默认的时间清楚loading ,这个问题被坑了两次

ts中 给window添加属性

//方法一
(<any>window).MyNamespace

//方法二 https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512
// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

公众号h5返回公众号首页

declare var window: Window & { WeixinJSBridge: any };
window.WeixinJSBridge.call("closeWindow");

ant design vue 表格多选问题

问题阐述：
table 做了多选的总操作，同时每一行后面也可以操作每一条数据，从而导致做完每一行的操作后，数据更新导致已选中的数据错乱（选中的值向下移了一条）
问题分析：
通过回调函数看选中的数据是用索引记录的，所以操作完一条后，选中的索引没有相应的删除，导致之前没被选中的数据选中
初步解决方案
一。指定选中的值不为索引，为指定的唯一Id
二。操作每一条时记录当前的索引，找到对应选中数据的索引，删除对应选中的索引，但是依然还会有问题
api中 table 组件中 rowKey 表格行 key 的取值，可以是字符串或一个函数
这样你选中后的数据就在selectedRowKeys数组里了（即指定不为索引为唯一id）

<a-table
:rowKey="
          (record, index) => {
            return record.id;
          }
        "
/>