看，选，爱 功能收藏

fc
234 阅读4分钟

功能使用收藏:

一.两个不同项目使用URl链接带参数传值如何获？后面的值，使用方法如下——四川plm项目 例：可以在文件夹一里面查找出来；： 1.例: http://47.111.119.83:10000?machineMode=PT70&machineNO=卷烟机&machine_Code=0311056

// 从Url中获取某一参数的参数值-使用正则

function getQuery(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]); return null;
}

//获取Url中的参数与参数值 或 获取本地存储localStorage.getIte('键')

const machine_Code = getQuery('machine_Code') || localStorage.getIte('machine_Code');
const machine_NO = getQuery('machineNO') || localStorage.getItem('machineNO');
const machine_Mode = getQuery('machineMode') || localStorage.getItem('machineMode');

//存入本地存储localStorage.setItem('键', 值)；

localStorage.setItem('machine_Code', machine_Code)
localStorage.setItem('machineNO', machine_NO)
localStorage.setItem('machineMode', machine_Mode)

二.本地存储使用方法： 1.如果需要存储对象，首先要转化为字符串。利用JSON.stringify()； 例:var person = {name:”vanida”,”sex”:”girl”,”age”:25}; localStorage.setItem(“person”,JSON.stringify(person)); // 打印:localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}”

2.然后取出person的对象你可以用JSON.parse(); person = JSON.parse(localStorage.getItem(“person”));

三.样式修整

1.width: calc(100% - 20px);

​ css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。

四.饿了吗框架时间表格显示这个月的最初日期和今天当前日期——四川plm项目:

//  开始时间
getCurrentMonthFirst() {
  var date = new Date();
  date.setDate(1);
  var month = parseInt(date.getMonth() + 1);
  var day = date.getDate();
  if (month < 10) month = "0" + month;
  if (day < 10) day = "0" + day;
   修改这里即可:this.startTime = date.getFullYear() + "-" + month + "-" + day;
    },
//  结束时间
getNowTime() {
  var now = new Date();
  var year = now.getFullYear(); //得到年份
  var month = now.getMonth(); //得到月份
  var date = now.getDate(); //得到日期
  month = month + 1;
  month = month.toString().padStart(2, "0");
  date = date.toString().padStart(2, "0");
 修改这里即可:this.endTime = `${year}-${month}-${date}`;
//  最后在生命周期去mounted（）{}放入这个函数
}

五.显示当前年月日+当前时间——四川plm项目 1.可在store里面放入大佬设置好的当前时间年月日 例：可以在文件夹五里面查找出来； 2.可放在components组件下面新建一个新的文件index.vue 可以写好样式结构用store点出来显示 例：可以在文件夹五里面查找出来； 3.可在全局main.js里面，1.导入components组件下面新建的文件 例:import TimeInfo from '@/components/TimeInfo'，2.可放在Vue的原型下 例:Vue.component('TimeInfo', TimeInfo); 4.最后一步就是在页面可以随时显示出来需要 例:

六.如表格没有数据显示加载图片——四川plm项目 1.可放在components组件下面新建一个新的文件index.vue 例：可以在文件夹六里面查找出来； 2.SVG图片可以放在assets下面新建一个新的文件loading.svg 例：可以在文件夹六里面查找出来； 3.可在全局main.js里面，1.导入components组件下面新建的文件 例:import TimeInfo from '@/components/TimeInfo'，2.可放在Vue的原型下 例:Vue.component('TimeInfo', TimeInfo); 4.最后一步就是在页面可以随时显示出来需要 例:

七.行内样式可以动态写法，在点击或者其他事件起到作用

  1. 1.  :style="{

​    width:pw+'px',

​    right:plht+'px'

​    }"

2. 在data里面return：{

     pw:305;

​    right:305;

   }

八. Vue的代码块简用-可以在文件夹八里面查找出来；

九. Table切换原生写法好用

![](C:\Users\Public\Pictures\Sample Pictures\啊.png)

 <ul class="timeList">

​                    <li

​                        v-for="(item, index) in timeTabs"

​                        :key="index"

​                        :class="{'active':item.value==currentTime}"

​                        @click="switchTime(item)"

​                    \>{{item.name}}</li>

