You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.1 KiB
54 lines
1.1 KiB
6 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<section class="demo-section">
|
||
|
|
<h4>基本用法</h4>
|
||
|
|
<div>
|
||
|
|
<x-switch v-model="checked"></x-switch>
|
||
|
|
<span>{{checked}}</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="demo-section">
|
||
|
|
<h4>禁用状态</h4>
|
||
|
|
<div>
|
||
|
|
<x-switch disabled></x-switch>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="demo-section">
|
||
|
|
<h4>文本</h4>
|
||
|
|
<div>
|
||
|
|
<x-switch v-model="checked" :text="text"></x-switch>
|
||
|
|
<span>{{checked}}</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="demo-section">
|
||
|
|
<h4>大小</h4>
|
||
|
|
<div>
|
||
|
|
<x-switch v-model="checked" size="small"></x-switch>
|
||
|
|
<x-switch v-model="checked"></x-switch>
|
||
|
|
<x-switch v-model="checked" size="large"></x-switch>
|
||
|
|
<span>{{checked}}</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { xSwitch } from '../src'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'app',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
checked: true,
|
||
|
|
text: {
|
||
|
|
on: '是',
|
||
|
|
off: '否'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: { xSwitch }
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss"></style>
|