mini-select 1.0.0

package/app.js

@@ -0,0 +1,19 @@
+// app.js
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

package/components/mini-select/index.js

@@ -0,0 +1,153 @@
+Component({
+  properties: {
+    value: {
+      type: [String, Number],
+      value: null
+    },
+    options: {
+      type: Array,
+      value: []
+    },
+    valueKey: {
+      type: String,
+      value: 'value'
+    },
+    labelKey: {
+      type: String,
+      value: 'label'
+    },
+    placeholder: {
+      type: String,
+      value: '请选择'
+    }
+  },
+
+  data: {
+    open: false,
+    selectedLabel: '',
+    keyword: '',
+    inputValue: '',
+    normalizedOptions: [],
+    filteredOptions: []
+  },
+
+  observers: {
+    'value, options, valueKey, labelKey'(value, options, valueKey, labelKey) {
+      const safeOptions = Array.isArray(options) ? options : []
+      const normalizedOptions = this.normalizeOptions(safeOptions, valueKey, labelKey)
+      const current = normalizedOptions.find(item => item.value === value)
+      const selectedLabel = current ? current.label : ''
+      const keyword = this.data.keyword || ''
+      const filteredOptions = this.getFilteredOptions(keyword, normalizedOptions)
+
+      if (this.data.open) {
+        this.setData({
+          selectedLabel,
+          normalizedOptions,
+          filteredOptions
+        })
+        return
+      }
+
+      this.setData({
+        selectedLabel,
+        keyword: '',
+        inputValue: selectedLabel,
+        normalizedOptions,
+        filteredOptions
+      })
+    }
+  },
+
+  lifetimes: {
+    attached() {
+      const normalizedOptions = this.normalizeOptions(
+        this.data.options,
+        this.data.valueKey,
+        this.data.labelKey
+      )
+
+      this.setData({
+        normalizedOptions,
+        filteredOptions: this.getFilteredOptions('', normalizedOptions),
+        inputValue: this.data.selectedLabel || ''
+      })
+    }
+  },
+
+  methods: {
+    normalizeOptions(options, valueKey, labelKey) {
+      const safeOptions = Array.isArray(options) ? options : []
+      const vk = valueKey || 'value'
+      const lk = labelKey || 'label'
+
+      return safeOptions.map(optionItem => {
+        const raw = optionItem
+        const value = raw && vk in raw ? raw[vk] : undefined
+        const label = raw && lk in raw ? raw[lk] : ''
+        return { value, label, raw }
+      })
+    },
+
+    getFilteredOptions(keyword, options) {
+      const safeOptions = Array.isArray(options) ? options : []
+      const k = String(keyword || '').trim().toLowerCase()
+      if (!k) return safeOptions
+
+      return safeOptions.filter(item =>
+        String(item && item.label != null ? item.label : '')
+          .toLowerCase()
+          .includes(k)
+      )
+    },
+
+    toggle() {
+      const nextOpen = !this.data.open
+      if (nextOpen) {
+        this.setData({
+          open: true,
+          filteredOptions: this.getFilteredOptions(this.data.keyword, this.data.normalizedOptions)
+        })
+        return
+      }
+
+      this.setData({
+        open: false,
+        keyword: '',
+        inputValue: this.data.selectedLabel || '',
+        filteredOptions: this.getFilteredOptions('', this.data.normalizedOptions)
+      })
+    },
+
+    onFocus() {
+      this.setData({
+        open: true,
+        filteredOptions: this.getFilteredOptions(this.data.keyword, this.data.normalizedOptions)
+      })
+    },
+
+    onInput(e) {
+      const keyword = e.detail && typeof e.detail.value === 'string' ? e.detail.value : ''
+      this.setData({
+        open: true,
+        keyword,
+        inputValue: keyword,
+        filteredOptions: this.getFilteredOptions(keyword, this.data.normalizedOptions)
+      })
+    },
+
+    select(e) {
+      const { value, label } = e.currentTarget.dataset
+      const selectedItem = this.data.normalizedOptions.find(item => item.value === value)
+      this.setData({
+        open: false,
+        selectedLabel: label,
+        keyword: '',
+        inputValue: label,
+        filteredOptions: this.getFilteredOptions('', this.data.normalizedOptions)
+      })
+
+      this.triggerEvent('change', { value, label, item: selectedItem ? selectedItem.raw : undefined })
+    }
+  }
+})

package/components/mini-select/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "isolated"
+}

package/components/mini-select/index.wxml

@@ -0,0 +1,27 @@
+<view class="select">
+  <view class="select-trigger">
+    <input
+      class="select-input"
+      placeholder="{{ placeholder }}"
+      value="{{ inputValue }}"
+      bindfocus="onFocus"
+      bindinput="onInput"
+    />
+    <text class="arrow" bindtap="toggle">{{ open ? '▲' : '▼' }}</text>
+  </view>
+
+  <view wx:if="{{ open && filteredOptions.length }}" class="options">
+    <view class="options-list">
+      <view
+        wx:for="{{ filteredOptions }}"
+        wx:key="value"
+        class="option"
+        bindtap="select"
+        data-value="{{ item.value }}"
+        data-label="{{ item.label }}"
+      >
+        {{ item.label }}
+      </view>
+    </view>
+  </view>
+</view>

package/components/mini-select/index.wxss

@@ -0,0 +1,74 @@
+.select {
+  position: relative;
+  font-size: 28rpx;
+  margin: 10rpx;
+}
+
+.select-trigger {
+  padding: 20rpx;
+  border: 1px solid #ddd;
+  border-radius: 8rpx;
+  border-radius: 10rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.select-input {
+  flex: 1;
+  min-width: 0;
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.options {
+  position: absolute;
+  width: 100%;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8rpx;
+  margin-top: 20rpx;
+  z-index: 10;
+}
+
+.options-list {
+  max-height: 400rpx;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 边框三角 */
+.options::before {
+  content: '';
+  position: absolute;
+  top: -16rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 16rpx 16rpx 16rpx;
+  border-style: solid;
+  border-color: transparent transparent #ddd transparent;
+}
+
+/* 白色三角（覆盖在边框上） */
+.options::after {
+  content: '';
+  position: absolute;
+  top: -14rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 14rpx 14rpx 14rpx;
+  border-style: solid;
+  border-color: transparent transparent #fff transparent;
+}
+
+.option {
+  padding: 20rpx;
+}
+
+.option:hover {
+  background-color: #f5f5f5;
+}
+
+.arrow {
+  color: #999;
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "mini-select",
+  "version": "1.0.0",
+  "description": "微信小程序自定义Select组件",
+  "miniprogram": "components",
+  "files": ["components"],
+  "keywords": ["miniprogram", "wechat", "select"],
+  "license": "MIT",
+  "author": "Jean",
+  "type": "commonjs",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}