File size: 1,385 Bytes
78185c4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!--
Matomo - free/libre analytics platform
@link https://matomo.org
@license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->
<template>
<div class="example-component">
<button v-on:click="decrement">-</button>
{{ count }}
<button v-on:click="increment">+</button>
<MatomoDialog v-model="showDialog">
<div class="ui-confirm exampleDialog">
<h2>Alert</h2>
<p>
The count is greater than 15 right now!
</p>
<input type="button" value="OK" role="yes"/>
</div>
</MatomoDialog>
</div>
</template>
<style lang="less" scoped>
.example-component {
display: flex;
justify-content: center;
align-items: center;
button {
background-color: indigo;
color: white;
margin: 8px;
}
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';
import { MatomoDialog } from 'CoreHome';
interface ExampleComponentState {
count: number;
showDialog: boolean;
}
export default defineComponent({
components: {
MatomoDialog,
},
data(): ExampleComponentState {
return {
count: 12,
showDialog: false,
};
},
methods: {
increment() {
this.count += 1;
this.showDialog = this.count > 15;
},
decrement() {
this.count -= 1;
this.showDialog = this.count > 15;
},
},
});
</script>
|