Install
npm install @zym-com/select-multior
yarn add @zym-com/select-multiImport
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;