Avatar bug #780
Avatar bug #780
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tusimple/naive-ui/FKercUHFqL8bdyUN3bnraGUKn8VL |
Codecov Report
@@ Coverage Diff @@
## main #780 +/- ##
==========================================
- Coverage 40.25% 40.13% -0.12%
==========================================
Files 507 507
Lines 12393 12395 +2
Branches 3479 3480 +1
==========================================
- Hits 4989 4975 -14
- Misses 6494 6503 +9
- Partials 910 917 +7
Continue to review full report at Codecov.
|
src/avatar/src/Avatar.tsx
Outdated
| // FIX: use v-show elWidth is 0, need to recompute elWidth while update | ||
| if (elWidth === 0) { | ||
| memoedTextHtml = null | ||
| return | ||
| } |
There was a problem hiding this comment.
这里会不会有其他的 elWidth === 0 的时候？想办法写的更安全一点吧
| textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})` | ||
| // FIX: use v-show elWidth is 0, need to recompute elWidth while update | ||
| // reference: https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom | ||
| void nextTick(() => { |
There was a problem hiding this comment.
用nextTick是针对这种情况
<div v-show="show">
<n-avatar>Name</n-avatar>
</div>
There was a problem hiding this comment.
这样似乎并不能解决
<div v-show="show">
<n-avatar>Name</n-avatar>
</div>
造成的样式问题
There was a problem hiding this comment.
我这样测试的，样式不能正常加载
<template>
<div>
<button @click='toggle'>toggle</button>
<div v-show="isShow">
<n-avatar>Name</n-avatar>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const isShow = ref(false)
const toggle = () => {
isShow.value = !isShow.value
}
return {
value: ref('Oasis111'),
toggle,
isShow
}
}
})
</script>
There was a problem hiding this comment.
你是通过codesandbox测试的吗？
There was a problem hiding this comment.
确实无法处理这种静态的节点，强行做的话会比较麻烦 @07akioni
<div v-show="show">
<n-avatar>Name</n-avatar>
</div>
|
我来解决吧 |
|
修了，用 ResizeObserver |
closes #779