-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.vue
162 lines (152 loc) · 7.01 KB
/
test.vue
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<template>
<div id="app" style="min-height:400px">
<table width="100%" height="100%" style="min-height:100%" cellpadding="5" border="0" >
<tr valign="top">
<td>
<vuetipster @shown="shown" @hidden="hidden" title="persist on me!" content="mouse hover me and i won't hide" :keep_on_over="popup_keep_on_over">
<button >hover with persistence</button>
</vuetipster>
</td>
<td>
<br /><br /><br />
<vuetipster title="simple" placement="right" :content="popup_content">
<button >i have a tooltip</button>
</vuetipster>
<br />
<vuetipster placement="bottom-right">
<button>with all slots</button>
<template v-slot:title>
<h1>Heading h1</h1>
</template>
<template v-slot:content>
<ul>
<li>with</li>
<li>html</li>
<li>content</li>
</ul>
</template>
<template v-slot:footer>
<footer>original footer</footer>
</template>
</vuetipster>
</td>
<td>
<vuetipster :header_bg_color='header_bg_color' ref="manual_popper" :title="popup_title" :content="popup_content_html" :manual="popup_manual">
<button >manual - someone else controls me</button>
</vuetipster>
<button @click="$refs['manual_popper'].show()">show</button>
<button @click="$refs['manual_popper'].hide()">hide</button>
<button @click='header_bg_color="pink"'>set pink header</button>
</td>
</tr>
<tr valign="middle">
<td>
<vuetipster :title="popup_title" :content="popup_content">
<button name="hithere">i have a tooltip</button>
</vuetipster>
</td>
<td>
<br /><br /><br />
<button @click="$refs['notifier'].show()">show notification</button>
<button @click="$refs['notifier_hover'].show();">show notification with keep on hover</button>
<button @click="$refs['notifier_click'].show()">show notification and close on click</button>
<br />
<button @click="$refs['notifier_permanent'].show()">permament notification</button>
<vuetipster ref="notifier" type="notification" title="i will notify" content="i will be your permanent notifier" placement="top-right">
</vuetipster>
<vuetipster ref="notifier_hover" placement="bottom" :keep_on_over="popup_keep_on_over" type="notification" title="i will notify" content="i will be your permanent notifier and wont <br />close if you hover me"></vuetipster>
<vuetipster ref="notifier_click" :close_on_click="popup_keep_on_over" placement="bottom-right" type="notification" title="i will notify" content="close me with a click :("></vuetipster>
<vuetipster :min_width="'400px'" ref="notifier_permanent" :backdrop="true" :backdrop_closable="true" :backdrop_bg_color="'rgba(0,0,0,0.5)'" :closable="true" placement="center" :manual="true" type="notification">
<template v-slot:title>
Please confirm
</template>
<template v-slot:content>
<p>do you like apples?</p>
</template>
<template v-slot:footer>
<div style="text-align:right"><button @click="$refs['notifier_permanent'].hide()">yes</button><button>no</button></div>
</template>
</vuetipster>
</td>
<td>
</td>
</tr>
<tr valign="bottom">
<td>
<br /><br /><br /><br /><br /><br />
<vuetipster :title="popup_title" :content="popup_content">
<button name="hithere">i have a tooltip</button>
</vuetipster>
</td>
<td>
<button id="target_button">with target</button>
<vuetipster placement='bottom-left' ref="popup-program" :title="popup_title" :content="popup_content_html" target="#target_button"></vuetipster>
<button @click="showPopup">show</button>
<button @click="hidePopup">hide</button>
</td>
<td>
<button id="target_button1" >1st target</button>
<button @click="popup_target='#target_button1'">choose me</button>
<br /><br />
<button id="target_button2" >2nd target</button>
<button @click="popup_target='#target_button2'">choose me</button>
<vuetipster placement="left" :target="popup_target" title="dynamic" content="i change buttons as i wish"></vuetipster>
<button @click="tipster_visible=!tipster_visible">toggle</button>
<vuetipster content="ola kala" v-if="tipster_visible">
<button>tooltip dynamic</button>
</vuetipster>
</td>
</tr>
</table>
</div>
</template>
<script>
import vuetipster from './vue-tipster.vue'
export default{
components:{
'vuetipster':vuetipster
},
data(){
return {
header_bg_color:'blue',
tipster_visible:false,
popup_keep_on_over:true,
popup_manual:true,
popup_target:'#target_button1',
popup_title:"ninja title",
popup_content:"i am the popup content",
popup_content_html:"<h3>i have <strong>html</strong> very very <i>strong</i><br/>Let's what we are going to do</h3>"
}
},
methods:{
showPopup(){
this.$refs['popup-program'].show();
},
hidePopup(){
this.$refs['popup-program'].hide();
},
shown(){
console.log('shown callback')
},
hidden(){
console.log('hidden callback');
}
},
mounted(){
}
}
</script>
<style >
h1, h2, h3{
margin:0;padding:0;
}
</style>