vivo-ui
Version:
vivo ui component lib for vue
76 lines (72 loc) • 2.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="../../dist/lib.js"></script>
<style>
.box {
background: red;
line-height: 200px;
}
</style>
</head>
<body>
<div id="content">
<button @click="onclick">以插件形式显示</button>
<button @click="show=true">显示</button>
<button @click="close">关闭所有</button>
<vivo-dialog :close="true" title="这是标题" v-model="show" @btn-click="btnClick">
这是内容
</vivo-dialog>
</div>
<script>
//安装插件
Vue.use(VUI.pluginDialog)
VUI.toolType('responsive')
var vm = new Vue({
el: '#content',
data: {
show: false
},
methods: {
btnClick(type) {
console.log(type)
this.show = false
},
onclick() {
this.$vui.dialog.show({
slot: '<em>撒大噶三个大帅哥</em>',
className: 'my-dialog'
})
},
close() {
this.$vui.dialog.hide()
}
},
components: {
VivoDialog: VUI.Dialog
}
})
</script>
</body>
</html>