vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed confirm popup docs

pull/827/head
Cagatay Civici 2020-12-23 16:41:35 +03:00
parent 10bbf2c681
commit 0d03efef10
1 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/confirmpopup/ConfirmPopupDoc.vue
View File

@ -31,20 +31,22 @@ import ConfirmPopup from 'primevue/confirmpopup';
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup.</p> <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup.
<i>target</i> attribute is mandatory to align the popup to its caller.</p>
<pre v-code> <pre v-code>
<code> <code>
&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt; &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
&lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt; &lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
</code></pre> </code></pre>
<pre v-code.script> <pre v-code.script>
<code> <code>
export default { export default {
methods: { methods: {
delete() { delete(event) {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
accept: () => { accept: () => {
@ -70,16 +72,21 @@ import { useConfirm } from "primevue/useconfirm";
export default defineComponent({ export default defineComponent({
setup() { setup() {
const confirm = useConfirm(); const confirm = useConfirm();
confirm.require({
message: 'Are you sure you want to proceed?', function delete(event) {
icon: 'pi pi-exclamation-triangle', confirm.require({
accept: () => { message: 'Are you sure you want to proceed?',
//callback to execute when user confirms the action icon: 'pi pi-exclamation-triangle',
}, accept: () => {
reject: () => { //callback to execute when user confirms the action
//callback to execute when user rejects the action },
} reject: () => {
}); //callback to execute when user rejects the action
}
});
}
return {delete};
} }
}) })
@ -112,6 +119,12 @@ export default {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>target</td>
<td>DomElement</td>
<td>null</td>
<td>Element to align the overlay.</td>
</tr>
<tr> <tr>
<td>message</td> <td>message</td>
<td>string</td> <td>string</td>
@ -263,8 +276,9 @@ export default {
<code> <code>
export default { export default {
methods: { methods: {
confirm1() { confirm1(event) {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
accept: () => { accept: () => {
@ -275,8 +289,9 @@ export default {
} }
}); });
}, },
confirm2() { confirm2(event) {
this.$confirm.require({ this.$confirm.require({
target: event.currentTarget,
message: 'Do you want to delete this record?', message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle', icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger', acceptClass: 'p-button-danger',