輕鬆做出一個切換鍵 Toggle

Toggle

這個元件蠻輕鬆的，簡單的true跟false作切換～

但除了一般拿來開關選項外，偶爾也會拿來控制表單顯示的內容哦～

所以就輕鬆學吧～

引入元件

/quasar.conf.js

framework: {
  components: ['QToggle']
}

基本應用

超簡單的呦～‹‹( ˙▿˙　)/››

<q-field orientation="vertical" label="是否加大（加五元）">
  <q-toggle v-model="checked"/>
</q-field>

...

<script>
	export default {
	  data () {
	    return {
	      checked: true,
	    }
	  }
	}
</script>

基本屬性

• val v-model是Array的話，會加在Array內
• true-value 如果model不是陣列，在選取時會給model值true，這個就是用來取代true的字串
• false-value 跟上面一樣，只是是用來取代false的字串
• label 要顯示的文字
• left-label 將文字顯示在選取匡的左方
• icon 若有底下兩個（checked-icon、unchecked-icon）icon 則會被覆寫掉
  

iOS底下則為

• checked-icon 替換選取中時的icon
• unchecked-icon 替換未選取時的icon
• color 元件的顏色
• keep-color 在沒觸發focus的情況也能高亮選取匡
• readonly 設成唯讀
• disable 設成禁用
• no-focus 使其無法設為焦點

基本事件

• @input(newVal) 當更改toggle的值時
• @change(newVal) 當在lazy模式更改數值時
• @blur 失去聚焦（點到其他的地方）時觸發
• @focus 聚焦（點選該元件時）時觸發

先預告一下明天的主題是Option Group哦～可以將這幾天的東西放成一個群組一起使用～