记录工作的笔记

					 	##记录实际项目中学到的知识点

一 第一个工作.2021-4.6号开始
1.display: inline-block: 可以将盒子转化为行内块,将div等元素横着排列

2.画圆

<!-- 先写一个div -->
<div class="circle"><div>

.circle{
	width: 100px;
	height: 100px; 
	background-color:red; 
	border-radius: 50%;
	-moz-border-radius: 50%;
	webkit-border-radius: 50%;
}

3.vue点击事件可以直接写方法

如data中定义count 点击事件中可以直接使用<button @click="count++">{{count}}}</button>

4.v-for="item in movies"

对于item的理解是:item是movies中的每一项的值,假如movies=[a,b,c,d],那么item是a,是b,是c也是d.

v-for="(item,index) in movies"  这是一般的用法. item代表每**一个**值,index代表每**一个**索引

<span></span>不能调整margin的上下边距.只能使用margin-left和right属性,pading的上下左右都可以调整.

Array.isArray(obj), 用来判断obj是不是一个数组

display:flex;之后是不能使用宽度设置的，可以使用
 flex-grow:0;
 flex-shrink:0;
 给子元素加了之后就可以使用了

5. echarts加滚动条
   x轴

dataZoom: [//给x轴设置滚动条
       {
           start:0,//默认为0
           end: 100-1500/31,//默认为100
           type: 'slider',
           show: true,
           xAxisIndex: [0],
           handleSize: 0,//滑动条的 左右2个滑动条的大小
           height: 10,//组件高度
           left: '10%', //左边的距离
           right: '10%',//右边的距离
           bottom: 26,//右边的距离
           borderColor: "#000",
           fillerColor: '#269cdb',
           borderRadius:5,
           backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
           showDataShadow: false,//是否显示数据阴影 默认auto
           showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
           realtime:true, //是否实时更新
           filterMode: 'filter',
           },
           //下面这个属性是里面拖到
       {
           type: 'inside',
           show: true,
           xAxisIndex: [0],
           start: 0,//默认为1
           end: 100-1500/31,//默认为100
       },
    ],   

y轴

dataZoom: [//给x轴设置滚动条
           {
               start:0,//默认为0
               end: 100-1500/31,//默认为100
               type: 'slider',
               maxValueSpan:14,//窗口的大小，显示数据的条数的
               show: true,
               yAxisIndex: [0],
               handleSize: 0,//滑动条的 左右2个滑动条的大小
               height: '80%',//组件高度
               left: 650, //左边的距离
               right: 15,//右边的距离
               top: 50,//右边的距离
               borderColor: "rgba(43,48,67,.8)",
               fillerColor: '#33384b',
               backgroundColor: 'rgba(43,48,67,.8)',//两边未选中的滑动条区域的颜色
               showDataShadow: false,//是否显示数据阴影 默认auto
               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
               realtime:true, //是否实时更新
               filterMode: 'filter',
               yAxisIndex: [0,1],//控制的 y轴
               },
               //下面这个属性是里面拖到
           {
               type: 'inside',
               show: true,
               yAxisIndex: [0,1],
               start: 1,//默认为1
               end: 100-1500/31,//默认为100
           },
       ],

6.横向滚动

.max{
	overflow:hiddend: // 父元素溢出隐藏
	.both{
		overflow-x:auto; // 子元素自动
	}
}

7.判断是否为null,如果是返回 –

isNull(val) {
      return val == null ? '-' : val;
    },

8.加千分位符

$thousand(12476);

9.大于7用绿色,小于0用红色,默认是黑色

:class="{
   redFont: 0.09 * 100 < 0 ? true : false,
   greenFont: 0.09 * 100 >= 7 ? true : false,
 }"

10.组件引入
组件文件名为yuanEcharts.vue

 components: {
    Yuanecharts: () => import('./yuanEcharts'),
  },
  组件使用
  <yuanecharts />

11. vscode改双引号为单引号

第一步: 和package同级写一个文件.prettierrc.json
第二步: 在里面写
{
  "singleQuote": true, //引号
   "semi": false // 分号
}

12.排序 根据数组中对象的某一个值来排序

