Procházet zdrojové kódy

下拉菜单二次封装

zhaoxiaohai před 3 roky
rodič
revize
66f5e89821

+ 39 - 0
components/My_dropdownMenu/index.js

@@ -0,0 +1,39 @@
+// components/My_dropdownMenu/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        mtype: {
+            type: String,
+            value: "date"
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        sortByDate: [{
+                text: '默认排序',
+                value: 0
+            },
+            {
+                text: '按日期升序',
+                value: 1
+            },
+            {
+                text: '按日期降序',
+                value: 2
+            },
+        ],
+        sortByDateChecked: 0,
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

+ 7 - 0
components/My_dropdownMenu/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
+        "van-dropdown-item": "@vant/weapp/dropdown-item/index"
+    }
+}

+ 5 - 0
components/My_dropdownMenu/index.scss

@@ -0,0 +1,5 @@
+.slot-box {
+    width: 480rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+}

+ 6 - 0
components/My_dropdownMenu/index.wxml

@@ -0,0 +1,6 @@
+<van-dropdown-menu wx:if="{{mtype=='date'}}" custom-class='menu' active-color='var(--assist)'>
+    <view slot='leftSlot' class="slot-box">
+        <slot />
+    </view>
+    <van-dropdown-item value="{{ sortByDateChecked }}" options="{{ sortByDate }}" />
+</van-dropdown-menu>