vivo-ui
Version:
vivo ui component lib for vue
75 lines (72 loc) • 2.25 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
var 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元素的默认字体大小也会相应变化
function setRem () {
document.documentElement.style.fontSize = '100%'
originalHtmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
document.documentElement.style.fontSize = document.documentElement.clientWidth * 1000 / (108 * originalHtmlFontSize) + '%'
}
setRem()
window.addEventListener('resize', setRem)
}())
</script>
<style>
body {
font-size: medium;
}
</style>
</head>
<body>
<div id="content">
切换成不同组件类型，然后改变浏览器窗口大小，查看对话框变化
<div>
组件类型：
<input type="radio" name="type" value="pc" v-model="type">pc
<input type="radio" name="type" value="wap" v-model="type">wap
<input type="radio" name="type" value="responsive" v-model="type">responsive
</div>
<button @click="show=!show">显示dialog</button>
<vivo-dialog :close="true" title="这是标题" v-model="show" @btn-click="close">
这是内容
</vivo-dialog>
</div>
<script>
var vm = new Vue({
el: '#content',
data: {
show: false,
type: 'responsive'
},
watch: {
type: {
handler: function () {
VUI.toolType(this.type)
},
immediate: true
}
},
methods: {
close() {
this.show = false
}
},
components: {
VivoDialog: VUI.Dialog
}
})
</script>
</body>
</html>