@zym-com/select-level
v0.0.0
Published
下拉层级组件
Downloads
2
Readme
Install
npm install @zym-com/select-levelor
yarn add @zym-com/select-levelImport
import ScrollDom from "@zym-com/select-level";
import "@zym-com/select-level/dist/style.css";Usage
import ScrollDom from "@zym-com/select-level";
import "@zym-com/select-level/dist/style.css";
import xialaPng from "@zym-com/select-level/dist/xialaPng";
import delectPng from "@zym-com/select-level/dist/delectPng";
import delectPng from "@zym-com/select-level/dist/delectPng";
import checkPng from "@zym-com/select-level/dist/checkPng";
import notCheckPng from "@zym-com/select-level/dist/notCheckPng";
import checkNoPng from "@zym-com/select-level/dist/checkNoPng";
import rightPng from "@zym-com/select-level/dist/rightPng";
import downPng from "@zym-com/select-level/dist/downPng";
import folderPng from "@zym-com/select-level/dist/folderPng";
import folderOpenPng from "@zym-com/select-level/dist/folderOpenPng";
import fileEmptyPng from "@zym-com/select-level/dist/fileEmptyPng";
function App() {
const options = {
"configuration": {
"onlyLeafCheckboxes": false,
"checkboxAfterClose": false,
"noCascade": false,
"singleShow": false,
"checkModel": "leaf",
"selectTextPadding": {
"t": 0,
"r": 8,
"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
},
"dropDownIconMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"dropDownIconBorderRadius": 0,
"clearIconImg": delectPng,
"clearIconSize": {
"clearIconSizeW": 20,
"clearIconSizeH": 20
},
"clearIconMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"clearIconBorderRadius": 0,
"selectItemSize": {
"x": 65,
"y": 25
},
"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
},
"selectItemClearIconBorderRadius": 0,
"dropDownBoxHeight": 150,
"dropDownBoxOffset": 10,
"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
},
"dropDownBoxBorderWidth": 0,
"dropDownBoxBorderType": "solid",
"dropDownBoxBorderColor": "rgba(0,59,81,1)",
"dropDownBoxBorderRadius": 4,
"itemDefaultTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 40,
"fontStyle": "normal"
},
"dropDownItemTextLang": "long",
"dropDownItemTextLangNum": 10,
"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,
"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,
"checkBoxIconSize": {
"x": 20,
"y": 20
},
"checkBoxIconMargin": {
"x": 5,
"y": 5
},
"checkImage": checkPng,
"halfCheckImage": notCheckPng,
"uncheckImage": checkNoPng,
"expandIconSize": {
"x": 20,
"y": 20
},
"expandIconMargin": {
"x": 5,
"y": 0
},
"expandCloseImage": rightPng,
"expandOpenImage": downPng,
"parentIconSize": {
"x": 20,
"y": 20
},
"parentIconMargin": {
"x": 5,
"y": 10
},
"parentCloseImage": folderPng,
"parentOpenImage": folderOpenPng,
"leafIconSize": {
"x": 20,
"y": 20
},
"leafIconMargin": {
"x": 5,
"y": 10
},
"leafImage": fileEmptyPng,
"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
},
"selectBGStyle": true,
"placeholderStyle": true,
"selectBorderStyle": true,
"dropDownIcon": true,
"clearIcon": true,
"selectItemBGStyle": true,
"selectItemBorderStyle": true,
"selectItemClearIcon": true,
"dropDownBox": true,
"dropDownBoxBorderStyle": true,
"dropDownItemHover": false,
"itemDefaultBGStyle": false,
"itemHoverBGStyle": false,
"checkBoxIconStyle": true,
"expandIconStyle": true,
"parentIconStyle": true,
"leafIconStyle": true
},
"base": {
"width": 240,
"height": 40
},
"dataSource": [
{
"parentName": "",
"label": "合肥市",
"value": "340100"
},
{
"parentName": "",
"label": "芜湖市",
"value": "340200"
},
{
"parentName": "",
"label": "蚌埠市",
"value": "340300"
},
{
"parentName": "",
"label": "淮南市",
"value": "340400"
},
{
"parentName": "",
"label": "马鞍山市",
"value": "340500"
},
{
"parentName": "",
"label": "淮北市",
"value": "340600"
},
{
"parentName": "",
"label": "铜陵市",
"value": "340700"
},
{
"parentName": "",
"label": "安庆市",
"value": "340800"
},
{
"parentName": "",
"label": "黄山市",
"value": "341000"
},
{
"parentName": "",
"label": "滁州市",
"value": "341100"
},
{
"parentName": "",
"label": "阜阳市",
"value": "341200"
},
{
"parentName": "",
"label": "宿州市",
"value": "341300"
},
{
"parentName": "",
"label": "六安市",
"value": "341500"
},
{
"parentName": "",
"label": "亳州市",
"value": "341600"
},
{
"parentName": "",
"label": "池州市",
"value": "341700"
},
{
"parentName": "",
"label": "宣城市",
"value": "341800"
},
{
"parentName": "合肥市",
"label": "市辖区",
"value": "340101"
},
{
"parentName": "合肥市",
"label": "瑶海区",
"value": "340102"
},
{
"parentName": "合肥市",
"label": "庐阳区",
"value": "340103"
},
{
"parentName": "合肥市",
"label": "蜀山区",
"value": "340104"
},
{
"parentName": "合肥市",
"label": "包河区",
"value": "340111"
},
{
"parentName": "合肥市",
"label": "长丰县",
"value": "340121"
},
{
"parentName": "合肥市",
"label": "肥东县",
"value": "340122"
},
{
"parentName": "合肥市",
"label": "肥西县",
"value": "340123"
},
{
"parentName": "合肥市",
"label": "庐江县",
"value": "340124"
},
{
"parentName": "合肥市",
"label": "合肥高新技术产业开发区",
"value": "340171"
},
{
"parentName": "合肥市",
"label": "合肥经济技术开发区",
"value": "340172"
},
{
"parentName": "合肥市",
"label": "合肥新站高新技术产业开发区",
"value": "340173"
},
{
"parentName": "合肥市",
"label": "巢湖市",
"value": "340181"
},
{
"parentName": "芜湖市",
"label": "市辖区",
"value": "340201"
},
{
"parentName": "芜湖市",
"label": "镜湖区",
"value": "340202"
},
{
"parentName": "芜湖市",
"label": "弋江区",
"value": "340203"
},
{
"parentName": "芜湖市",
"label": "鸠江区",
"value": "340207"
},
{
"parentName": "芜湖市",
"label": "三山区",
"value": "340208"
},
{
"parentName": "芜湖市",
"label": "芜湖县",
"value": "340221"
},
{
"parentName": "芜湖市",
"label": "繁昌县",
"value": "340222"
},
{
"parentName": "芜湖市",
"label": "南陵县",
"value": "340223"
},
{
"parentName": "芜湖市",
"label": "无为县",
"value": "340225"
},
{
"parentName": "芜湖市",
"label": "芜湖经济技术开发区",
"value": "340271"
},
{
"parentName": "芜湖市",
"label": "安徽芜湖长江大桥经济开发区",
"value": "340272"
},
{
"parentName": "蚌埠市",
"label": "市辖区",
"value": "340301"
},
{
"parentName": "蚌埠市",
"label": "龙子湖区",
"value": "340302"
},
{
"parentName": "蚌埠市",
"label": "蚌山区",
"value": "340303"
},
{
"parentName": "蚌埠市",
"label": "禹会区",
"value": "340304"
},
{
"parentName": "蚌埠市",
"label": "淮上区",
"value": "340311"
},
{
"parentName": "蚌埠市",
"label": "怀远县",
"value": "340321"
},
{
"parentName": "蚌埠市",
"label": "五河县",
"value": "340322"
},
{
"parentName": "蚌埠市",
"label": "固镇县",
"value": "340323"
},
{
"parentName": "蚌埠市",
"label": "蚌埠市高新技术开发区",
"value": "340371"
},
{
"parentName": "蚌埠市",
"label": "蚌埠市经济开发区",
"value": "340372"
},
{
"parentName": "淮南市",
"label": "市辖区",
"value": "340401"
},
{
"parentName": "淮南市",
"label": "大通区",
"value": "340402"
},
{
"parentName": "淮南市",
"label": "田家庵区",
"value": "340403"
},
{
"parentName": "淮南市",
"label": "谢家集区",
"value": "340404"
},
{
"parentName": "淮南市",
"label": "八公山区",
"value": "340405"
},
{
"parentName": "淮南市",
"label": "潘集区",
"value": "340406"
},
{
"parentName": "淮南市",
"label": "凤台县",
"value": "340421"
},
{
"parentName": "淮南市",
"label": "寿县",
"value": "340422"
},
{
"parentName": "马鞍山市",
"label": "市辖区",
"value": "340501"
},
{
"parentName": "马鞍山市",
"label": "花山区",
"value": "340503"
},
{
"parentName": "马鞍山市",
"label": "雨山区",
"value": "340504"
},
{
"parentName": "马鞍山市",
"label": "博望区",
"value": "340506"
},
{
"parentName": "马鞍山市",
"label": "当涂县",
"value": "340521"
},
{
"parentName": "马鞍山市",
"label": "含山县",
"value": "340522"
},
{
"parentName": "马鞍山市",
"label": "和县",
"value": "340523"
},
{
"parentName": "淮北市",
"label": "市辖区",
"value": "340601"
},
{
"parentName": "淮北市",
"label": "杜集区",
"value": "340602"
},
{
"parentName": "淮北市",
"label": "相山区",
"value": "340603"
},
{
"parentName": "淮北市",
"label": "烈山区",
"value": "340604"
},
{
"parentName": "淮北市",
"label": "濉溪县",
"value": "340621"
},
{
"parentName": "铜陵市",
"label": "市辖区",
"value": "340701"
},
{
"parentName": "铜陵市",
"label": "铜官区",
"value": "340705"
},
{
"parentName": "铜陵市",
"label": "义安区",
"value": "340706"
},
{
"parentName": "铜陵市",
"label": "郊区",
"value": "340711"
},
{
"parentName": "铜陵市",
"label": "枞阳县",
"value": "340722"
},
{
"parentName": "安庆市",
"label": "市辖区",
"value": "340801"
},
{
"parentName": "安庆市",
"label": "迎江区",
"value": "340802"
},
{
"parentName": "安庆市",
"label": "大观区",
"value": "340803"
},
{
"parentName": "安庆市",
"label": "宜秀区",
"value": "340811"
},
{
"parentName": "安庆市",
"label": "怀宁县",
"value": "340822"
},
{
"parentName": "安庆市",
"label": "太湖县",
"value": "340825"
},
{
"parentName": "安庆市",
"label": "宿松县",
"value": "340826"
},
{
"parentName": "安庆市",
"label": "望江县",
"value": "340827"
},
{
"parentName": "安庆市",
"label": "岳西县",
"value": "340828"
},
{
"parentName": "安庆市",
"label": "安徽安庆经济开发区",
"value": "340871"
},
{
"parentName": "安庆市",
"label": "桐城市",
"value": "340881"
},
{
"parentName": "安庆市",
"label": "潜山市",
"value": "340882"
},
{
"parentName": "黄山市",
"label": "市辖区",
"value": "341001"
},
{
"parentName": "黄山市",
"label": "屯溪区",
"value": "341002"
},
{
"parentName": "黄山市",
"label": "黄山区",
"value": "341003"
},
{
"parentName": "黄山市",
"label": "徽州区",
"value": "341004"
},
{
"parentName": "黄山市",
"label": "歙县",
"value": "341021"
},
{
"parentName": "黄山市",
"label": "休宁县",
"value": "341022"
},
{
"parentName": "黄山市",
"label": "黟县",
"value": "341023"
},
{
"parentName": "黄山市",
"label": "祁门县",
"value": "341024"
},
{
"parentName": "滁州市",
"label": "市辖区",
"value": "341101"
},
{
"parentName": "滁州市",
"label": "琅琊区",
"value": "341102"
},
{
"parentName": "滁州市",
"label": "南谯区",
"value": "341103"
},
{
"parentName": "滁州市",
"label": "来安县",
"value": "341122"
},
{
"parentName": "滁州市",
"label": "全椒县",
"value": "341124"
},
{
"parentName": "滁州市",
"label": "定远县",
"value": "341125"
},
{
"parentName": "滁州市",
"label": "凤阳县",
"value": "341126"
},
{
"parentName": "滁州市",
"label": "苏滁现代产业园",
"value": "341171"
},
{
"parentName": "滁州市",
"label": "滁州经济技术开发区",
"value": "341172"
},
{
"parentName": "滁州市",
"label": "天长市",
"value": "341181"
},
{
"parentName": "滁州市",
"label": "明光市",
"value": "341182"
},
{
"parentName": "阜阳市",
"label": "市辖区",
"value": "341201"
},
{
"parentName": "阜阳市",
"label": "颍州区",
"value": "341202"
},
{
"parentName": "阜阳市",
"label": "颍东区",
"value": "341203"
},
{
"parentName": "阜阳市",
"label": "颍泉区",
"value": "341204"
},
{
"parentName": "阜阳市",
"label": "临泉县",
"value": "341221"
},
{
"parentName": "阜阳市",
"label": "太和县",
"value": "341222"
},
{
"parentName": "阜阳市",
"label": "阜南县",
"value": "341225"
},
{
"parentName": "阜阳市",
"label": "颍上县",
"value": "341226"
},
{
"parentName": "阜阳市",
"label": "阜阳合肥现代产业园区",
"value": "341271"
},
{
"parentName": "阜阳市",
"label": "阜阳经济技术开发区",
"value": "341272"
},
{
"parentName": "阜阳市",
"label": "界首市",
"value": "341282"
},
{
"parentName": "宿州市",
"label": "市辖区",
"value": "341301"
},
{
"parentName": "宿州市",
"label": "埇桥区",
"value": "341302"
},
{
"parentName": "宿州市",
"label": "砀山县",
"value": "341321"
},
{
"parentName": "宿州市",
"label": "萧县",
"value": "341322"
},
{
"parentName": "宿州市",
"label": "灵璧县",
"value": "341323"
},
{
"parentName": "宿州市",
"label": "泗县",
"value": "341324"
},
{
"parentName": "宿州市",
"label": "宿州马鞍山现代产业园区",
"value": "341371"
},
{
"parentName": "宿州市",
"label": "宿州经济技术开发区",
"value": "341372"
},
{
"parentName": "六安市",
"label": "市辖区",
"value": "341501"
},
{
"parentName": "六安市",
"label": "金安区",
"value": "341502"
},
{
"parentName": "六安市",
"label": "裕安区",
"value": "341503"
},
{
"parentName": "六安市",
"label": "叶集区",
"value": "341504"
},
{
"parentName": "六安市",
"label": "霍邱县",
"value": "341522"
},
{
"parentName": "六安市",
"label": "舒城县",
"value": "341523"
},
{
"parentName": "六安市",
"label": "金寨县",
"value": "341524"
},
{
"parentName": "六安市",
"label": "霍山县",
"value": "341525"
},
{
"parentName": "亳州市",
"label": "市辖区",
"value": "341601"
},
{
"parentName": "亳州市",
"label": "谯城区",
"value": "341602"
},
{
"parentName": "亳州市",
"label": "涡阳县",
"value": "341621"
},
{
"parentName": "亳州市",
"label": "蒙城县",
"value": "341622"
},
{
"parentName": "亳州市",
"label": "利辛县",
"value": "341623"
},
{
"parentName": "池州市",
"label": "市辖区",
"value": "341701"
},
{
"parentName": "池州市",
"label": "贵池区",
"value": "341702"
},
{
"parentName": "池州市",
"label": "东至县",
"value": "341721"
},
{
"parentName": "池州市",
"label": "石台县",
"value": "341722"
},
{
"parentName": "池州市",
"label": "青阳县",
"value": "341723"
},
{
"parentName": "宣城市",
"label": "市辖区",
"value": "341801"
},
{
"parentName": "宣城市",
"label": "宣州区",
"value": "341802"
},
{
"parentName": "宣城市",
"label": "郎溪县",
"value": "341821"
},
{
"parentName": "宣城市",
"label": "广德县",
"value": "341822"
},
{
"parentName": "宣城市",
"label": "泾县",
"value": "341823"
},
{
"parentName": "宣城市",
"label": "绩溪县",
"value": "341824"
},
{
"parentName": "宣城市",
"label": "旌德县",
"value": "341825"
},
{
"parentName": "宣城市",
"label": "宣城市经济开发区",
"value": "341871"
},
{
"parentName": "宣城市",
"label": "宁国市",
"value": "341881"
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<ScrollDom {...options} />
</>
);
}
export default App;