iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列 第 20

[Day 20] Vue Quasar 表單元件 9 - Knob (旋轉鈕?)

不知不覺就20天啦,感覺又回到了國高中的年代,每天都有作業要寫~有時候下班累得要死,還是要趕一篇出來 xD。文章寫到這個階段,整個框架的元件也都快介紹完了呢,不知道大家覺得這個框架是否還ok呢?

能夠選轉的旋轉鈕

Knob

實在是不知道要怎樣對這個功能下標題XD

這個元件平常好像也不太會用到

就當作是假日輕鬆看吧~
https://ithelp.ithome.com.tw/upload/images/20181103/201118056NSb8XRKtO.png
https://ithelp.ithome.com.tw/upload/images/20181103/20111805UptjCh83F4.png

引入元件

framework: {
  components: ['QKnob']
}

基本實作

可以夾icon文字等等在裡面

<q-knob
  v-model="model"
  :min="0"
  :max="25"
>
  <q-icon class="q-mr-xs" name="volume_up" /> {{ model }}
</q-knob>

屬性

  • size

    調整元件的大小,預設120px

  • step

    數值的間距,突然回想起了vb... XD

  • decimals

    小數點顯示的位數

  • min、max

    最小值跟最大值

  • color、track-color

    顏色跟未到達的旋轉軸顏色

  • line-width

    線條的寬度,預設6px

事件

  • @input(val) 改變時立即觸發
  • @change(val) 改變時觸發
  • @drag-value(val) 拖動時就會觸發

今天就這樣吧 ~ 假日輕鬆學


上一篇
[Day 19] Vue Quasar 表單元件 8 - Editor (文章編輯)
下一篇
[Day 21] Vue Quasar 彈跳視窗 1 - Action Sheet
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言