feat(components): [carousel] height is adaptive when height is auto

[qq282126990]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

[pull-request-triage]

👋 @qq282126990, thank you for contributing element-plus.

• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

Hello @qq282126990, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=11392
Please comment the example via this playground if needed.

[qq282126990]

example url

https://element-plus.run/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgdmVyc2lvbiBhcyB2dWVWZXJzaW9uIH0gZnJvbSAndnVlJ1xuaW1wb3J0IHsgdmVyc2lvbiBhcyBFcFZlcnNpb24gfSBmcm9tICdlbGVtZW50LXBsdXMnXG5pbXBvcnQgeyBFbGVtZW50UGx1cyB9IGZyb20gJ0BlbGVtZW50LXBsdXMvaWNvbnMtdnVlJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGVsLWNhcm91c2VsIGhlaWdodD1cImF1dG9cIiBhdXRvcGxheT5cbiAgICA8ZWwtY2Fyb3VzZWwtaXRlbSBzdHlsZT1cImhlaWdodDogMTAwcHhcIj5cbiAgICAgIDxoMyBjbGFzcz1cInNtYWxsIGp1c3RpZnktY2VudGVyXCIgdGV4dD1cIjJ4bFwiPmhlaWdodCAxMDBweDwvaDM+XG4gICAgPC9lbC1jYXJvdXNlbC1pdGVtPlxuICAgIDxlbC1jYXJvdXNlbC1pdGVtIHN0eWxlPVwiaGVpZ2h0OiAyMDBweFwiPlxuICAgICAgPGgzIGNsYXNzPVwic21hbGwganVzdGlmeS1jZW50ZXJcIiB0ZXh0PVwiMnhsXCI+aGVpZ2h0IDIwMHB4PC9oMz5cbiAgICA8L2VsLWNhcm91c2VsLWl0ZW0+XG4gICAgPGVsLWNhcm91c2VsLWl0ZW0gc3R5bGU9XCJoZWlnaHQ6IDMwMHB4XCI+XG4gICAgICA8aDMgY2xhc3M9XCJzbWFsbCBqdXN0aWZ5LWNlbnRlclwiIHRleHQ9XCIyeGxcIj5oZWlnaHQgMzAwcHg8L2gzPlxuICAgIDwvZWwtY2Fyb3VzZWwtaXRlbT5cbiAgPC9lbC1jYXJvdXNlbD5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBzY29wZWQ+XG4uY2Fyb3VzZWwtaXRlbSB7XG4gIGNvbG9yOiAjNDc1NjY5O1xuICBvcGFjaXR5OiAwLjc1O1xuICBtYXJnaW46IDA7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5lbC1jYXJvdXNlbF9faXRlbSBoMyB7XG4gIGNvbG9yOiAjNDc1NjY5O1xuICBvcGFjaXR5OiAwLjc1O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDA7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLmVsLWNhcm91c2VsX19pdGVtOm50aC1jaGlsZCgybikge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjOTlhOWJmO1xufVxuLmVsLWNhcm91c2VsX19pdGVtOm50aC1jaGlsZCgybiArIDEpIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2QzZGNlNjtcbn1cbjwvc3R5bGU+IiwiUGxheWdyb3VuZE1haW4udnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBBcHAgZnJvbSAnLi9BcHAudnVlJ1xuaW1wb3J0IHsgc2V0dXBFbGVtZW50UGx1cyB9IGZyb20gJy4vZWxlbWVudC1wbHVzLmpzJ1xuc2V0dXBFbGVtZW50UGx1cygpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8QXBwIC8+XG48L3RlbXBsYXRlPlxuIiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwiZWxlbWVudC1wbHVzXCI6IFwiaHR0cHM6Ly9wcmV2aWV3LTExMzkyLWVsZW1lbnQtcGx1cy5zdXJnZS5zaC9idW5kbGUvaW5kZXguZnVsbC5taW4ubWpzXCIsXG4gICAgXCJlbGVtZW50LXBsdXMvXCI6IFwidW5zdXBwb3J0ZWRcIlxuICB9XG59IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AdnVlL3J1bnRpbWUtZG9tQGxhdGVzdC9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJAdnVlL3NoYXJlZFwiOiBcImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQHZ1ZS9zaGFyZWRAbGF0ZXN0L2Rpc3Qvc2hhcmVkLmVzbS1idW5kbGVyLmpzXCIsXG4gICAgXCJlbGVtZW50LXBsdXNcIjogXCJodHRwczovL3ByZXZpZXctMTEzOTItZWxlbWVudC1wbHVzLnN1cmdlLnNoL2J1bmRsZS9pbmRleC5mdWxsLm1pbi5tanNcIixcbiAgICBcImVsZW1lbnQtcGx1cy9cIjogXCJ1bnN1cHBvcnRlZFwiLFxuICAgIFwiQGVsZW1lbnQtcGx1cy9pY29ucy12dWVcIjogXCJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0BlbGVtZW50LXBsdXMvaWNvbnMtdnVlQDIvZGlzdC9pbmRleC5taW4uanNcIlxuICB9LFxuICBcInNjb3Blc1wiOiB7fVxufSIsImVsZW1lbnQtcGx1cy5qcyI6ImltcG9ydCB7IGdldEN1cnJlbnRJbnN0YW5jZSB9IGZyb20gJ3Z1ZSdcbmltcG9ydCBFbGVtZW50UGx1cyBmcm9tICdlbGVtZW50LXBsdXMnXG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuYXdhaXQgbG9hZFN0eWxlKClcblxuZXhwb3J0IGZ1bmN0aW9uIHNldHVwRWxlbWVudFBsdXMoKSB7XG4gIGlmIChpbnN0YWxsZWQpIHJldHVyblxuICBjb25zdCBpbnN0YW5jZSA9IGdldEN1cnJlbnRJbnN0YW5jZSgpXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZShFbGVtZW50UGx1cylcbiAgaW5zdGFsbGVkID0gdHJ1ZVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgIGxpbmsuaHJlZiA9ICdodHRwczovL3ByZXZpZXctMTEzOTItZWxlbWVudC1wbHVzLnN1cmdlLnNoL2J1bmRsZS9pbmRleC5jc3MnXG4gICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICBsaW5rLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKGxpbmspXG4gIH0pXG59IiwiX28iOnsic2hvd0hpZGRlbiI6dHJ1ZSwic3R5bGVTb3VyY2UiOiJodHRwczovL3ByZXZpZXctMTEzOTItZWxlbWVudC1wbHVzLnN1cmdlLnNoL2J1bmRsZS9pbmRleC5jc3MifX0=

