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>沒問題