75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<article>
|
|
<veui-button @click="openDialog('s')">
|
|
s
|
|
</veui-button>
|
|
<veui-button @click="openDialog('m')">
|
|
m
|
|
</veui-button>
|
|
<veui-button @click="openDialog('narrow')">
|
|
narrow
|
|
</veui-button>
|
|
<veui-button @click="openDialog('medium')">
|
|
medium
|
|
</veui-button>
|
|
<veui-button @click="openDialog('wide')">
|
|
wide
|
|
</veui-button>
|
|
<veui-button @click="openDialog('fullscreen')">
|
|
fullscreen
|
|
</veui-button>
|
|
<veui-button @click="openDialog('auto')">
|
|
auto
|
|
</veui-button>
|
|
<veui-dialog
|
|
title="System"
|
|
:ui="ui"
|
|
:open.sync="open"
|
|
>
|
|
<p>Current UI: "{{ ui }}"</p>
|
|
<p v-if="ui === 's' || ui === 'm'">
|
|
<veui-button>Button size: {{ ui }}</veui-button>
|
|
<veui-switch>{{ ui }}</veui-switch>
|
|
</p>
|
|
</veui-dialog>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import { Dialog, Button, Switch } from 'veui'
|
|
|
|
export default {
|
|
components: {
|
|
'veui-dialog': Dialog,
|
|
'veui-button': Button,
|
|
'veui-switch': Switch
|
|
},
|
|
data () {
|
|
return {
|
|
open: false,
|
|
ui: null
|
|
}
|
|
},
|
|
methods: {
|
|
openDialog (size) {
|
|
this.ui = size
|
|
this.open = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.veui-button {
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|
|
|
|
<docs>
|
|
`s` / `m` 用于指定内容的尺寸，会被继承到内部的组件上。而 `narrow` / `medium` / `wide` / `fullscreen` / `auto` 是对话框本身所占区域的大小，可以与 `s` / `m` 混合使用。
|
|
</docs>
|
|
|
|
<docs locale="en-US">
|
|
`s` / `m` are used to specify size for internal content and will be inherited by components inside the dialog. While `narrow` / `medium` / `wide` / `fullscreen` / `auto` are used to specify the dimension of the dialog itself, thus can be used together with `s` / `m`.
|
|
</docs>
|