[jw-foss]

I think the height can be set to auto by default, and the user needs to manually set it when the user needs to set the height

Just so you know that there were users who use this component and the changes you made might change the default behavior for those users per @btea's question above. Marking this behind a flag would be more flexible.

[qq282126990]

ok, I feel that I need to add a new attribute named auto-height to delete and modify height to 'auto'

[tolking]

I don't think it is necessary to add new attributes, the default value of height is still ''. This PR has no breaking change and will not affect previous users

[qq282126990]

我认为没有必要添加新的属性，默认值height仍然是''。本次 PR 没有 BC，不会影响之前的用户

So should I keep my original judgment?

[qq282126990]

@jw-foss Using the test case, I don’t know why the height of the element cannot be obtained

[qq282126990]

In addition to avoid the first rendering height of 0 should need to add a nextTick

[qq282126990]

[qq282126990]

[qq282126990]

@qq282126990感谢您贡献代码 LGTM，我留下了一些评论供您考虑。我想请您针对您的更改添加一个测试用例。如果您有任何问题，请告诉我👍

hello, Here is the test case I wrote

One problem is that running the test case carousel-item cannot get offsetHeight

@jw-foss

[Flourad]

这个特性可用了么？

[btea]

hello, Here is the test case I wrote

One problem is that running the test case carousel-item cannot get offsetHeight

This seems to be a jsdom bug, refer here.

[qq282126990]

ok ,i see

[btea]

@qq282126990 There seems to be a conflict in the code, can you fix it?

[qq282126990]

ok

[qq282126990]

Hello, there may be problems with the previous branch, I recreated a new branch, please check the pull request

#12388

@btea