<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
import { pvButton } from 'https://unpkg.com/petite-vue-ui'
createApp({
pvButton
}).mount()
</script>
<span v-scope="pvButton()"></span>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
import { pvButton } from 'https://unpkg.com/petite-vue-ui'
const pvButtonConfig = {
slot: 'Love from pv-ui',
type: 'success',
border: 'round',
icon: 'pv-icon-like',
click: 'pvButtonClick'
}
createApp({
pvButton,
pvButtonConfig,
pvButtonClick() {
console.log(`Love from pv-ui :\)`)
}
}).mount()
</script>
<span v-scope="pvButton(pvButtonConfig)"></span>
<script type="module">
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
import { pvButton, pvDialog } from 'https://unpkg.com/petite-vue-ui'
const visible = reactive({
value: false,
dialogShow() {
this.value = true
}
})
const pvButtonConfig = {
slot: 'open Dialog',
type: 'primary',
border: 'round',
icon: 'pv-icon-respond',
click: 'visible.dialogShow'
}
const pvDialogConfig = {
visible: 'visible.value',
bodySlot: 'Hello petite-vue-ui',
close: 'handleClose'
}
const handleClose = () => {
console.log('Dialog is closed')
}
createApp({
pvButton,
pvDialog,
pvButtonConfig,
pvDialogConfig,
handleClose,
visible
}).mount()
</script>
<span v-scope="pvButton(pvButtonConfig)"></span>
<div v-scope="pvDialog(pvDialogConfig)"></div>
<script type="module">
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
import { pvInput } from 'https://unpkg.com/petite-vue-ui'
const msg = reactive({
value: 'Love&&Peace'
})
const pvInputConfig = {
autofocus: true,
clearable: true,
placeholder: ':) to you',
icon: 'pv-icon-search',
Vmodel: 'msg.value',
input: 'isInput'
}
const isInput = () => {
console.log(msg.value)
}
createApp({
pvInput,
pvInputConfig,
msg,
isInput
}).mount()
</script>
<div v-scope>
<div v-scope="pvInput(pvInputConfig)"></div>
<div>inputValue:{{msg.value}}<div>
</div>