Vue如何基于$ref为CSS截断的文本容器动态追加按钮或组件

核心问题说明 #

你遇到的原生DOM操作痛点本质是：脱离Vue响应式系统手动创建的DOM节点，无法直接使用v-on:click这类模板语法糖，手动修改截断样式也容易出现状态和视图不同步的问题。以下提供三种可落地的实现路径。

方案1：模板响应式渲染（推荐） #

完全贴合Vue数据驱动的设计逻辑，不需要手动挂载组件，状态维护成本最低：

1. 调整模板结构，替换写死的ref绑定和静态按钮逻辑：

<div v-for="(post, index) in posts" :key="post.id">
  <div 
    class="postBody" 
    :class="{ 'is-clamped': !post.expanded }"
    :ref="collectPostBodyRef"
  >
    {{ post.body }}
  </div>
  <!-- 条件渲染按钮，无需手动DOM操作 -->
  <AwesomeButtonComponent
    v-if="post.needReadMore"
    @click="togglePostExpand(index)"
  >
    Read More
  </AwesomeButtonComponent>
</div>

2. 配套脚本逻辑：
   • 初始化时给每个post补充两个状态字段：expanded（是否展开）、needReadMore（是否需要显示Read More）
   • 用动态收集器代替数组类型的静态ref，解决动态列表下ref索引错位的问题

export default {
  data() {
    return {
      posts: [],
      postBodyNodes: []
    }
  },
  methods: {
    // 动态收集正文DOM节点
    collectPostBodyRef(el) {
      if (el) this.postBodyNodes.push(el)
    },
    // 保留原有溢出判断逻辑
    isOverflown(el) {
      return el.scrollHeight > el.clientHeight
    },
    // 切换展开/收起状态
    togglePostExpand(postIndex) {
      this.posts[postIndex].expanded = !this.posts[postIndex].expanded
    }
  },
  created() {
    // 原有posts异步获取逻辑
    fetchPostList().then(postList => {
      this.posts = postList.map(item => ({
        ...item,
        expanded: false,
        needReadMore: false
      }))
      // 等待DOM渲染完成后再判断节点尺寸
      this.$nextTick(() => {
        this.postBodyNodes.forEach((node, index) => {
          if (this.isOverflown(node)) {
            this.posts[index].needReadMore = true
          }
        })
      })
    })
  }
}

3. 配套CSS调整，将截断逻辑抽为独立类：

.is-clamped {
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

方案2：JS动态挂载Vue组件 #

如果确实需要在运行时通过ref定位挂载AwesomeButtonComponent，可借助Vue的实例挂载API实现，不需要手动操作DOM创建按钮：

1. 导入需要挂载的组件：

import AwesomeButtonComponent from '@/components/AwesomeButtonComponent.vue'

2. 在posts异步加载完成的逻辑里，通过ref定位节点后动态创建组件实例：

// 原有posts请求完成的then回调
.then(() => {
  this.$nextTick(() => {
    this.$refs.posts.forEach((postRef, index) => {
      if (this.isOverflown(postRef)) {
        // 创建独立的组件实例
        const readMoreBtn = new Vue({
          render: h => h(AwesomeButtonComponent, {
            props: {
              // 传入组件需要的自定义参数
              type: 'primary'
            },
            on: {
              // 绑定点击事件，等价于模板中的@click
              click: () => {
                // 精准移除对应正文的截断类
                postRef.classList.remove('is-clamped')
              }
            }
          })
        }).$mount()
        // 将组件生成的真实DOM插入到正文的父节点下
        postRef.parentElement.appendChild(readMoreBtn.$el)

        // 组件销毁时记得清理实例，避免内存泄漏
        this.$on('beforeDestroy', () => {
          readMoreBtn.$destroy()
        })
      }
    })
  })
})

方案3：原生DOM创建按钮 #

如果不需要复用组件，直接创建原生按钮即可，无需依赖Vue的指令系统：

// 原有posts请求完成的then回调
.then(() => {
  this.$nextTick(() => {
    this.$refs.announcementBody.forEach((bodyEl, index) => {
      if (this.isOverflown(bodyEl)) {
        const btn = document.createElement('button')
        btn.innerText = 'Click Me'
        // 原生绑定事件，不需要v-on指令
        btn.addEventListener('click', () => {
          // 直接操作对应元素的样式，移除截断规则
          bodyEl.classList.remove('is-clamped')
          // 如需调用Vue实例上的方法，直接通过this上下文触发即可
          this.handlePostExpand(index)
        })
        bodyEl.parentElement.appendChild(btn)
      }
    })
  })
})

补充说明：v-on:click本质是Vue模板提供的语法糖，最终编译后依然会调用原生的addEventListener绑定事件，原生创建的元素直接用原生API绑定事件完全可以实现同等效果，不需要额外兼容Vue指令。

内容的提问来源于stack exchange，提问作者Riza Khan