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

    喜欢艺术的码农
  • 相关阅读:
    SQL Server 2008 如何查看与创建约束
    Hibernate的主键生成策略
    sql server的id字段设置为自动生成的,那么该怎么写insert语句呢?
    org.hibernate.AnnotationException: Collection has neither generic type or OneToMany.targetEntity() defined: com.bjsxt.model.Student.courses
    INSERT 语句与 FOREIGN KEY 约束"XXX"冲突。该冲突发生于数据库"XXX",表"XXX", column 'XXX。
    在排序数组中查找符合条件的数
    求二叉树中节点的最大距离
    设计包含min 函数的栈
    寻找链表的倒数第K个节点
    翻转句子中单词的顺序
  • 原文地址:https://www.cnblogs.com/zjhgx/p/14614477.html
Copyright © 2011-2022 走看看