​                </ul>

  data(){
​            return {

​                timeTabs:[

​                    {name:'本月', value:'1'},

​                    {name:'本季度', value:'2'},

​                    {name:'全年', value:'3'}

​                ],

​                currentTime:'1',

}

  methods:{
            switchTime(item){
                this.currentTime = item.value
            }
        }

十 . echarts使用好用

![](C:\Users\Public\Pictures\Sample Pictures\1.png)

<html>
<template>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="xChart" ref="chart"></div>

</template>
//导入
import echarts from '@/utils/echarts'  底部有需要导入结构
 data(){
        return{
            myChart:null,
            lArr:['消费额'],
            xArr:['12月', '11月', '10月', '12月', '11月', '10月', '12月', '11月', '10月', '12月', '11月', '10月'],
            planArr:[50, 42, 60, 50, 42, 60, 50, 42, 60, 50, 42, 60]
        }
    },
  mounted(){
        this.initChart()
    },
    
    methods:{
        initChart(){
            try {
               <!-- 基于准备好的dom，初始化echarts实例 -->
                this.myChart = echarts.init(this.$refs.chart)
                window.addEventListener('resize', this.myChart.resize)
                 <!-- 使用刚指定的配置项和数据显示图表 -->
                this.myChart.setOption(this.getOption())
            } catch (error) {
                console.log(error)
            }
        },
        getOption(){
            let self = this
            let option = {
                grid:{
                    top:20,
                    left:60,
                    right:10,
                    bottom:45
                },
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'shadow'
                    }
                },
                xAxis:[
                    {
                        type:'category',
                        data:this.xArr,
                        axisTick:{show:false},
                        axisLabel:{
                            color:'#a0a0a0',
                            fontSize:14
                        },
                        axisLine:{
                            lineStyle:{
                                type:'dashed',
                                color:['#e5e5e5']
                            }
                        }
                    }
                ],
                yAxis:[
                    {
                        type:'value',
                        min:0,
                        max:100,
                        axisTick:{show:false},
                        axisLine:{
                            show:false,
                            symbol:['none','arrow'],
                            lineStyle:{
                                color:'#e5e5e5'
                            }
                        },
                        axisLabel:{
                            color:'#a0a0a0',
                            fontSize:12
                        },
                        splitLine:{
                            lineStyle:{
                                type:'dashed',
                                color:['#e5e5e5']
                            }
                        }
                    }
                ],
                series:[
                    {
                        name:this.lArr[0],
                        barMaxWidth:25,
                        type:'bar',
                        itemStyle:{
                            color:{
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type:'linear',
                                colorStops:[
                                    {offset:1,color:'rgba(92, 165, 255, 0.05)'},
                                    {offset:0,color:'rgba(92, 165, 255, 1)'}
                                ]
                            }
                        },
                        data:this.planArr
                    }
                ]
            }
            return option
        }
    }

//导入安装 npm install echarts --save

import echarts from 'echarts/lib/echarts'

import 'echarts/lib/chart/bar' import 'echarts/lib/chart/pie' import 'echarts/lib/chart/line' // import 'echarts/extension/bmap/bmap' // import 'echarts/extension/dataTool/index'

import 'echarts/lib/component/legend' // import 'echarts/lib/component/legendScroll' import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip'

export default echarts;

十 一 .element-ui的隐藏滚动条组件el-scrollbar

{{ index + 1 }}
香梅路车队
876
十一 . vue-countTo---简单好用的一个数字滚动插件

 <!-- vue-countTo-数字滚动-->
 安装：npm install vue-count-to
 官网：https://www.npmjs.com/package/vue-count-to
<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>


1.startVal=开始值，
2..endVal=结束值，
3.duration=持续时间，以毫秒为单位，
4.autoplay=自动播放

十二. 字段颜色修整

![](C:\Users\Public\Pictures\Sample Pictures\Snipaste_2020-05-14_09-46-14.png)

<template>

  <!-- 内修-节点名称 -->

  <div :class="['nodeName', nodeName['s' + pitch]['class']]">

​    {{ nodeName["s" + pitch]["name"] }}

  </div>

</template>

<script>
export default {
  props: ["pitch"],
  data() {
    return {
      nodeName: {
        s完成: { name: "完成", class: "s1" },
        s报修审核: { name: "报修审核", class: "s1" },
        s诊断: { name: "诊断", class: "s1" },
        s出厂检验: { name: "出厂检验", class: "s1" },
        s结算: { name: "结算", class: "s2" },
        s接车: { name: "接车", class: "s2" },
      },
    };
  },
};
</script>

