feat(multi-select): 增加下拉选择器multi-select组件

src/index.less

@@ -46,3 +46,5 @@
 @import './tall-storage/index.less';
 @import './time-line/index.less';
 @import './upload-list/index.less';
+@import './multi-select/index.less';
+@import './wheel/index.less';

src/multi-select/index.js

@@ -0,0 +1,12 @@
+export default {
+  "tiny-mobile-multi-select-bg": "#fff",
+  "tiny-mobile-multi-select-header-bg": "#fff",
+  "tiny-mobile-multi-select-header-item-height": "28px",
+  "tiny-mobile-multi-select-header-item-bg": "rgba(0, 0, 0, 0.03)",
+  "tiny-mobile-multi-select-header-item-margin-top": "10px",
+  "tiny-mobile-multi-select-header-label-text-color": "#595959",
+  "tiny-mobile-multi-select-header-label-font-size": "12px",
+  "tiny-mobile-multi-select-svg-fill-color": "#c2c2c2",
+  "tiny-mobile-multi-select-content-height": "226px",
+  "tiny-mobile-multi-select-footer-width": "164px",
+};

src/multi-select/index.less

@@ -0,0 +1,147 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import '../mixins/hairline.less';
+@import './vars.less';
+
+@multi-select-prefix-cls: ~'@{css-prefix}mobile-multi-select';
+
+.@{multi-select-prefix-cls} {
+  background: var(--ti-mobile-multi-select-bg, #fff);
+  width: 100%;
+  border-radius: 0px 0px 16px 16px;
+
+  &__header {
+    display: flex;
+    padding: 0 16px;
+    flex-direction: row;
+    justify-content: center;
+
+    &__flexCenter {
+      height: 48px;
+      width: 100%;
+      display: flex;
+      flex: 1;
+      flex-direction: row;
+      justify-content: space-between;
+      background: var(--ti-mobile-multi-select-header-bg, #fff);
+      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.06) inset;
+    }
+
+    &__calc {
+      position: absolute;
+      opacity: 0;
+      z-index: -999;
+      display: flex;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      pointer-events: none;
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--ti-mobile-multi-select-header-item-height, 28px);
+      background: var(--ti-mobile-multi-select-header-item-bg, rgba(0, 0, 0, 0.03));
+      border-radius: 4px;
+      margin-top: var(--ti-mobile-multi-select-header-item-margin-top, 10px);
+      padding: 5px 8px;
+
+      &:hover {
+        svg {
+          fill: var(--ti-mobile-base-color-brand-1, #4a79fe);
+        }
+      }
+    }
+
+    &__item:hover &__label {
+      color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+    }
+
+    &__label {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      font-size: var(--ti-mobile-multi-select-header-label-font-size, 12px);
+      color: var(--ti-mobile-multi-select-header-label-text-color, #595959);
+      line-height: 18px;
+    }
+
+    &__icon {
+      height: 12px;
+      line-height: 12px;
+      width: 12px;
+      margin-top: 2px;
+      margin-left: 4px;
+      font-size: 0px;
+      transform-origin: center center;
+      transition: all linear 0.3s;
+
+      svg {
+        fill: var(--ti-mobile-multi-select-svg-fill-color, #c2c2c2);
+        font-size: 12px;
+        vertical-align: text-bottom;
+      }
+    }
+
+    &__active {
+      svg {
+        fill: var(--ti-mobile-base-color-brand-1, #4a79fe);
+      }
+
+      color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+    }
+  }
+
+  &__content {
+    height: var(--ti-mobile-multi-select-content-height, 226px);
+  }
+
+  .noFooter {
+    border-radius: 0px 0px 16px 16px;
+  }
+
+  &__footer {
+    height: 74px;
+    padding: 16px;
+    text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0px 0px 16px 16px;
+    box-shadow: 0px -1px 3px 0px #f8f8f8;
+
+    button {
+      width: var(--ti-mobile-multi-select-footer-width, 164px);
+    }
+
+    :first-child {
+      margin-right: 15px;
+    }
+
+    .tiny-mobile-button--primary {
+      color: var(--ti-mobile-button-color, #fff);
+      border-color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+      background-color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+    }
+
+    .tiny-mobile-button--default {
+      color: #191919;
+    }
+  }
+}

src/multi-select/vars.less

@@ -0,0 +1,12 @@
+:root {
+  --ti-mobile-multi-select-bg: #fff;
+  --ti-mobile-multi-select-header-bg: #fff;
+  --ti-mobile-multi-select-header-item-height: 28px;
+  --ti-mobile-multi-select-header-item-bg: rgba(0, 0, 0, 0.03);
+  --ti-mobile-multi-select-header-item-margin-top: 10px;
+  --ti-mobile-multi-select-header-label-text-color: #595959;
+  --ti-mobile-multi-select-header-label-font-size: 12px;
+  --ti-mobile-multi-select-svg-fill-color: #c2c2c2;
+  --ti-mobile-multi-select-content-height: 226px;
+  --ti-mobile-multi-select-footer-width: 164px;
+}

src/vars/index.js

@@ -1,42 +1,44 @@
-import ActionSheet from '../action-sheet'
-import Alert from '../alert'
-import Avatar from '../avatar'
-import Badge from '../badge'
-import Base from '../base'
-import Button from '../button'
-import Checkbox from '../checkbox'
-import CheckboxGroup from '../checkbox-group'
-import DialogBox from '../dialog-box'
-import DropdownItem from '../dropdown-item'
-import DropdownMenu from '../dropdown-menu'
-import Exception from '../exception'
-import FileUpload from '../file-upload'
-import Form from '../form'
-import FormItem from '../form-item'
-import ImageViewer from '../image-viewer'
-import Input from '../input'
-import List from '../list'
-import Loading from '../loading'
-import MiniPicker from '../mini-picker'
-import NavBar from '../nav-bar'
-import Numeric from '../numeric'
-import PickerColumn from '../picker-column'
-import Popup from '../popup'
-import Progress from '../progress'
-import PullRefresh from '../pull-refresh'
-import Radio from '../radio'
-import Search from '../search'
-import Slider from '../slider'
-import Svg from '../svg'
-import Switch from '../switch'
-import Tabbar from '../tabbar'
-import TabbarItem from '../tabbar-item'
-import Tabs from '../tabs'
-import TallStorage from '../tall-storage'
-import TimeLine from '../time-line'
-import Upload from '../upload'
-import UploadDragger from '../upload-dragger'
-import UploadList from '../upload-list'
+import ActionSheet from "../action-sheet";
+import Alert from "../alert";
+import Avatar from "../avatar";
+import Badge from "../badge";
+import Base from "../base";
+import Button from "../button";
+import Checkbox from "../checkbox";
+import CheckboxGroup from "../checkbox-group";
+import DialogBox from "../dialog-box";
+import DropdownItem from "../dropdown-item";
+import DropdownMenu from "../dropdown-menu";
+import Exception from "../exception";
+import FileUpload from "../file-upload";
+import Form from "../form";
+import FormItem from "../form-item";
+import ImageViewer from "../image-viewer";
+import Input from "../input";
+import List from "../list";
+import Loading from "../loading";
+import MiniPicker from "../mini-picker";
+import NavBar from "../nav-bar";
+import Numeric from "../numeric";
+import PickerColumn from "../picker-column";
+import Popup from "../popup";
+import Progress from "../progress";
+import PullRefresh from "../pull-refresh";
+import Radio from "../radio";
+import Search from "../search";
+import Slider from "../slider";
+import Svg from "../svg";
+import Switch from "../switch";
+import Tabbar from "../tabbar";
+import TabbarItem from "../tabbar-item";
+import Tabs from "../tabs";
+import TallStorage from "../tall-storage";
+import TimeLine from "../time-line";
+import Upload from "../upload";
+import UploadDragger from "../upload-dragger";
+import UploadList from "../upload-list";
+import MultiSelect from "../multi-select";
+import Wheel from "../wheel";
 
 export default {
   ...ActionSheet,
@@ -77,5 +79,7 @@ export default {
   ...TimeLine,
   ...Upload,
   ...UploadDragger,
-  ...UploadList
-}
+  ...UploadList,
+  ...MultiSelect,
+  ...Wheel,
+};

src/wheel/index.js

@@ -0,0 +1,13 @@
+export default {
+  "tiny-mobile-wheel-content-font-size": "14px",
+  "tiny-mobile-wheel-wrapper-height": "224px",
+  "tiny-mobile-wheel-wrapper-font-size": "14px",
+  "tiny-mobile-wheel-wrapper-scroll-margin-top": "38px",
+  "tiny-mobile-wheel-scroll-hasfooter-line-height": "36px",
+  "tiny-mobile-wheel-scroll-hasfooter-height": "36px",
+  "tiny-mobile-wheel-scroll-hasfooter-text-color": "#595959",
+  "tiny-mobile-wheel-scroll-nofooter-line-height": "44px",
+  "tiny-mobile-wheel-scroll-nofooter-height": "44px",
+  "tiny-mobile-wheel-scroll-nofooter-text-color": "#191919",
+  "tiny-mobile-wheel-scroll-icon-font-size": "20px",
+};

src/wheel/index.less

@@ -0,0 +1,105 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import '../mixins/hairline.less';
+@import './vars.less';
+
+@wheel-prefix-cls: ~'@{css-prefix}mobile-wheel';
+
+.@{wheel-prefix-cls} {
+  width: 100%;
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  &__container {
+    width: 100%;
+    z-index: 100;
+    overflow: hidden;
+    text-align: center;
+    font-size: var(--ti-mobile-wheel-content-font-size, 14px);
+  }
+
+  &__picker__panel {
+    z-index: 600;
+  }
+
+  &__picker__content {
+    position: relative;
+    top: 0px;
+  }
+
+  &__wheel__wrapper {
+    display: flex;
+    padding: 0 16px;
+
+    .wheel {
+      flex: 1;
+      width: 1%;
+      height: var(--ti-mobile-wheel-wrapper-height, 224px);
+      overflow: hidden;
+      font-size: var(--ti-mobile-wheel-wrapper-font-size, 14px);
+
+      .wheel__scroll_hasFooter {
+        padding: 0px;
+        margin-top: var(--ti-mobile-wheel-wrapper-scroll-margin-top, 38px);
+        line-height: var(--ti-mobile-wheel-scroll-hasfooter-line-height, 36px);
+        list-style: none;
+
+        .wheel__item {
+          list-style: none;
+          height: var(--ti-mobile-wheel-scroll-hasfooter-height, 36px);
+          overflow: hidden;
+          white-space: nowrap;
+          color: var(--ti-mobile-wheel-scroll-hasfooter-text-color, #595959);
+          font-weight: 500;
+        }
+
+        .wheel__item__selected {
+          color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+        }
+      }
+
+      .wheel__scroll_noFooter {
+        padding: 0px;
+        margin-top: 0px;
+        line-height: var(--ti-mobile-wheel-scroll-nofooter-line-height, 44px);
+        list-style: none;
+
+        .wheel__item {
+          list-style: none;
+          height: var(--ti-mobile-wheel-scroll-nofooter-height, 44px);
+          overflow: hidden;
+          white-space: nowrap;
+          color: var(--ti-mobile-wheel-scroll-nofooter-text-color, #191919);
+          font-weight: 500;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .wheel__item__selected {
+          color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+          fill: var(--ti-mobile-base-color-brand-1, #4a79fe);
+        }
+
+        .size20 {
+          font-size: var(--ti-mobile-wheel-scroll-icon-font-size, 20px);
+        }
+      }
+    }
+  }
+
+}