[vue3组件库]0到1参与7k Star大型开源项目成为贡献者🎃

2022-03-10 作者: 速冻鱼

大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲
欢迎小伙伴们加我微信：拉你进群，一起讨论，期待与大家共同成长🥂

阅读本文🦀

1.您将了解到发现了出现的bug我们可以怎么做

2.您将了解到如何快速定位问题所在

3.您将了解到如何参与开源项目并提交成为

NaiveUI仓库地址：🎄

如果你正在学习，那么我建议你可以关注一下，一个很棒的^_^，文中开源项目便指的它🐬。

前言🌵

根据需求，需要编写一个基于vue3+TS的聊天室web应用，其中发现开源项目bug并提交pr成功合并🕶

发现Bug🐳

起因🌾

因为在研究的项目，我就想着去上找找有没有的组件库，想到之前尤大🐱推荐过的，🌟已经了，于是我便将项目下载下来玩了一下。

经过🍂

当时我正在玩的组件，这个组件原本是支持输入文字的☃

但是我发现当使用和时它的表现居然不同，情况下输入文字后，组件的文字，于是我在里面实验的一下，确定了这个确实存在🔥，于是便有了后文。

结果🌵

由于不知道是不是自己写的代码问题，怀着揣测的心情想去搞明白究竟怎么回事🐷，我便去上面搜索了一番，但是并没有找到有小伙伴提出类似问题，于是我便提了一个🌍

定位Bug🐘

step1🍏

我提后并没有不管它，而是想着怎么去解决它，那么问题来了，造成这个的原因是什么呢❓，所以我将项目下载到了我的本地，一波，调试了半天对问题定位一知半解，有很多疑问，这时候怎么办呢❓

step2🍎

如何快速了解这个项目某个的代码呢❓第一肯定是自己看，第二就是找直接问呐，哈哈哈哈😂，于是我去找作者寻问了，怎么找到作者呢❓在他们官方文档一般有个

通过这个你就可以开始你的沙雕提问了🤡hhhh～～～

解决Bug🐿

step1🌴

现在我们已经知道了问题所在，那就要开始疯狂转动你的小脑袋🌝去思考怎么去解决这个呢，我们就需要在本地不停的调式，遇到问题记得，爱问才是好孩纸😜，当然你会遇到各种问题，不要怕，一个个解决，不会的就问，就查资料，，以下就是我解决这个的

//、、、
export default defineComponent({
  name: 'Avatar',
  props: avatarProps,
  setup (props) {
    const { mergedClsPrefixRef } = useConfig(props)

    let memoedTextHtml: string | null = null
    const textRef = ref(null)
    const selfRef = ref(null)
    const fitTextTransform = (): void => {
      const { value: textEl } = textRef
      //解决BUG的核心代码在这里^_^
      if (textEl) {
        if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) {
          memoedTextHtml = textEl.innerHTML
          const { value: selfEl } = selfRef
          if (selfEl) {
            const { offsetWidth: elWidth, offsetHeight: elHeight } = selfEl
            const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl
            const radix = 0.9
            const ratio = Math.min(
              (elWidth / textWidth) * radix,
              (elHeight / textHeight) * radix,
              1
            )
            textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`
          }
        }
      }
    }
复制代码

step2🌱

代码我们自己修改好了，并不能代表着这个就解决了，我们要提交👨‍，让开源作者👨‍💻你的代码是否合格，是否能够合并进他们的项目中，这个过程也是一个很宝贵的过程，你能和进行交流🙎‍♂️，能学习到很多。当然不是一遍就能通过的，你还得自己反复的，当然作者也会帮助你，给你提出他的。当然这个过程会遇到，你要做的就是慢慢改。

看看我提交了多少次😢