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>没问题