opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.65k stars 264 forks source link

✨ [Feature]: [Select] 当配置 icon 时,希望输入框中的选中项也带上对应的 icon #1875

Open kagol opened 2 months ago

kagol commented 2 months ago

What problem does this feature solve

现状是当我配置 icon 时,输入框中未能显示选中项,这不符合我的预期。

可复现demo:

https://opentiny.design/vue-playground?mode=pc&theme=smb#3.17|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1widnVlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vdnVlLzMuNC4yNy9maWxlcy9kaXN0L3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXCJlY2hhcnRzXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vZWNoYXJ0cy81LjQuMS9maWxlcy9kaXN0L2VjaGFydHMuZXNtLmpzXCIsXCJAdnVlL2NvbXBpbGVyLXNmY1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0B2dWUvY29tcGlsZXItc2ZjLzMuNC4yNy9maWxlcy9kaXN0L2NvbXBpbGVyLXNmYy5lc20tYnJvd3Nlci5qc1wiLFwiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjE3L2ZpbGVzL2Rpc3QzL3RpbnktdnVlLXBjLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1pY29uXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMTcvZmlsZXMvZGlzdDMvdGlueS12dWUtaWNvbi5tanNcIixcIkBvcGVudGlueS92dWUtbG9jYWxlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMTcvZmlsZXMvZGlzdDMvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4xNy9maWxlcy9kaXN0My90aW55LXZ1ZS1jb21tb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLXRoZW1lL1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtdGhlbWUvMy4xNy9maWxlcy9cIixcIkBvcGVudGlueS92dWUtdGhlbWUtbW9iaWxlL1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtdGhlbWUtbW9iaWxlLzMuMTcvZmlsZXMvXCIsXCJAb3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1yZW5kZXJsZXNzLzMuMTcvZmlsZXMvXCIsXCJzb3J0YWJsZWpzXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vc29ydGFibGVqcy8xLjE1LjAvZmlsZXMvbW9kdWxhci9zb3J0YWJsZS5lc20uanNcIixcIkBvcGVudGlueS92dWUtZGVzaWduLXNtYlwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtZGVzaWduLXNtYi8zLjE3L2ZpbGVzL2luZGV4LmpzXCJ9fSIsInRzY29uZmlnLmpzb24iOiJ7XHJcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXHJcbiAgICBcImNoZWNrSnNcIjogdHJ1ZSxcclxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcclxuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXHJcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxyXG4gICAgXCJhbGxvd0ltcG9ydGluZ1RzRXh0ZW5zaW9uc1wiOiB0cnVlXHJcbiAgfSxcclxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XHJcbiAgICBcInRhcmdldFwiOiAzLjNcclxuICB9XHJcbn1cclxuIiwiYmFzaWMtdXNhZ2UudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2PlxuICAgIDxkaXY+6YCJ5Lit55qE5YC85Li677yaIHt7IHZhbHVlIH19PC9kaXY+XG4gICAgPGJyIC8+XG4gICAgPGRpdj7lnLrmma8x77ya5qCH562+5byPPC9kaXY+XG4gICAgPGJyIC8+XG4gICAgPHRpbnktc2VsZWN0IHYtbW9kZWw9XCJ2YWx1ZVwiPlxuICAgICAgPHRpbnktb3B0aW9uIHYtZm9yPVwiaXRlbSBpbiBvcHRpb25zXCIgOmtleT1cIml0ZW0udmFsdWVcIiA6bGFiZWw9XCJpdGVtLmxhYmVsXCIgOnZhbHVlPVwiaXRlbS52YWx1ZVwiIDppY29uPVwiaXRlbS5pY29uXCI+XG4gICAgICA8L3Rpbnktb3B0aW9uPlxuICAgIDwvdGlueS1zZWxlY3Q+XG4gICAgPGJyIC8+XG4gICAgPGJyIC8+XG4gICAgPGRpdj7lnLrmma8y77ya6YWN572u5byPPC9kaXY+XG4gICAgPGJyIC8+XG4gICAgPHRpbnktc2VsZWN0IHYtbW9kZWw9XCJ2YWx1ZVwiIDpvcHRpb25zPVwib3B0aW9uc1wiPiA8L3Rpbnktc2VsZWN0PlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5pbXBvcnQgeyBTZWxlY3QsIE9wdGlvbiB9IGZyb20gJ0BvcGVudGlueS92dWUnXG5pbXBvcnQgeyBpY29uRmlsZSwgaWNvbkF0dGFjaG1lbnQsIGljb25QdWJsaXNoLCBpY29uU21pbGUgfSBmcm9tICdAb3BlbnRpbnkvdnVlLWljb24nXG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgY29tcG9uZW50czoge1xuICAgIFRpbnlTZWxlY3Q6IFNlbGVjdCxcbiAgICBUaW55T3B0aW9uOiBPcHRpb25cbiAgfSxcbiAgZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgb3B0aW9uczogW1xuICAgICAgICB7IHZhbHVlOiAn6YCJ6aG5MScsIGxhYmVsOiAn5YyX5LqsJywgaWNvbjogaWNvbkZpbGUoKSB9LFxuICAgICAgICB7IHZhbHVlOiAn6YCJ6aG5MicsIGxhYmVsOiAn5LiK5rW3JywgaWNvbjogaWNvbkF0dGFjaG1lbnQoKSB9LFxuICAgICAgICB7IHZhbHVlOiAn6YCJ6aG5MycsIGxhYmVsOiAn5bm/5beeJywgaWNvbjogaWNvblB1Ymxpc2goKSB9LFxuICAgICAgICB7IHZhbHVlOiAn6YCJ6aG5NCcsIGxhYmVsOiAn5rex5ZyzJywgaWNvbjogaWNvblNtaWxlKCkgfVxuICAgICAgXSxcbiAgICAgIHZhbHVlOiAnJ1xuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjxzdHlsZSBsYW5nPVwibGVzc1wiIHNjb3BlZD5cbi50aW55LXNlbGVjdCB7XG4gIHdpZHRoOiAyODBweDtcbn1cbjwvc3R5bGU+XG4iLCJfbyI6e319
image

What does the proposed API look like

我看 Select 目前已有 label 的插槽,但是没有在 api 表格文档中体现。 而且该插槽存在以下问题:

  1. 目前只支持多选场景(配置了 multiple 才生效,参考 demo 锚点标签)
  2. 只暴露了 value、label,没有暴露icon等其他属性

期望 label 插槽支持单选场景、并且暴露所有用户配置的属性,包括 icon 等。

大致用法如下:

const options = ref([
  { value: '选项1', label: '北京', icon: iconFile() },
  { value: '选项2', label: '上海', icon: iconAttachment() },
  { value: '选项3', label: '广州', icon: iconPublish() },
  { value: '选项4', label: '深圳', icon: iconSmile() }
])

<tiny-select v-model="selectValue">
  <template #label="{ item }">
    <component :is="item.icon" />
    <span>{{ item.label }}</span>
  </template>
  <tiny-option v-for="mail in mailList" :value="mail.value" :label="mail.label" :icon="mail.icon"></tiny-option>
</tiny-select>

What is your project name

邮箱应用

Issues-translate-bot commented 2 months ago

Bot detected the issue body's language is not English, translate it automatically.


Title: ✨ [Feature]: [Select] When configuring the icon, it is hoped that the selected item in the input box will also have the corresponding icon