Quasar 学习笔记

安你今天学习了吗
484 阅读2分钟

Quasar 学习笔记

vue components

1.ajax btn 请求等待按钮

在处理请求的相应时间，给用户一个过程反应，避免用户不知道程序是否正常运行。 效果就是出发一个进度条/加载条。

    <q-ajax-bar
      ref="bar"
      position="bottom"
      color="accent"
      size="10px"
      skip-hijack
    />

配置项： 1.过滤器：

:hijack-filter="myFilterFn"

使用正则进行url地址匹配 2.如果需要多次触发时间 可以写start 和 stop 然后再写start 和 stop 反复书写多次

<script>
import { ref } from 'vue'

export default {
  setup () {
    const bar = ref(null)

    // we manually trigger it (this is not needed if we
    // don't skip Ajax calls hijacking)
    function trigger () {
      const barRef = bar.value
      barRef.start()

      setTimeout(() => {
        const barRef = bar.value
        if (barRef) {
          barRef.stop()
        }
      }, Math.random() * 3000 + 1000)
    }

    return {
      bar,
      trigger
    }
  }
}
</script>

2.Avatar 头像

参数：size font-size color square round 这个是封装的头像的组件，一些圆形或者圆润的图像组件，进行使用。 注意：如果不想用圆的，使用方形 添加配置项 square/ rounded

比较有意思的头像重叠可以在这里被发现。

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-avatar color="red" text-color="white" icon="directions" />
    <q-avatar color="primary" text-color="white">J</q-avatar>
    <q-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="directions" />
    <q-avatar size="24px" color="orange">J</q-avatar>
    <q-avatar>
      <img src="https://cdn.quasar.dev/img/avatar.png">
    </q-avatar>
  </div>
</template>

image.png

<template>
  <div class="q-pa-md q-gutter-sm" style="height: 80px">
    <q-avatar
      v-for="n in 5"
      :key="n"
      size="40px"
      class="overlapping"
      :style="`left: ${n * 25}px`"
    >
      <img :src="`https://cdn.quasar.dev/img/avatar${n + 1}.jpg`">
    </q-avatar>
  </div>
</template>

<style lang="sass" scoped>
.overlapping
  border: 2px solid white
  position: absolute
</style>

image.png

3.Badge 消息提示

提示信息，用来引起用户注意的消息。 这个做消息提醒比较好用

image.png 配置项：align： top/middle/buttom 靠上 中 下显示 floating 开启表示 靠父亲元素右上角显示 color：背景颜色 round：圆形 transparent：透明开启

  <div class="text-h6">
      Badge <q-badge color="primary">v1.0.0+</q-badge>
    </div>

image.png

4.Banner 信息条

消息条 用来提示用户消息

  <q-banner class="bg-primary text-white">
      Unfortunately, the credit card did not go through, please try again.
      <template v-slot:action>
        <q-btn flat color="white" label="Dismiss" />
        <q-btn flat color="white" label="Update Credit Card" />
      </template>
    </q-banner>

image.png

5.Bar 顶部状态栏

做app用的 暂时用不到

6.Breadcrumbs 面包屑导航条

配置项：separator：用来配置 /(默认) ‘----’ gutter：元素空间 align：水平对齐方式 to:跳转页面

  <q-breadcrumbs>
      <q-breadcrumbs-el label="Home" icon="home" />
      <q-breadcrumbs-el label="Components" icon="widgets" />
      <q-breadcrumbs-el label="Breadcrumbs" />
    </q-breadcrumbs>

image.png

7.button 按钮

这个各种按钮样式需要的是来来看，写不完 包含 大小 颜色 形状 个性化

8.button-ground 按钮组

<q-btn-group push>
      <q-btn push label="First" icon="timeline" />
      <q-btn push label="Second" icon="visibility" />
      <q-btn push label="Third" icon="update" />
    </q-btn-group>

9.Dropdown Button 下拉菜单

q-btn-dropdown - q-list - q-item - q-item-section

<q-btn-dropdown color="primary" label="Dropdown Button">
      <q-list>
        <q-item clickable v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Photos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Videos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Articles</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>

10.Card 卡片样式

 <q-card class="my-card">
      <img src="https://cdn.quasar.dev/img/mountains.jpg">

      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        {{ lorem }}
      </q-card-section>
    </q-card>

image.png

11.Carousel 轮播图 ***

如果需要一个无线轮播图 加上 轮播按钮样式 加上放大轮播

<template>
  <div class="q-pa-md">
    <q-carousel
      swipeable
      animated
      arrows
      v-model="slide"
      v-model:fullscreen="fullscreen"
      infinite
    >
      <q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
      <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
      <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
      <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />

      <template v-slot:control>
        <q-carousel-control
          position="bottom-right"
          :offset="[18, 18]"
        >
          <q-btn
            push round dense color="white" text-color="primary"
            :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
            @click="fullscreen = !fullscreen"
          />
        </q-carousel-control>
      </template>
    </q-carousel>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      slide: ref(1),
      fullscreen: ref(false)
    }
  }
}
</script>

image.png

来看一下配置项：

fullscreen：是否开启全屏模式

control-color="white" prev-icon="arrow_left" next-icon="arrow_right" navigation-icon="radio_button_unchecked" 配置前后按钮和 分页器

12.剩余

chip 颜色拾取器 圆形进度条之类的等等

dialog各种弹出框 editor 输入编辑框 Expansion Item拓展框 icon图标 Img 图片

 <q-img
      :src="url"
      spinner-color="white"
       :ratio="16/9"      
       style="height: 140px; max-width: 150px"
       spinner-color="white"

    />

Infinite Scroll 无尽滚动 有一个@load="onload" 的事件在偏移量达到250的时候触发。 然后发送网络请求获取数据，来渲染。 也可以加入reverse反转来达到向上滚动的时候刷新获取新的数据。 思考：有无下拉刷新

  <q-infinite-scroll @load="onLoad" :offset="250">
      <div v-for="(item, index) in items" :key="index" class="caption">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
      </div>
      <template v-slot:loading>
        <div class="row justify-center q-my-md">
          <q-spinner-dots color="primary" size="40px" />
        </div>
      </template>
    </q-infinite-scroll>

Inner Loading 内部等待动画 spinner

Knob 这个用来做圆形选择器比较好，可以选择得分 熟练度 准确率等等。

avatar
文章
阅读
粉丝