bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/components/yty-data-picker/yty-data-picker.vue

对比新文件
@@ -0,0 +1,117 @@
<template>
   <view>
      <view class="mask_area" @click="handleMaskClick" v-if="show">
         <view class="content_area" @click.stop>
            <view class="search_area">
               <input class="" inputmode="search" type="text" placeholder="璇疯緭鍏ュ叧閿瓧" @confirm="handleSearch" />
            </view>
            <scroll-view class="list_area" scroll-y="true">
               <view>
                  <view class="list_item" v-for="item,index in dataList" :key="index" @click="handleSelect(item)">
                     {{item.name}}
                  </view>
               </view>
            </scroll-view>
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         show: {
            type: Boolean,
            default: false,
         },
         dataList: {
            type: Array,
            default: function() {
               return []
            }
         }
      },
      name: "yty-data-picker",
      data() {
         return {

         };
      },
      methods: {
         handleMaskClick() {
            this.$emit('close')
         },
         handleSelect(item) {
            this.$emit('select', item)
         },
         handleSearch(event) {
            this.$emit('search', event.detail.value)
         }
      }
   }
</script>

<style scoped>
   .mask_area {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
   }

   .content_area {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 60vh;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: dialog-fade-in 0.3s;
   }

   .search_area {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80rpx;
      background-color: #f9f9f9;
      border-radius: 40rpx;
      margin-top: 20rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
   }

   .search_icon {
      width: 40rpx;
      height: 40rpx;
      margin: 0 15rpx 0 10rpx;
   }

   .list_area {
      width: 95%;
      height: 80%;
      margin-top: 20rpx;
   }

   .list_item {
      padding: 20rpx;
      border-bottom: 1px solid #f5f5f5
   }

   @keyframes dialog-fade-in {
      0% {
         transform: translate3d(0, 100%, 0);
      }

      100% {
         transform: translate3d(0, 0, 0);
      }
   }
</style>