<style scoped lang="scss">
// 圈
.nodeName {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 6px;
  border: 1px solid transparent;
  border-radius: 15px;
  &.s1 {
    color: $orange;
    border-color: $orange;
  }
  &.s2 {
    color: $green;
    border-color: $green;
  }
  &.s3 {
    color: $red;
    border-color: $red;
  }
}
</style>

十三. 下载文件

 async download(index, row) {
      let formdata = this.getFormData({ resourcesUrl: row.url }); // 传入文件地址信息
      await downloadFile(formdata)
        .then((res) => {
          let rUrl = row.url;
          const fileName = rUrl.substring(rUrl.lastIndexOf("\\") + 1); // 截取下载文件的名称
          var filetype;
          if (rUrl.indexOf(".doc") > -1 || rUrl.indexOf(".docx") > -1) {
            filetype = "application/msword";
          } else if (rUrl.indexOf(".txt") > -1) {
            filetype = "text/plain";
          }
          const blob = new Blob([res], { type: filetype }); // text/plain表示后缀名为txt    application/msword表示后缀名为doc
          const elink = document.createElement("a");//创建下载链接
           // const fileName = "下载文件名";
          elink.download = fileName;
          elink.style.display = "none"; //将a标签隐藏
          elink.href = URL.createObjectURL(blob); //给a标签添加下载链接
          document.body.appendChild(elink);
          elink.click(); //执行a标签
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
          this.info("下载成功", "success");
        })
        .catch((e) => console.log(e));
    },

十四. 成功或失败弹窗

  //全局引用成功或失败弹窗
   info(str = "操作成功", type = "info") {
            this.$message({
                type: type,
                message: str,
                customClass: 'custom-message'
            })
        },
            
     //局部使用-即可
       this.info("下载成功", "success");

十五. 面试题

深拷贝和浅拷贝
    function deepCopy(obj) {
      let objClone = Array.isArray(obj) ? [] : {};
      for (var k in obj) {
        let item = obj[k];
        if (item instanceof Array) {
          // 判断ojb子元素是否为数组，如果是，递归复制
          objClone[k] = deepCopy(item);
        } else if (item instanceof Object) {
          // 判断ojb子元素是否为对象，如果是，递归复制
          objClone[k] = deepCopy(item);
        } else {
          //如果不是，简单复制
          objClone[k] = item;
        }
      }
      return objClone;
    }
    let obj = [1, 2, 3, 4, 5];
    // let data1 = deepCopy(obj);
    const data1 = JSON.parse(JSON.stringify(obj));
    obj[0] = 15;
    console.log(data1, "深拷贝-不改变值");
    console.log(obj, "浅拷贝-改变值");
    深拷贝：b不会随着a的的变化而去变化，这样拷贝值就不影响另外一个对象，拷贝多层一般使用递归；
    浅拷贝：b会随着a的的变化而去变化，拷贝会影响另外一个对象的值覆盖；

    反转字符串
    const reversalStript = "hellow woild";
    let reversalFinish = reversalStript.split("").reverse().join("");
    console.log(reversalFinish);

    判断是否基数或者偶数
    let isEven = (num) => num % 2 === 0;
    isEven(2) === true ? console.log("偶数") : console.log("基数");

    四舍五入取到某个小数点
    const toFixed = (n, fixed) =>~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
    console.log(toFixed(25.123456789,2));

    获取参数平均值
    const average = (...args) => args.reduce((a, b) => a + b) / args.length;
    console.log(average(1, 2, 3, 4));

    修改对象值
    let object1 = {};
    object1.property1 = 77;
    Object.defineProperty(object1, "property1", {
      value: 42,
    });
    console.log(object1.property1, "gai"); //42
    
4次挥手
一.客户端向服务端发送一个报文段，客户端进入等待状态，表明客户端没有数据要发送给服务端，请求关闭连接。
二.服务端收到客户端发送的报文，向客户端回一个确认报文段,客户端收到服务器返回确认报文后，客户端也进入等待状态。
三.服务端观察自己是否还有数据没有发送给客户端，如果有会先把数据发给客户端后向客户端关闭连接。如果没有会发送客户端关闭连接服务端进入确认关闭状态。
四.客户端收到服务端的关闭连接确认报文后，向服务端发送收到关闭确认，服务端就关闭连接了，客户端之后一直没有收到回复，客户端也关闭连接。
avatar
文章
阅读
粉丝