Qing 发布的文章

首先输入安装代码

npm i element-ui -S

接下来创建一个启动文件,输入

quasar new boot element

接下来在boot里的element.js输入

import ElementUI from 'element-ui';
import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

在quasar.conf.js的boot里输入'boot'

以上为老生从谈,接下来我们试试按需加载

首先输入命令

npm install babel-plugin-component -D

然后babel.config.js输入以下代码

  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

接下来在element按需加载

import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.use(Button)

GM_xmlhttpRequest将生成一个xmlHttpRequest.

属性细节

  • method GET, HEAD, POST其中一个
  • url 目标URL
  • headers 例如user-agent, referer等等(Safari和Android浏览器一些特殊的headers是不支持的)
  • data 在post请求的时候发送一些字符串
  • cookie 附加一些额外的cookie到原本的cookie中
  • binary 以二进制模式发送data字符串
  • nocache 不缓存资源
  • revalidate 重新验证缓存资源
  • timeout 超时时间(ms)
  • context 将添加到响应对象的属性
  • responseType 期望的返回类型,通常为arraybuffer, blob, json之一
  • overrideMimeType 指定一个MIME类型用于替代服务器指定的类型
  • anonymous 匿名模式,不随请求发送cooki
  • fetch (测试)使用fetch api代替xhr,在chorme这会导致xhr.abort,details,timeout,xhr.onprogress不工作和导致xhr.onreadystatechange仅接收readyState4事件
  • username 用于身份验证的用户名
  • password 密码
  • onabort 如果请求中止则回调此函数
  • onerror 如果请求发生错误则回调此函数
  • onloadstart如果请求开始加载则回调此函数
  • onprogress 如果请求有了一些新的进度则回调此函数
  • onreadystatechange 如果请求的readyState 发生变化则回调此函数(readyState 是一个无符号的整型数字,代表请求的状态码)
  • ontimeout 如果请求超时则回调此函数
  • onload 如果请求完毕则回调此函数

执行上述函数会得到以下属性的参数:

  • finalUrl -从加载的位置进行重定向后的最终URL
  • readyState - 请求状态码
  • status - 请求响应的状态
  • statusText - 请求状态的文本
  • responseHeaders - 请求返回的heades
  • response - 返回数据作为对象,如果响应类型已经设置
  • responseXML - 返回的数据作为xml
  • responseText - 返回的数据作为纯字符串

返回具有以下属性的对象:

  • abort - 调用取消此请求的函数

提醒:不支持details对象的synchronous标志

重要如果你想调用此方法请查看[@connect]的文档(https://www.tampermonkey.net/documentation.php#_connect).

在外部添加一个QField

              <q-field
                ref="toggle"
                :value="AgreeRadio"
                :rules="[
                  val => (val == true) || 'RadioText'
                ]"
                borderless
                dense
              >
                <template v-slot:control>
                  <q-checkbox
                    v-model="AgreeRadio"
                    label="RadioText"
                  />
                </template>
              </q-field>   

首先输入安装代码

npm i element-ui -S

接下来创建一个启动文件,输入

quasar new boot element

接下来在boot里的element.js输入

import ElementUI from 'element-ui';
import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

在quasar.conf.js的boot里输入'boot'

以上为老生从谈,接下来我们试试按需加载

首先输入命令

npm install babel-plugin-component -D

然后babel.config.js输入以下代码

  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

接下来在element按需加载

import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.use(Button)

问题复现

这时div并没有占满

075709rbzi60jm0fcfbboc.png
081144ocz8zqgi3jaqz8ik.png

问题分析

这里是本人参考网络资料得出的结论,由于编程和英语能力薄弱可能存在问题,希望大佬们多多指教

博客大概得出的结论咋https://bbs.tampermonkey.net.cn/thread-205-1-1.html

这里的问题是body没有高度,所以现在的代码图是

075938uzrb99in7e4g769i.png

根据w3c手册所述

percentage

Specifies a percentage height. The percentage is calculated with respect
to the height of the generated box's containing block. If the height of
the containing block is not specified explicitly and this element is
not absolutely positioned, the value computes to auto.

auto

The height depends on the values of other properties.

百分比

如果指定高度百分比。则百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度,并且此元素未绝对定位,则该值将计算为“auto”。

自动

高度取决于其他属性的值。

我们flex-grow无法生效因为这个问题

div虽然设定了100%的高度,由于body没有设定高度,所以div变成了height:auto

080233f1jbr5ps4ip3z5sj.png

所以这时div的高度是块内所有高度的高度,而body就是div的高度

引入flex布局

那flex布局是为什么?

设置flex-basis又为什么好使?

flex-basis: auto 表示项目的本来大小,当设置为 auto 时会根据主轴方向检索该 flex-item 的 width 或 height 值作为 flex-basis 的值。如果 width 或 height 值为 auto,则 flex-basis 设置为 content,也就是基于 flex 的元素的内容自动调整大小。

flex-basis: 0 相当于指定了宽度或高度(由主轴方向决定)为 0。

当我们只设置flex-grow:1的时候

flex-basis为auto

会以内部元素的高度作为大小

而内部元素设置为了height:100%,变成了height:auto ,以内部元素内的内容作为高度

而设置了flex-basis为0的时候

指定了高度为0,此时的flex-grow自动占满空间

内部元素的height:100%会跟随上级的flex空间自动占满

这个bug是早期Firefox和Chorme都有存在,现在只有苹果的浏览器存在了,原因是因为严格遵守W3C标准

由于本人技术薄弱,可能存在有事实的出入,如果文章存在事实性错误希望大佬多多指教