10月总结

1关于时钟的CSS动画

代码部分

animation: move 60s infinite steps(60);
transform-origin: right top;
@keyframes move {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

transform-origin是指旋转元素的基点，在animation中可以设置旋转一周需要的时间。

2关于导出数据的问题

如何导出全部数据以及导出筛选后的数据。
总数据是93条，但是表格内只展示10条，导出数据也只有10条。
点击导出数据按钮的时候，先用第一次接口请求到的93条再次请求接口，新建一张表格，不限制表格的展示数量，设置display:none属性。将第二次请求到的接口数据放入表格中。实现导出数据的效果。如果用户有

<Button style="margin-top: 12px;" type="primary" @click="ExportAllData">
        <Icon type="ios-share-outline"/>导出作业数据
</Button>
<i-table
      border
      style="display:none"
      :columns="downloadColumns"
      :data="downloadList"
      ref="commonAllTable"
></i-table>

方法部分

ExportAllData() {
      this.$refs.commonAllTable.exportCsv({
        filename: `学生作业数据`,
      });
    },
//请求部分
          organId: this.valueClass[0],
          groupId: this.valueClass[1],
          start: this.start,
          rows: this.count,  //接口每页返回条数采用用户搜索后的条数，达到导出筛选后数据的效果。
          startTime:
            this.dateTime.length == 0
              ? ""
              : new Date(this.dateTime[0]).format("yyyy-MM-dd"),
          endTime:
            this.dateTime.length == 0
              ? ""
              : new Date(this.dateTime[1]).format("yyyy-MM-dd"),
          keyword: this.checkStudent

3判断手机横竖屏的方法

在解决swiper横竖屏不适配的问题的时候发现的一个可以用的方法。
想过隐藏控件的方式来不让用户全屏播放，但是无法隐藏控件，试了大概10种隐藏控件的方法。
但是x5-video-player-type=”h5”支持全屏竖屏播放，这样视频的宽高不会变，退出全屏的时候也不会有样式错乱的问题。在iOS上隐藏播放器控件是生效的，也不能全屏播放，在安卓上有这个问题。
当时场景是swiper不支持横竖屏切换，样式错乱，在iOS上用户把方向锁定关闭之后可以横屏显示H5，而有的安卓不行，若是可以横竖屏的用户能用下面这个方法判断是横屏还是竖屏。当用户返回竖屏的时候初始化swiper就可以恢复样式。

var swiper1 = new Swiper('#swiper1');

当用户未开启屏幕方向锁定时有的机型支持H5横屏竖屏转动。

observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
mounted() {
   this.$nextTick(() => {
       window.addEventListener("resize", this.RenderResize, false);
    });
  },
methods:{
   RenderResize() {
      // 判断横竖屏
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width > height) {
        // alert("横屏");
        console.log("横屏");
      } else {
        console.log("竖屏");
      }
      // 做页面适配
      // 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
    },
}
 beforeDestroy() {
  // 移除监听
     window.removeEventListener("resize", this.renderResize, false);
   },

隐藏H5播放器控件的方法

对x5-video无效

 video::-webkit-media-controls {
   display: none !important;
   z-index: -1;
 }

提示文本

import cisTip from "@/components/cisTip.vue";

组件中使用

renderHeader: (h, params) => {
            return h(cisTip, {
              props: {
                text: `配音总平均分`,
                tip: `配音总平均分统计时间为每日凌晨0点`,
                placement: "top",
                iconshow: true,
                iconright: true
              }
            });
          }