Button children 变化引起 rerender 后会导致 loading 的 svg 动画冻结

[yoyo837]

  <quark-button type="primary" loading="true">
    按钮
  </quark-button>

再包一层custom Element的话, loading的icon转圈圈动画约1秒后不转了, macOS和iOS的Safari复现;

我先挂个issue, 有空我再来研究一下, 或者有兴趣的同学顺路找找问题.

[yoyo837]

https://user-images.githubusercontent.com/6134547/227146633-c81dd1c7-1f55-4e59-a437-8239c8663d7b.mov

视频中三个按钮, 看后面两个转圈圈的, 第一个转圈圈的是直接 quark-button的, 第二个是再次包装的.

[nieyt]

收到问题，我们尽快排查下

[nieyt]

  <quark-button type="primary" loading="true">
    按钮
  </quark-button>

再包一层custom Element的话, loading的icon转圈圈动画约1秒后不转了, macOS和iOS的Safari复现;

我先挂个issue, 有空我再来研究一下, 或者有兴趣的同学顺路找找问题.

是包在任意自定义元素内都这样吗？我包在quark-cell里，试了macOS的safari，没有复现

[nieyt]

视频中三个按钮, 看后面两个转圈圈的, 第一个转圈圈的是直接 quark-button的, 第二个是再次包装的.

可以提供一个最小demo吗？我这边mac和ios的safari都试过了，slot包裹或者直接写在一个自定义元素的代码里，都没复现

[yoyo837]

我把这个链接放出来, 稍等

[yoyo837]

https://dev-portal.ydmap.cn/srv100436/dev-52.html 这里

[yoyo837]

使用 vue-cli-service build --no-module --dest dist --target wc-async --name pt './src/**/*.vue'编译得来.

docs here, 打算适时切换到 quarkc.

我通过AST生成每个组件的配置和参数, 提供页面自定义页面逻辑使用, “装修页面”.

源码:

<template>
  <div class="abc">
    <pt-ui-button v-if="showBtn">{{ camelCaseText }}</pt-ui-button>
    <slot>{{ ts }}</slot>
    <slot name="abc"></slot>
    <quark-button
      type="primary"
      loading
      @click="handleChange"
    >
      {{ ts }}
    </quark-button>
    abc
  </div>
</template>

<script>
import { defineComponent } from '@/mixins/define';

export default defineComponent({
  define: {
    name: '我是组件名称111',
    descr: '我是组件描述balbalbalbalbal111',
    block: true,
  },
  props: {
    camelCaseText: {
      type: String,
      label: '驼峰属性',
      descr: '驼峰属性测试',
    },
    abc: {
      type: String,
      label: 'abc属性',
    },
    efg: {
      type: String,
      label: 'efg属性',
    },
    lll: {
      type: String,
      default: '333',
      descr: '啦啦啦啦',
      required: true,
      label: 'lll属性',
    },
    ccc: {
      type: String,
      descr: 'dfsf',
      label: 'ccc属性',
    },
  },
  data() {
    return {
      ts: 0,
      showBtn: true,
    };
  },
  mounted() {
    this.tick();
  },
  beforeDestroy() {
    console.log('abc beforeDestroy');
  },
  destroyed() {
    console.log('abc destroyed');
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    tick() {
      this.ts = Date.now();
      this.timer = setTimeout(this.tick, 1000 * 1);
    },
    handleChange() {
      this.showBtn = !this.showBtn;
    },
  },
});
</script>

<style lang="less">
:host {
  display: block;
}

.abc {
  color: red;
}
</style>

[yoyo837]

这个按钮

[yoyo837]

看还需要啥, 我都尽量提供.

[nieyt]

看还需要啥, 我都尽量提供.

你的ios系统版本号是什么

[yoyo837]

目前是16.4 , 我一般情况下始终保持最新的, macOS也是最新, 你的safari能看到冻结效果吗?

[yoyo837]

页面被我不小心动了一下, 我重新推一下html

[nieyt]

目前是16.4 , 我一般情况下始终保持最新的, macOS也是最新, 你的safari能看到冻结效果吗?

我正在更新系统，同事16.3试了有冻结，我16.0没有

[yoyo837]

我也找找认识的朋友低于 16.3 的看看

[yoyo837]

不对, 我可以macOS开不同版本的模拟器, 我试试

[yoyo837]

15.5 的也会

[nieyt]

应该跟定时器刷新了页面有关，去掉就没问题了，在想办法解决

[yoyo837]

应该跟定时器刷新了页面有关，去掉就没问题了，在想办法解决

按钮上的时间戳 timer?

意思是, 只要触发 quark-button rerender, svg就会重置, 快速 rerender 看起来像卡住对吧?

[nieyt]

应该跟定时器刷新了页面有关，去掉就没问题了，在想办法解决

按钮上的时间戳 timer?

意思是, 其他字段引起的 rerender 也会这样对吧?

又试了下，其他字段rerender不会，只有按钮上渲染的内容变化才会

[nieyt]

已修复，链接。自定义元素slot改变导致的css animation rotate冻结，已改为用js动画。