quasar使用问题感受记录

1. 在实践中，在<q-item-section>中<q-item-label>中用col-2，col布局总是不能按照预期工作，应该是这些元素的class如q-item__label，q-item__section等本身有布局的一些属性，所以与col这些class有些冲突.其实解决很简单，q-item-label里不用加入col这些布局的class，用lines控制布局，可以定义line-height的css

2. 下面这代码，<q-btn> 链接打开后台redirect到京东的网址，会报跨域的错，但是能正确在新tab打开网页

               <div class="col-md col-sm">
                  <q-btn
                    v-if="isTaoPwd == false"
                    target="_blank"
                    color="accent"
                    text-color="white"
                    :size="buttonSize"
                    type="a"
                    :href="`${host}/goods/go/${detail.urlCode}`"
                    unelevated
                    @click="buyClick(detail.urlCode, detail.goodsInfoUrl)"
                  >
                    去购买
                  </q-btn>

报错：

Access to XMLHttpRequest at 'https://union-click.jd.com/jdc?e=&p=AyIGZRhaFwYTBFQbUhEyEgJVGFkWCiJDCkMFSjJLQhBaGR4cDF8QTwcKWUcYB0UHCwIXB1YZWB0dS0IJRmtqdVpuEx8AbGFiRz5eUhZ2UWJRUCl1Dh43UBtaFAMaB10fXSUCEwZWGV4RARoHZStbFDJQaRNLBENEQlgDBwBAASIGZRtcFQsWD1ASWBIGFwFlG1MRMllcDE0SJTIiBGUraxUyETcLdVpGAkIOARlTe1hNXQhBAhdKfAVUGF0XBRoAZRlaFAAQ' (redirected from 'http://localhost:8238/goods/go/c216ZG0zMDQ3NjkxNQ==') from origin 'http://localhost:8082' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

createError.js?688b:16 Uncaught (in promise) Error: Network Error
at createError (createError.js?688b:16)
at XMLHttpRequest.handleError (xhr.js?e38e:91)

但如果改成下面就不会报错

               <div class="col-md col-sm">
                  <q-btn
                    color="accent"
                    :size="buttonSize"
                    unelevated
                    @click="buyClick(detail.goodsInfoUrl)"
                  >
                    <a
                      target="_blank"
                      class="text-white text-weight-bold"
                      :href="`${host}/goods/go/${detail.urlCode}`"
                    >
                      去购买</a
                    >
                  </q-btn>
                </div>

看来原生<a>l链接过去不是ajax，而a类型的<q-btn>却是ajax类型的，从chrome的开发者工具上看点击时原tab页下多了一个请求这个请求的initiotar是xhr.js?e38e

https://union-click.jd.com/jdc?e=&p=AyIGZRhaFwYTBFQbUhEyEgJVGFkWCiJDCkMFSjJLQhBaGR4cDF8QTwcKWUcYB0UHCwIXB1YZWB0dS0IJRmtqdVpuEx8AbGFiRz5eUhZ2UWJRUCl1Dh43UBtaFAMaB10fXSUCEwZWGV4RARoHZStbFDJQaRNLBENEQlgDBwBAASIGZRtcFQsWD1ASWBIGFwFlG1MRMllcDE0SJTIiBGUraxUyETcLdVpGAkIOARlTe1hNXQhBAhdKfAVUGF0XBRoAZRlaFAAQ

 ========================

以上原因分析错误，多出来的那个ajax请求是下面js发的，因为判断错误所以发了，所以用a类型的<q-btn>没问题

 

3. infinite-scroll这个控件，scroll-target的用法看文档可以是

CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
Examples
:scroll-target="$refs.scrollTarget"scroll-target=".scroll-target-class"scroll-target="#scroll-target-id"scroll-target="body"

但实际做的时候 :scroll-target="$refs.scrollTarget" 这种形式报错：

vue.runtime.esm.js?5593:1888 TypeError: this.__scrollTarget.addEventListener is not a function
    at VueComponent.updateScrollTarget (QInfiniteScroll.js?ef35:149:1)
    at VueComponent.scrollTarget (QInfiniteScroll.js?ef35:56:1)
    at Watcher.run (vue.runtime.esm.js?5593:4568:1)
    at flushSchedulerQueue (vue.runtime.esm.js?5593:4310:1)
    at Array.eval (vue.runtime.esm.js?5593:1980:1)
    at flushCallbacks (vue.runtime.esm.js?5593:1906:1)

改成 scroll-target="#scroll-target-id"就没问题，不知道是target是个qList的原因还是啥，下面代码报错

      <q-list
        id="scroll-target-id"
        v-for="item in listData"
        v-bind:key="item.id"
        class="bg-secondary"
        ref="scrollTargetRef"
      >
        <!-- 这里q-item 不加to，因为加上to会导致pc端整个变成可点击 -->
        <q-item
          v-ripple
          v-bind:class="[itemPadding]"
          :clickable="clickable"
          @click="itemClick(item.urlCode)"
        >

      。。。
         </q-list> 
    <q-infinite-scroll
      @load="onLoad"
      :offset="100"
      :initial-index="1"
      :scroll-target="$refs.scrollTargetRef"
      class="lt-sm"
    >
      <template v-slot:loading>
        <div class="row justify-center q-my-md">
          <q-spinner-dots color="accent" size="40px"></q-spinner-dots>
        </div>
      </template>
    </q-infinite-scroll>

改成下面这样就可以了，可能是控件有点问题。

    <q-infinite-scroll
      @load="onLoad"
      :offset="100"
      :initial-index="1"
      scroll-target="#scroll-target-id"
      class="lt-sm"
    >
      <template v-slot:loading>
        <div class="row justify-center q-my-md">
          <q-spinner-dots color="accent" size="40px"></q-spinner-dots>
        </div>
      </template>
    </q-infinite-scroll>