上下文菜单&处理后退按钮&拉下来刷新&自动完成&滑块

上下文菜单

基本用法:
<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 />
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。