Justineo / vue-clamp

Clamping multiline text with ease.
https://vue-clamp.vercel.app
MIT License
697 stars 89 forks source link

getLines method may run wrong after compiled #46

Closed mosuzi closed 3 years ago

mosuzi commented 3 years ago

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

Steps to reproduce:

Use vue-clamp with content which makes this.$refs.content.getClientRects() return a list of length more than 1

Actual results:

The getLines method in source code returns correct result. But it returns wrong result after babel compiled.

Expected results:

Get correct number of lines so that to be able to calculate correctly

Suggestion:

Babel compiles the [...array] into [].concat(array).

The concat method creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array). It does not recurse into nested array arguments. more description

However this.$refs.content.getClientRects() returns a DomRectList(on Chrome) rather than a pure array. Then concat method views it as a non-array argument and [].concat(DomRectList) is going to be return [DomRectList] and its length is going to be 1 forever which is not our expected result.

Therefore, I suggest replacingspread syntax with simple for-loop in getLines method to make sure that the iterable object converts into array correctly.

Justineo commented 3 years ago

Are you running Babel in loose mode? It's probably unsafe in many cases.

mosuzi commented 3 years ago

I mean it is this project on the npm that has dist/vue-clamp.js file which contains the compiled getLines method. In that file, [...array] is compiled into [].concat(array) which makes this problem.

Justineo commented 3 years ago

I see, this should be fixed obviously. Thanks!