zoukankan      html  css  js  c++  java
  • 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>没问题

    喜欢艺术的码农
  • 相关阅读:
    最全的C#图片处理类ImageHelper.cs
    基于Asp.net C#实现HTML转图片(网页快照)
    WebSiteThumbnail 直接根据html生成图片
    C#里面如何判断一个Object是否是某种类型
    对datatable里面的表进行排序
    spark中RDD的transformation&action
    腾讯大数据之TDW计算引擎解析——Shuffle
    什么是RDD?
    java.io.IOException: No space left on device 错误
    win7 audio repeater 虚拟声卡 屏幕录像专家
  • 原文地址:https://www.cnblogs.com/zjhgx/p/14614477.html
Copyright © 2011-2022 走看看