vivo-ui
Version:
vivo ui component lib for vue
66 lines (64 loc) • 2.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="../../dist/lib.js"></script>
<script>
(function () {
var scale = 1,
meta = document.querySelector('meta[name=viewport]')
!meta && (meta = document.createElement('meta'))
meta.setAttribute('name', 'viewport')
meta.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no')
document.head.appendChild(meta)
//设置rem，当调整系统或者浏览器字体大小时，html元素的默认字体大小也会相应变化
originalHtmlFontSize = parseFloat(getComputedStyle(document.documentElement, null).fontSize)
document.documentElement.style.fontSize = document.documentElement.clientWidth * 1000 / (108 * originalHtmlFontSize) + '%'
}())
</script>
<style>
.line {
font-size: .4rem;
}
</style>
</head>
<body>
<div id="content">
<div class="line">
禁用<input type="checkbox" v-model="disabled">
</div>
<div class="line">
阻止切换<input type="checkbox" v-model="prevent">
</div>
<v-switch v-model="value" :image="image" :disabled="disabled" :prevent="prevent" @click="click"
@change="change"></v-switch>
</div>
<script>
VUI.toolType('responsive', 768)
var vm = new Vue({
el: '#content',
data: {
value: false,
disabled: false,
prevent: false,
image: ['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1867698083,1429793695&fm=27&gp=0.jpg', 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=307303917,2423907447&fm=27&gp=0.jpg']
},
methods: {
click(value) {
this.prevent && setTimeout(() => {
this.value = !value
}, 1000)
},
change(value) {
console.log(value)
}
},
components: {
VSwitch: VUI.Switch
}
})
</script>
</body>
</html>