TODO#129877 嚴選配對-所在地區元件 (vue-scroll-picker)

Mila

2021-11-08 d580f29634971b282b06b5760d2c633907058b45

TODO#129877 嚴選配對-所在地區元件 (vue-scroll-picker)

 PAMapp/assets/scss/_common.scss

@@ -8,10 +8,6 @@
    scroll-behavior: smooth;
}

h5 {
    margin: 0;
}

// btn
.btn {
    padding: 10px 20px;
@@ -61,4 +57,25 @@
        border-bottom: solid 3px $PRIMARY_BLACK;

    }
}

.vue-scroll-picker {
    height: 250px;

    .vue-scroll-picker-list-rotator {
         .vue-scroll-picker-item {
              font-size: 20px;
              padding: 5px 0;
         }
    }

    .vue-scroll-picker-layer {
         .top {
             height: calc(50% - 1.2em);
         }
         .bottom {
            height: calc(50% - 1.2em);
         }
    }

}

 PAMapp/components/AddressPicker.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,48 @@
<template>
    <div class="text--center">
        <div class="subTitle mb-10">所在地區</div>
        <el-input
            type="text"
            class="p mt-10"
            v-model="keyWord"
            @change="searchDistrict"
            placeholder="請輸入關鍵字"
        ></el-input>
       <Ui-ScrollPicker
            :options="filterOptions"
            :initValue="district"
            @change="change"
        ></Ui-ScrollPicker>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';

@Component
export default class AddressPicker extends Vue {

    options = ['基隆市', '台北市', '新北市', '桃園縣', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣'];
    keyWord = '';
    filterOptions: string[] = [];
    district = '台北市';

    mounted() {
        this.filterOptions = JSON.parse(JSON.stringify(this.options));
    }

    searchDistrict() {
        this.filterOptions = this.options.filter(e => e.match(this.keyWord));
    }

    change(value: string) {
        console.log('change', value)
    }
}
</script>

<style lang="scss" scoped>
    .cus-input {
        font-size: 20px;
    }
</style>

 PAMapp/components/Ui/UiDialog.vue

@@ -4,7 +4,7 @@
            title=""
            :visible.sync="dialogVisible"
            :width="width"
            @close="close"
            @close="closeDialog"
        >
            <slot></slot>
        </el-dialog>
@@ -21,10 +21,6 @@

    @Emit('closeDialog') closeDialog() {
        return;
    }

    close() {
        this.closeDialog();
    }
}
</script>

 PAMapp/components/Ui/UiDrawer.vue

@@ -4,7 +4,7 @@
            :size="size"
            :visible.sync="drawerVisible"
            :direction="'btt'"
            @close="close"
            @close="closeDrawer"
        >
            <div class="close" @click="drawerVisible = false"></div>
            <slot></slot>
@@ -22,10 +22,6 @@

    @Emit('closeDrawer') closeDrawer() {
        return;
    }

    close() {
        this.closeDrawer();
    }
}
</script>

 PAMapp/components/Ui/UiScrollPicker.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,25 @@
<template>
     <Scroll-Picker
          @input="selValue"
          :options="options"
          empty="無篩選結果"
          :value="initValue"
     ></Scroll-Picker>
</template>

<script lang='ts'>
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';

@Component
export default class UiScrollPicker extends Vue {
     // https://reposhub.com/vuejs/form-input/wan2land-vue-scroll-picker.html

     @Prop() options!: string[];
     @Prop() initValue!: string;

     @Emit('change') selValue(value: string) {
          return value
     }

}
</script>

 PAMapp/components/Ui/UiTags.vue

@@ -20,8 +20,5 @@
        return;
    }

    remove() {
        this.removeTag();
    }
}
</script>

 PAMapp/nuxt.config.js

@@ -26,6 +26,7 @@
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'swiper/css/swiper.css',
    'vue-scroll-picker/dist/style.css',
    '~/assets/scss/main.scss',
  ],

@@ -33,7 +34,8 @@
  plugins: [
    '~/plugins/element-ui.js',
    { src: '~/plugins/vue-awesome-swiper.js', mode: 'client' },
    '~/plugins/service.ts'
    '~/plugins/service.ts',
    '~/plugins/vue-scroll-picker'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components

 PAMapp/package.json

@@ -18,7 +18,8 @@
    "nuxt": "^2.15.8",
    "nuxt-property-decorator": "^2.9.1",
    "swiper": "^5.4.5",
    "vue-awesome-swiper": "^4.1.1"
    "vue-awesome-swiper": "^4.1.1",
    "vue-scroll-picker": "0.8.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",

 PAMapp/plugins/vue-scroll-picker.js

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,4 @@
import Vue from "vue"
import VueScrollPicker from "vue-scroll-picker"

Vue.use(VueScrollPicker)