vue移动端的坑

Echarts水球图在ios上特别卡，使用纯css3组件代替

水球组件代码如下：

<template>
  <div class="battery">
    <div class="cover" :style="{ '--progress': progress + '%' }"></div>
    <div class="num">{{ parseFloat(text).toFixed(2) + '%' }}</div>
  </div>
</template>
<script>
export default {
  name: 'Water',
  props: {
    progress: {
      // 水球水位进度
      type: Number,
      default: 0
    },
    text: {
      // 水球显示百分比
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="scss">
.num {
  z-index: 2;
  color: #fff;
  font-size: 24px;
}
.battery {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 87.5px;
  height: 87.5px;
  border-radius: 50%;
}
.battery::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #313741;
  background: linear-gradient(135deg, #04bdf8 30.52%, #01e7af 100%, #01e4b4 100%);
  border-radius: 50%;
  top: 0;
}
.cover {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  line-height: 125px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 1;
  overflow: hidden;
}
.cover::before,
.cover::after {
  content: '';
  position: absolute;
  left: -50%;
  width: 200px;
  height: 200px;
}
.cover::before {
  background-color: #313741;
  opacity: 0.8;
  border-radius: 40% 30%;
  animation: rotate1 10s linear infinite;
}
.cover::after {
  background-color: #313741;
  opacity: 0.7;
  border-radius: 42% 40%;
  animation: rotate2 10s linear infinite;
}
@keyframes rotate1 {
  0% {
    transform: rotate(0deg);
    bottom: var(--progress); /*控制进度*/
  }
  100% {
    transform: rotate(360deg);
    /* bottom: 20%; */
    bottom: var(--progress);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(45deg);
    bottom: var(--progress);
  }
  100% {
    transform: rotate(360deg);
    bottom: var(--progress);
  }
}
</style>

父组件调用代码

<water
    :key="datekey"
    v-if="isLoaded && rate !== null"
    :progress="
    Number(rate ) > 100 ? 100 : Number(rate )"
    :text="Number(rate)"
/>
<script>
export default {
  name: 'DataOverview',
  components: { Water },
  data() {
    return {
        rate:null,
        isLoaded: false,
        datekey: Date.now()
    }
  },
  mounted(){
    this.getSchedule()
  },
  methods:{
    getSchedule() {
      getSchedule(this.params).then(res => {
        this.rate= res.data.rate
        this.isLoaded = true
        this.datekey = Date.now()
      })
    },
  }

 注意：datekey不能省略，否则样式不会更新

vant日历，最小到最大日期范围过大时，在ios上初始化会不显示，解决办法，给日历组件一个高

<template>
  <div :class="theme">
    <van-calendar
      v-model="show"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="currentDate"
      color="#1890FF"
      @confirm="confirm"
      @close="cancel"
      //关键代码
      :style="{ height: '500px' }"
      :show-confirm="false"
    />
  </div>
</template>

Echarts折线图来回切换数据导致线错乱

myChart.clear();
myChart.setOption(option);
myChart.resize();

video标签在ios浏览器上自动全屏播放，加入playsinline属性解决，完整代码如下

<video :src="path" loop autoplay muted :playsinline="true"></video>