添加组件及页面

miniprogram/pages/components/select-plugin/select-plugin.json

@@ -1,11 +1,10 @@
 {
   "component": true,
   "usingComponents": {
-    "popup-plugin": "/pages/components/popup-plugin/popup-plugin",
-    "t-radio-group": "tdesign-miniprogram/radio-group/radio-group",
-    "t-radio": "tdesign-miniprogram/radio/radio",
-    "t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
-    "t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon"
   }
 }
 

miniprogram/pages/components/select-plugin/select-plugin.ts

@@ -1,21 +1,19 @@
+import { toArray } from '@/utils/util';
+
 Component({
   options: { multipleSlots: true },
   /**
    * 组件的属性列表
    */
   properties: {
-    mode: { type: String, value: "single" },
-    title: { type: String, value: "请选择" },
-    options: { type: Array, value: [] },
-    value: { type: null, value: [] },
+    title: null,
+    options: null,
+    value: null,
   },
   observers: {
-    "value,mode": function (v, m) {
-      if (m == "multiple") {
-        this.setData({ val: Array.isArray(v) ? [...v] : [] });
-      } else {
-        this.setData({ val: v });
-      }
+    value: function (value) {
+      const data = toArray(this.data.options).find((el) => el.value == value);
+      this.setData({ note: data?.label || '' });
     },
   },
 
@@ -23,31 +21,27 @@ Component({
    * 组件的初始数据
    */
   data: {
-    visible: false,
-    val: [] as any[] | string | number,
+    show: false,
+    note: '',
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-    click() {
-      this.setData({ visible: true });
+    onOpenPicker() {
+      this.setData({ show: true });
     },
-    close() {
-      this.setData({ visible: false });
+    onPickerCancel() {
+      this.setData({ show: false });
     },
-    radioChange(e: any) {
-      this.triggerEvent("change", { value: e.detail.value });
-      this.setData({ val: e.detail.value, visible: false });
+    onConfirm(e: any) {
+      this.triggerEvent('change', { value: e.detail.value?.[0] });
+      this.onPickerCancel();
     },
-    checkboxChange(e: any) {
-      this.setData({ val: e.detail.value });
-    },
-    ok() {
-      this.setData({ visible: false });
-      this.triggerEvent("change", { value: this.data.val });
+    onClear() {
+      this.triggerEvent('change', { value: '' });
+      this.onPickerCancel();
     },
   },
 });
-

miniprogram/pages/components/select-plugin/select-plugin.wxml

@@ -1,24 +1,15 @@
-<view style="display: contents" bindtap="click">
-  <slot />
-
-</view>
-
-<popup-plugin visible="{{visible}}" bind:close="close" title="{{title}}">
-
-  <view style="padding: 24rpx 0;">
-    <t-radio-group wx:if="{{mode == 'single'}}" bind:change="radioChange" allow-uncheck
-      value="{{val}}" borderless>
-      <t-radio wx:for="{{options}}" wx:key="index" value="{{item.value}}"
-        style="padding-bottom: 12rpx;padding-top: 12rpx;">{{item.label}}
-      </t-radio>
-    </t-radio-group>
-    <t-checkbox-group wx:else value="{{val}}" bind:change="checkboxChange" borderless>
-      <t-checkbox style="padding-bottom: 12rpx;padding-top: 12rpx;" wx:for="{{options}}"
-        icon="rectangle" wx:key="index" value="{{item.value}}">{{item.label}}
-      </t-checkbox>
-    </t-checkbox-group>
+<t-cell title="{{title || ''}}" arrow hover bind:click="onOpenPicker">
+  <view slot="note" style="display: flex;align-items: center;column-gap: 12rpx;">
+    <view>{{note || ''}}</view>
+    <t-icon wx:if="{{value}}" name="close-circle-filled" catch:tap="onClear"></t-icon>
+    <text wx:else>{{placeholder || title}}</text>
   </view>
-  <view class="footer" wx:if="{{ mode == 'multiple' }}">
-    <t-button size="small" theme="primary" bindtap="ok">确定</t-button>
-  </view>
-</popup-plugin>
+</t-cell>
+<t-picker visible="{{show}}" value="{{[value]}}" data-key="value" title="{{title || ''}}"
+  cancelBtn="取消" confirmBtn="确认" bind:confirm="onConfirm" bindcancel="onPickerCancel">
+  <t-picker-item options="{{options || []}}">
+    <block wx:for="{{options || []}}" wx:key="value">
+      {{item.label}}
+    </block>
+  </t-picker-item>
+</t-picker>