Browse Source

fix: taro-picker 问题修改 (#1582)

yangxiaolu1993 3 years ago
parent
commit
fad8d9bd58

+ 6 - 1
src/packages/__VUE/picker/ColumnTaro.vue

@@ -18,7 +18,12 @@
           {{ item.text }}
         </view>
         <!-- 平铺 -->
-        <view class="nut-picker-roller-item-tile" v-if="item && item.text && !threeDimensional">
+        <view
+          class="nut-picker-roller-item-tile"
+          ref="listbox"
+          :id="'listbox' + refRandomId"
+          v-if="item && item.text && !threeDimensional"
+        >
           {{ item.text }}
         </view>
       </template>

+ 8 - 1
src/sites/mobile-taro/vue/project.private.config.json

@@ -51,9 +51,16 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "dentry/pages/picker/index",
+          "pathName": "dentry/pages/picker/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }
   },
-  "projectname": "NutUI-Taro"
+  "projectname": "vue"
 }

+ 23 - 1
src/sites/mobile-taro/vue/src/dentry/pages/picker/index.vue

@@ -38,6 +38,25 @@
     >
     </nut-picker>
 
+    <h2>平铺展示</h2>
+    <nut-cell
+      title="请选择城市"
+      :desc="title"
+      @click="
+        () => {
+          showTitle = true;
+        }
+      "
+    ></nut-cell>
+    <nut-picker
+      v-model:visible="showTitle"
+      :columns="columns"
+      title="城市选择"
+      :three-dimensional="false"
+      @confirm="(options) => confirm('title', options)"
+    >
+    </nut-picker>
+
     <h2>多列样式</h2>
     <nut-cell
       title="请选择时间"
@@ -246,6 +265,7 @@ export default {
     const showAsync = ref(false);
     const showEffect = ref(false);
     const showPort = ref(false);
+    const showTitle = ref(false);
 
     const desc = reactive({
       index: '',
@@ -253,7 +273,8 @@ export default {
       multiple: '',
       cascader: '',
       async: '',
-      effect: ''
+      effect: '',
+      title: ''
     });
 
     const open = (index: number) => {
@@ -359,6 +380,7 @@ export default {
       alwaysFun,
       columsNum,
       showPort,
+      showTitle,
       portColumns,
       portChange
     };