Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select选择器] 设置autoWidth属性, 下拉框option的宽度错误 #2533

Open
pylist opened this issue Jun 20, 2023 · 3 comments
Open
Assignees
Labels
💪🏻 enhancement New feature or request

Comments

@pylist
Copy link

pylist commented Jun 20, 2023

tdesign-vue 版本

1.4.4

重现链接

https://codesandbox.io/embed/tdesign-vue-demo-forked-v6msqm?fontsize=14&hidenavigation=1&theme=dark

重现步骤

No response

期望结果

下拉框的宽度跟select宽度一致

实际结果

image

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

@github-actions
Copy link
Contributor

👋 @pylist,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@uyarn uyarn added the 💪🏻 enhancement New feature or request label Jun 23, 2023
@uyarn uyarn self-assigned this Jun 23, 2023
@chaishi
Copy link
Collaborator

chaishi commented Jul 22, 2023

解决方案一:给下拉框设置一个最小宽度。

解决方案二:由于 Select 组件基于 SelectInput 组件开发,故而,SelectInput 组件的全部特性,Select 均支持。可以尝试下面的方式。
示例代码:https://stackblitz.com/edit/aubn3j?file=src%2Fdemo.vue
image

image

@chaishi
Copy link
Collaborator

chaishi commented Jul 22, 2023

后续组件代码里面,可以自动添加上这部分逻辑 @uyarn

<t-select
  label="属性:"
  v-model="value1"
  :options="options1"
  placeholder="请选择云解决方案"
  autoWidth
  :popupProps="{ overlayInnerStyle }"
/>
export default {
  methods: {
    overlayInnerStyle(triggerElement, popoverElement) {
      return {
        width: `${Math.max(
          triggerElement.offsetWidth,
          popoverElement.offsetWidth
        )}px`,
      };
    },
  },
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💪🏻 enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants