@zym-com/select-multi v0.0.0

Install

npm install @zym-com/select-multi

or

yarn add @zym-com/select-multi

Import

import ScrollDom from "@zym-com/select-multi";
import "@zym-com/select-multi/dist/style.css";

Usage

import ScrollDom from "@zym-com/select-multi";
import "@zym-com/select-multi/dist/style.css";
import xialaPng from "@zym-com/select-multi/dist/xialaPng";
import delectPng from "@zym-com/select-multi/dist/delectPng";
import checkPng from "@zym-com/select-multi/dist/checkPng";

function App() {
  const options = {
    "configuration": {
        "selectTextPadding": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 8
        },
        "selectBgColorSelect": "solidBgColor",
        "selectBgsolidBgColor": "rgba(34,39,41,0.7)",
        "selectBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "selectBgBGSize": {
            "selectBgBGSizeW": 100,
            "selectBgBGSizeH": 80
        },
        "selectBgBGPosition": {
            "selectBgBGPositionW": 50,
            "selectBgBGPositionH": 50
        },
        "placeholder": "请选择",
        "placeholderTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(128,128,128,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "fontStyle": "normal"
        },
        "selectBorderWidth": 0,
        "selectBorderType": "solid",
        "selectBorderColor": "rgba(0,59,81,1)",
        "selectBorderRadius": 4,
        "dropDownIconImg": xialaPng,
        "dropDownIconSize": {
            "dropDownIconSizeW": 20,
            "dropDownIconSizeH": 20
        },
        "dropDownIconPadding": {
            "t": 0,
            "r": 8,
            "b": 0,
            "l": 8
        },
        "dropDownIconBorderRadius": 0,
        "clearIconImg": "delect.png",
        "clearIconSize": {
            "clearIconSizeW": 20,
            "clearIconSizeH": 20
        },
        "clearIconPadding": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 0
        },
        "clearIconBorderRadius": 0,
        "selectItemSize": {
            "x": 0,
            "y": 0
        },
        "selectItemPadding": {
            "t": 3,
            "r": 3,
            "b": 3,
            "l": 5
        },
        "selectItemMargin": {
            "t": 5,
            "r": 5,
            "b": 5,
            "l": 0
        },
        "selectTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "fontStyle": "normal"
        },
        "selectItemBgColorSelect": "solidBgColor",
        "selectItemBgsolidBgColor": "rgba(60,155,232,1)",
        "selectItemBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "selectItemBgBGSize": {
            "selectItemBgBGSizeW": 100,
            "selectItemBgBGSizeH": 80
        },
        "selectItemBgBGPosition": {
            "selectItemBgBGPositionW": 50,
            "selectItemBgBGPositionH": 50
        },
        "selectItemBorderWidth": 0,
        "selectItemBorderType": "solid",
        "selectItemBorderColor": "rgba(0,59,81,1)",
        "selectItemBorderRadius": 1,
        "selectItemClearIconImg": delectPng,
        "selectItemClearIconSize": {
            "x": 17,
            "y": 17
        },
        "selectItemClearIconPadding": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 0
        },
        "selectItemClearIconBorderRadius": 0,
        "selectPictureSize": {
            "selectPictureSizeW": 15,
            "selectPictureSizeH": 15
        },
        "selectPictureMR": 5,
        "dropDownBoxHeight": 150,
        "dropDownBoxOffset": 2,
        "dropDownOptionsHeight": 40,
        "dropDownOptionPL": 8,
        "dropDownOptionItemSpacing": 4,
        "dropDownBoxBgColorSelect": "solidBgColor",
        "dropDownBoxsolidBgColor": "rgba(34,39,41,0.7)",
        "dropDownBoxAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "dropDownBoxBGSize": {
            "dropDownBoxBGSizeW": 100,
            "dropDownBoxBGSizeH": 80
        },
        "dropDownBoxBGPosition": {
            "dropDownBoxBGPositionW": 50,
            "dropDownBoxBGPositionH": 50
        },
        "itemDefaultTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 40,
            "fontStyle": "normal"
        },
        "itemDefaultBgColorSelect": "solidBgColor",
        "itemDefaultBgsolidBgColor": "rgba(57, 69, 83,1)",
        "itemDefaultBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "itemDefaultBgBGSize": {
            "itemDefaultBGSizeW": 100,
            "itemDefaultBGSizeH": 80
        },
        "itemDefaultBGPosition": {
            "itemDefaultBGPositionW": 50,
            "itemDefaultBGPositionH": 50
        },
        "itemDefaultBGBorderRadius": 4,
        "itemCheckedTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 40,
            "fontStyle": "normal"
        },
        "itemCheckedBgColorSelect": "solidBgColor",
        "itemCheckedBgsolidBgColor": "rgba(57, 69, 83,1)",
        "itemCheckedBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "itemCheckedBgImage": "",
        "itemCheckedBgBGSize": {
            "itemCheckedBGSizeW": 100,
            "itemCheckedBGSizeH": 80
        },
        "itemCheckedBGPosition": {
            "itemCheckedBGPositionW": 50,
            "itemCheckedBGPositionH": 50
        },
        "itemCheckedBGBorderRadius": 4,
        "itemCheckedIconImg": checkPng,
        "itemCheckedIconSize": {
            "x": 16,
            "y": 11
        },
        "itemCheckedIconPosition": {
            "x": 90,
            "y": 50
        },
        "itemCheckedIconBorderRadius": 0,
        "itemHoverTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 14,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 40,
            "fontStyle": "normal"
        },
        "itemHoverBgColorSelect": "solidBgColor",
        "itemHoverBgsolidBgColor": "rgba(100, 115, 132,1)",
        "itemHoverBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "itemHoverBgBGSize": {
            "itemHoverBgBGSizeW": 100,
            "itemHoverBgBGSizeH": 80
        },
        "itemHoverBgBGPosition": {
            "itemHoverBgBGPositionW": 50,
            "itemHoverBgBGPositionH": 50
        },
        "itemHoverBGBorderRadius": 4,
        "scrollbarWidth": 4,
        "scrollbarColor": "rgba(255,255,255,0)",
        "scrollbarRadius": 10,
        "scrollbarThumbColor": "rgba(76,76,76,1)",
        "scrollbarThumbRadius": 10,
        "noOptionsType": "text",
        "noOptionsText": "暂无数据",
        "noOptionsTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "noOptionsImageSize": {
            "x": 50,
            "y": 50
        },
        "pictureSeries": [],
        "selectBGStyle": true,
        "placeholderStyle": true,
        "selectBorderStyle": true,
        "dropDownIcon": true,
        "clearIcon": true,
        "selectItemBGStyle": true,
        "selectItemBorderStyle": true,
        "selectItemClearIcon": true,
        "selectIcon": true,
        "dropDownBox": false,
        "dropDownItemChecked": true,
        "dropDownItemHover": false
    },
    "base": {
        "width": 240,
        "height": 40
    },
    "dataSource": [
        {
            "label": "选项1",
            "value": "1"
        },
        {
            "label": "选项2",
            "value": "2"
        },
        {
            "label": "选项3",
            "value": "3"
        },
        {
            "label": "选项4",
            "value": "4"
        },
        {
            "label": "选项5",
            "value": "5"
        },
        {
            "label": "选项6",
            "value": "6"
        }
    ],
    bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
  }
  return (
    <>
      <ScrollDom {...options} />
    </>
  );
}

export default App;