var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];
 
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')));//如果要执行倒序就将value1-value2改为value2-value1
　　//使用sort（）函数进行排序，没有参数时，以字符编码进行排序，有参数时，参数为比较函数（）闭包函数function sortNumber(a,b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"console.log(arr.sort())//Array ["1", "10", "1000", "25", "40", "5"]console.log(arr.sort(sortNumber))//Array ["1", "5", "10", "25", "40", "1000"]
如何根据参数不同，来确定是升序排列，还是降序排序呢？

/**数组根据数组对象中的某个属性值进行排序的方法
     * 使用例子：newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序
     * @param attr 排序的属性 如number属性
     * @param rev true表示升序排列，false降序排序
     * */
    sortBy: function(attr,rev){
        //第二个参数没有传递 默认升序排列
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }
         
        return function(a,b){
            a = a[attr];
            b = b[attr];
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    }
    13.vue 上滑下滑左滑右滑事件 添加一个指令(直接复制代码)
    1.定义一个监听touch指令，主要根据计算开始到结束滑动的位置计算X、Y轴相应的距离再计算角度来判断滑动的方向
directives:{
	//滑动指令
	touch:{
    bind: function (el, binding, vnode) {
      var touchType = binding.arg; //传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
      var timeOutEvent = 0;
      var direction = '';
      //滑动处理
      var startX, startY;

      //返回角度
      function GetSlideAngle(dx, dy) {
        return Math.atan2(dy, dx) * 180 / Math.PI;
      }

      //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
      function GetSlideDirection(startX, startY, endX, endY) {
        var dy = startY - endY;
        var dx = endX - startX;
        var result = 0;

        //如果滑动距离太短
        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return result;
        }

        var angle = GetSlideAngle(dx, dy);
        if (angle >= -45 && angle < 45) {
          result = 'swiperight';
        } else if (angle >= 45 && angle < 135) {
          result = 'swipeup';
        } else if (angle >= -135 && angle < -45) {
          result = 'swipedown';
        }
        else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
          result = 'swipeleft';
        }
        return result;
      }

      el.addEventListener('touchstart', function (ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;

        //判断长按
        timeOutEvent = setTimeout(() =>{
          timeOutEvent = 0 ;
          if(touchType === 'press'){
              binding.value()
          }
        } , 500);

      }, false);

      el.addEventListener('touchmove' , function (ev) {
        clearTimeout(timeOutEvent)
        timeOutEvent = 0;
      });

      el.addEventListener('touchend', function (ev) {
        var endX, endY;
        endX = ev.changedTouches[0].pageX;
        endY = ev.changedTouches[0].pageY;
        direction = GetSlideDirection(startX, startY, endX, endY);

        clearTimeout(timeOutEvent)

        switch (direction) {
          case 0:
            break;
          case 'swipeup':
            if(touchType === 'swipeup'){
                binding.value()
            }
            break;
          case 'swipedown':
            if(touchType === 'swipedown'){
                binding.value()
            }
            break;
          case 'swipeleft':
            if(touchType === 'swipeleft'){
                binding.value()
            }
            break;
          case 'swiperight':
            if(touchType === 'swiperight'){
                binding.value()
            }
            break;
          default:
        }
  		}, false);
    }
	}
}
2. 使用指令 在标签绑定指令和事件，并在methods定义事件。
<div v-touch:swipeleft="leftSlide" v-touch:swiperight="rightSlide">
 
</div>
methods(){
leftSlide() {
	console.log('左滑')
},
rightSlide() {
	console.log('右滑')
}
}

14.如果有了滑动事件怎么回到上一屏?
1.第一步在上添加ref=“swiper”.
就是这样:
2.第二步:在滑动的方法中加入this.$refs.swiper.prev(); (prev是回到上一屏,可以换成在这里插入代码片其他的,具体参考swiper官方api)

15.在工作中使用vue跳转我这一屏时第一次能刷新页面并且传给我参数,但是后面就不会刷新页面了,这样在watch监听中加一个监听路由就行

watch: {
	 '$route' (to, from) {
	 	 this.intadata(); // 这是我的方法
	}
 }