JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
<i-switch size="large" on-change="onChange">
<span slot="open">开启</span>
<span slot="close">关闭</span>
</i-switch>
<i-switch size="large" @change="onSwitchChange">
<span slot="open">ON</span>
<span slot="close">OFF</span>
</i-switch>
</div>
SCSS
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}
Babel + JSX
var Main = {
data() {
return {
isGet: true,
};
},
methods: {
onChange: function () {
alert(`switch ???`);
},
onSwitchChange: function () {
alert(`switch ???`);
this.isGet = !this.isGet;
},
}
};
var Component = Vue.extend(Main);
new Component().$mount('#app');