建议增加修改Ellipsis状态的方法

[mdxiaohu]

<div v-for="(item, index) in list">
    <div :key="index" @click=“clickFun(index)”>
    <vue-ellipsis ref="ellipsisRef" :visible-line="1" :text="item.name"></vue-ellipsis>
    </div>
</div>

需求：点击文字修改ellipsis参数状态，来控制是否显示隐藏
clickFun(index) {
let data = this.$refs.ellipsisRef[index]
data.ellipsis = !data.ellipsis
}
但是vue2中单向数据流直接修改值会报错，虽然也能成功
建议增加setEllipsis(state)方法，然后通过获取子组件，执行内部方法来控制组件是否显示隐藏~

目前解决还有个方案，就是我手动给数组里面加ellipsis属性，然后绑定值:ellipsis="item.ellipsis"，自行修改数组里面的这个属性值的状态也行~但是如果循环的是对象，可就没办法了。

当然自行加css也行，但是就失去了我用组件的意义~

我尝试将代码拉取到本地，跑起来后，有一些错误，错误信息显示，不能在子组件修改prop传入的值，建议将prop传入的参数，都在组件内部定义~

[ruofee]

我理解你是想实现以下的效果：文本超过一行进行缩略，点击文本时可以控制文本是否缩略。
你可以使用组件的 ellipsis 属性来实现这个功能（ellipsis 是个 prop，你可以通过传入它来控制是否缩略）。
具体实现代码如下：

<template>
  <div id="app">
    <div v-for="(item, i) in list" :key="i">
      <div @click="clickFun(i)">
        <vue-ellipsis :visible-line="1" :text="item.name" :ellipsis="ellipsisList[i]" />
      </div>
    </div>
  </div>
</template>

<script>
import { VueEllipsis } from 'vue-ellipsis-component'

export default {
  name: 'App',
  components: {
    VueEllipsis,
  },
  data() {
    return {
      ellipsisList: {
        0: true,
        1: true,
      },
      list: [
        {
          name: '这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本'
        },
        {
          name: '这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本'
        },
      ],
    }
  },
  methods: {
    clickFun(i) {
      this.ellipsisList[i] = !this.ellipsisList[i]
    }
  }
}
</script>

<style>
#app {
  width: 200px;
}
</style>

不知道这是否能满足你的要求

[mdxiaohu]

回复速度太快了，让我看看，我马上描述。

[mdxiaohu]

@ruofee 太强了，我刚才也想这样去实现来着，总感觉不是很优雅~不过这种也可以

[ruofee]

好的，那我把 issue 关闭了~