vueパッケージカスタム無限ドロップダウンコンポーネント

  export default {
    name: "infiniteScroll",
    props: ['loading', 'domClass', 'distance', 'immediateCheck'],
    components: {},
    data() {
      return {}
    },
    mounted() {
      const myScroll = this.$refs.myScroll;
      //        
      console.debug('        ----', myScroll.clientHeight, myScroll.scrollHeight)
      if ((this.immediateCheck == undefined ? true : this.immediateCheck) && (myScroll.clientHeight <= myScroll.scrollHeight)) {
        this.$emit('loadMore',true);
      }
      // myScroll.addEventListener('scroll', ()=> {
      //     const distance =this.distance || 0
      //     if(!this.loading){
      //         if((myScroll.scrollTop + myScroll.clientHeight) == (myScroll.scrollHeight-distance)) {
      //             this.$emit('loadMore');
      //         }
      //     }
      // });
    },
    methods: {
      load() {
        const myScroll = this.$refs.myScroll;
        const distance = this.distance || 0;
        if (!this.loading) {
          if ((myScroll.scrollTop + myScroll.clientHeight) == (myScroll.scrollHeight - distance)) {
            this.$emit('loadMore');
          }
        }
      }

    }
  }

import Vue from 'vue'
import { mapState,mapGetters,mapMutations } from 'vuex'
import Heads from './Head-s.vue'
import new_order from './core/new-order.vue'
import pending_payment from './core/pending-payment.vue'
import Navigation_bar from './Navigation-bar.vue'
import Scroll from './infiniteScroll'
export default {
    name: 'Demo',
      data () {
          return {
              option:"   ",
              busy: false,
              goodslist:[
                  {
                      id:1,
                      name:"   ",
                      children:[
                          {id:"1-1",name:"   "},
                          {id:"1-2",name:"   "},
                          {id:"1-3",name:"   "},
                          {id:"1-4",name:"   "},
                          {id:"1-5",name:"    "},
                      ]
                      },
                  {
                    id:2,
                      name:"    ",
                       children:[
                          {id:"2-1",name:"    "},
                          {id:"2-2",name:"    "},
                          {id:"2-3",name:"    "},
                          {id:"2-4",name:"     "},
                          {id:"2-5",name:"    "},
                      ]
                },  
              ]
          }
      },
      components: {Heads,Navigation_bar,new_order,pending_payment, Scroll},
      methods:{
          ...mapMutations([
                'increment','decrement'
                ]),
        handleCommand(command) {
             this.$message({
                message: '    ',
                type: 'success'
                });
            if(command=='switch_account'){
                this.$message({
                    message:'    ',
                    type:'success',
                });
                sessionStorage.removeItem("user");
                this.$router.push({ path: '/login' });
            }else{
                if (confirm("       ？")){
                    this.$message({
                        message:"    ",
                        type:'success'
                    });
                    sessionStorage.removeItem("user");
                    window.opener=null;
                    window.open('','_self');
                    window.open("about:blank","_self").close();   
                    return false;
                }
            }
        },
        getParamter(){
            // alert(this.$route.params.id);
            alert(this.$route.params.id)
            // alert(this.$route.query.id)
        },
        cc(flag){
            this.option=flag
            console.info(this.option);
        },
         loadMore1(){
          console.info("    ");
            this.page += 1;
            // this.loadMore();
            console.info(this.page);
        },
      },
      computed:{
         ...mapState({
             count: state => state.count,
      })

      }
  }