上下文菜单

基本用法：

<q-context-menu>
      <q-list link separator style="min-width: 150px; max-height: 300px;">
    <q-item v-close-overlay @click.native="showToast()">
      <q-item-main label="Label" sublabel="Value" />
</q-item>

    <q-item v-close-overlay @click.native="showOtherToast()">
      <q-item-main label="Other Label" sublabel="Other Value" />
    </q-item>
  </q-list>
</q-context-menu>

处理后退按钮

<！ - 注销按钮 - >

<q-btn v-go-back="'/'" color="amber" label="注销"/>

拉下来刷新

<q-pull-to-refresh :handler="refresher">
  <!-- Content, whatever you like -->
      <p v-for="item in items">
        Lorem ipsum dolor sit amet...
      </p>
</q-pull-to-refresh>

自动完成

<!-- Binds to parent QInput -->
<q-input color="amber" v-model="terms" placeholder="Type 'fre'">
      <q-autocomplete @search="search" :min-characters="3" @selected="selected"/>
</q-input>

<!-- Binds to parent QSearch -->
<q-search v-model="terms" placeholder="Start typing a country name">
      <q-autocomplete @search="search" @selected="selected" />
</q-search>

<!-- Adds a separator between results -->
<q-search v-model="terms">
       <q-autocomplete separator @search="search" @selected="selected" />
</q-search>

Vue属性

  min-characters:有多少最小字符可以触发组件建议某些内容？1
 max-results:一次显示多少结果6
 static-data:使用静态建议。无需进行Ajax调用。过滤由自动完成组件提供。
 filter:如果提供，自动完成将执行自定义过滤。

滑块

基本用法

 < q-slider  v-model = “selectedValue”  ：min = “1”  ：max = “7” />

方形滑块按钮示例：

< q-slider v-model = “selectedValue” ：min = “0” ：max = “10” square />