ui

2025-04-23 11:22:46 +08:00
parent 7a1aae1e2f
commit 0b29e4e856
20 changed files with 1301 additions and 1 deletions
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<style>
+  .option-item {
+    padding: 8px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .option-item:hover {
+    background-color: #f0f0f0;
+  }
+
+  ::-webkit-scrollbar,
+  ::-webkit-scrollbar-track {
+    width: 0.25rem;
+    height: 0.25rem;
+    background: none;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    transform: translateX(10px);
+  }
+
+  body {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    cursor: pointer;
+    justify-content: center;
+  }
+
+  .option-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: white;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all 0.3s;
+    max-height: 40vh;
+    overflow-y: auto;
+  }
+
+  body:hover .option-list {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+</style>
+
+<body>
+  <div @click='onclick' class="select-none cursor-pointer">
+    {{selectLabel()||placeholder||'请选择'}}
+  </div>
+  <div @click='onclick'>🔻</div>
+  <div class="option-list">
+    <input class="clear grow border-gray-400 border mx-auto my-2 p-1 block" style="width: 90%" @input='filter'
+      placeholder='筛选' />
+    <div v-if='filterOptions.length===0' class="option-item">
+      Not Found Options
+    </div>
+    <div @click='onselect(v)' class="option-item border-b border-gray-100" v-for='v in filterOptions'>
+      {{v.label || v }}
+    </div>
+  </div>
+</body>
+<script setup>
+  placeholder = ''
+  options = [
+    {value: '1', label: 'Label 1'},
+    {value: '2', label: 'Label 2'},
+    {value: '3', label: 'Label 3'},
+  ]
+  filterOptions = []
+  value = ''
+  input = (v) => {
+    value = v
+  }
+  filter = (event) => {
+    filterOptions = options.filter((o) => {
+      let tag = o.label || o.value || o
+      if (typeof tag !== 'string') {
+        tag = tag.toString()
+      }
+      return tag.includes(event.target.value || '')
+    })
+  }
+  onselect = (v) => {
+    input(v.value || v)
+    show = false
+  }
+  selectLabel = () => {
+    let res = value
+    options.forEach((o) => {
+      if (typeof o === 'string') {
+        return
+      }
+      if (o.value === value) {
+        res = o.label
+      }
+    })
+    return res
+  }
+</script>
+<script>
+  filterOptions = [...options]
+</script>
+
+</html>