1

yusijie

2025-07-09 dac2b186e99d0b459a6e61a79101cfd304ed312b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
let isShow = false
let items = []
let globalDropdownWrapper = null
 
function getDropdownRoot(width = 372, top = "100%") {
    let dropdownWrapper = document.createElement("div");
    dropdownWrapper.style.width = width + "px";
    dropdownWrapper.style.height = '400px'
    dropdownWrapper.style.position = "absolute"
    dropdownWrapper.style.background = "#fafafa"
    dropdownWrapper.style.top = top;
    dropdownWrapper.style.left = "0"
    dropdownWrapper.style.zIndex = "999"
    dropdownWrapper.style.display = "none"
    dropdownWrapper.style.overflowY = "auto"
    dropdownWrapper.style.boxSizing = "border-box"
    dropdownWrapper.style.border = "2px solid #eeeeee"
    dropdownWrapper.style.borderRadius = "10px"
    dropdownWrapper.id = "dropdown-root";
    dropdownWrapper.classList.add("dropdown-root")
    globalDropdownWrapper = dropdownWrapper
    return dropdownWrapper
}
 
 
function getIsShow() {
    return isShow;
}
 
function setDropdownContent(dataList, type, callback) {
    clearNodes();
    let dropItems = document.createElement("div");
    dropItems.style.display = "flex"
    dropItems.style.flexDirection = "row"
    dropItems.style.flex = "1"
    dropItems.style.gap = "20px 20px"
    dropItems.style.padding = "10px"
    dropItems.style.flexWrap = "wrap"
 
    // 可扩展其他类型
    switch (type) {
        case "icon": createIconCardItem([dropItems], dataList); break;
        default: console.error("未知type类型"); return;
    }
    globalDropdownWrapper.addEventListener("click", function (e) {
        callback.call(e)
    })
    globalDropdownWrapper.appendChild(dropItems)
}
 
function createIconCardItem(dropItems, dataList) {
    for (let data of dataList) {
        let dropItem = document.createElement("div")
        dropItem.classList.add("dropItem")
        dropItem.style.display = "flex"
        dropItem.style.flexDirection = "column"
        dropItem.style.justifyContent = "center"
        dropItem.style.alignItems = "center"
        dropItem.style.padding = "5px"
        dropItem.style.width = "96px";
        dropItem.style.height = "96px";
        dropItem.style.boxSizing = "border-box";
 
        let image = document.createElement("img");
        image.src = data.imgUrl;
        image.style.objectFit = "contain"
        image.style.maxWidth = "100%"
        image.style.height = "80%"
        image.style.display = "block"
 
        let span = document.createElement("span");
        span.setAttribute('databinding', true)
        span.setAttribute('data-value', data.imgValue)
        span.innerText = data.imgName;
        span.style.maxWidth = "100%" // 限制最大宽度
        span.style.height = "20%"
        span.style.overflow = "hidden" // 溢出隐藏
        span.style.textOverflow = "ellipsis" // 文本溢出显示省略号
        span.style.whiteSpace = "nowrap" // 防止文本换行
        span.style.fontSize = "0.8em" // 调整字体大小
 
        dropItem.appendChild(image)
        dropItem.appendChild(span)
 
        dropItems[0].appendChild(dropItem);
    }
}
 
 
function clearNodes() {
    while (globalDropdownWrapper.firstChild) {
        globalDropdownWrapper.removeChild(globalDropdownWrapper.firstChild); // 删除第一个子节点
    }
}
 
function hideDropdown() {
    document.getElementById("dropdown-root").style.display = 'none'
    isShow = false
}
 
function showDropdown() {
    document.getElementById("dropdown-root").style.display = 'block'
    isShow = true
}
 
function changeDropdownShow() {
    if (isShow === true) {
        hideDropdown()
        isShow = false
    } else {
        showDropdown()
        isShow = true
    }
}
 
window.addEventListener("resize", function () {
    globalDropdownWrapper.style.width = "calc(25vw)"
})