support Switch
support Switch
This commit is contained in:
parent
e31ab8ad7e
commit
2d5ba27837
7 changed files with 41 additions and 31 deletions
|
@ -21,6 +21,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/checkbox">Checkbox</router-link></li>
|
||||
<li><router-link to="/steps">Steps</router-link></li>
|
||||
<li><router-link to="/timeline">Timeline</router-link></li>
|
||||
<li><router-link to="/switch">Switch</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
@ -48,6 +48,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/timeline',
|
||||
component: require('./routers/timeline.vue')
|
||||
},
|
||||
{
|
||||
path: '/switch',
|
||||
component: require('./routers/switch.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
@ -1,33 +1,23 @@
|
|||
<template>
|
||||
<Switch @on-change="change"></Switch>
|
||||
<Switch>
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</Switch>
|
||||
<Switch size="large">
|
||||
<span slot="open">ON</span>
|
||||
<span slot="close">OFF</span>
|
||||
</Switch>
|
||||
<Switch>
|
||||
<Icon type="android-done" slot="open"></Icon>
|
||||
<Icon type="android-close" slot="close"></Icon>
|
||||
</Switch>
|
||||
<Switch :disabled="disabled"></Switch>
|
||||
<i-button type="primary" @click="disabled = !disabled">Toggle Disabled</i-button>
|
||||
<Switch size="small"></Switch>
|
||||
<div>
|
||||
<i-switch v-model="m1">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
{{ m1 }}
|
||||
<div @click="m1 = !m1">toggle</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Switch, Message, iButton, Icon } from 'iview';
|
||||
export default {
|
||||
components: { Switch, Message, iButton, Icon },
|
||||
data () {
|
||||
return {
|
||||
disabled: true
|
||||
m1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (status) {
|
||||
Message.info('开关状态:' + status);
|
||||
console.log(status)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue