از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش ایجاد یک گفتگوی تایید در Vue.jsA گفتگوی تایید یک الگوی رابط کاربری است که در آن به کاربر این امکان داده می شود که به عمل خود ادامه دهد یا آن را لغو کند. معمولاً با اقدامات مخرب یا غیرقابل برگشت استفاده می شود تا مطمئن شود که کاربر واقعاً می خواهد ادامه دهد. در این مقاله به پیاده سازی …
سرفصلهای مطلب
معرفی
گفتگوی تایید یک الگوی رابط کاربری است که در آن به کاربر این امکان داده می‌شود که به کار خود ادامه دهد یا آن را لغو کند. معمولاً با اقدامات مخرب یا غیرقابل برگشت استفاده می شود تا مطمئن شود که کاربر واقعاً می خواهد ادامه دهد.
در این مقاله، ما یک گفتگوی تایید قابل استفاده مجدد و مدولار را در Vue.js پیاده سازی خواهیم کرد.
ایجاد یک کامپوننت پاپ آپ قابل استفاده مجدد
بیایید با ایجاد یک جزء پایه قابل استفاده مجدد برای هر نوع مولفه بازشو شروع کنیم. به این ترتیب ما مجبور نیستیم مکانیک پاپ آپ را چندین بار دوباره پیاده سازی کنیم. این می تواند بعداً برای ایجاد هر چیزی از یک جعبه هشدار گرفته تا یک پنجره بازشو خبرنامه مورد استفاده مجدد قرار گیرد.
بیایید با الگو شروع کنیم:
<!-- components/PopupModal.vue -->
<template>
<transition name="fade">
<div class="popup-modal" v-if="isVisible">
<div class="window">
<slot></slot>
</div>
</div>
</transition>
</template>
توجه داشته باشید که یک خالی اضافه کردیم <slot></slot> به قالب تگ کنید این تگ به ما امکان می دهد هر محتوایی را در آن درج کنیم PopupModal عنصر در <slot></slot> برچسب زدن برای مطالعه بیشتر در مورد روش عملکرد اسلات ها، به ادامه مطلب مراجعه کنید راهنمای Vue روی اسلات ها.
ما همچنین اضافه کرده ایم <transition name="fade"> به قالب تگ کنید ما از این در بخش بعدی برای متحرک سازی یک افکت محو شدن/محو شدن استفاده خواهیم کرد روی دیالوگ
سپس، ما را اضافه می کنیم data()، open() و close() توابع رویداد:
<!-- components/PopupModal.vue -->
<script>
export default {
name: 'PopupModal',
data: () => ({
isVisible: false,
}),
methods: {
open() {
this.isVisible = true
},
close() {
this.isVisible = false
},
},
}
</script>
و در نهایت، اجازه دهید کمی سبک به آن اضافه کنیم:
<!-- components/PopupModal.vue -->
<style scoped>
/* css class for the transition */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.popup-modal {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem;
display: flex;
align-items: center;
z-index: 1;
}
.window {
background: #fff;
border-radius: 5px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
max-width: 480px;
margin-left: auto;
margin-right: auto;
padding: 1rem;
}
</style>
انیمیشن گفتگوی تایید
در تگ template یک تگ انتقال خواهید دید <transition name="fade">. این برای متحرک سازی حالت های ساده ورود/خروج استفاده می شود. هر چیزی که در داخل این تگ باشد، در صورت اضافه یا حذف شدن از آن، متحرک خواهد شد.
ما از یک شرطی استفاده می کنیم v-if="isVisible" برای مخفی کردن و نمایش پنجره بازشو. می توانید در مورد آن بیشتر بخوانید راهنمای Vue روی انتقال ها.
برای تعیین روش انتقال محتوا، انیمیشن خود را فراخوانی کرده ایم fade. برای پیاده سازی این انتقال در CSS، کلاس هایی با پیشوند نام اضافه می کنیم fade، مطابق با ما name ویژگی از <transition> برچسب زدن
تنها کاری که انجام می دهد این است که هنگام بسته شدن و باز شدن پنجره بازشو، کدورت را متحرک می کند:
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
به ارث بردن کامپوننت پاپ آپ
برای ایجاد دیالوگ تایید ما، به ارث می بریم PopupModal توسط ترکیب، و سفارشی کردن پنجره معین قابل استفاده مجدد برای تبدیل شدن به یک گفتگوی تایید.
بیایید یک فایل جدید ایجاد کنیم، components/ConfirmDialogue.vue و داخل آن یک قالب تعریف کنید:
<!-- components/ConfirmDialogue.vue -->
<template>
<popup-modal ref="popup">
<h2 style="margin-top: 0">{{ title }}</h2>
<p>{{ message }}</p>
<div class="btns">
<button class="cancel-btn" @click="_cancel">{{ cancelButton }}</button>
<span class="ok-btn" @click="_confirm">{{ okButton }}</span>
</div>
</popup-modal>
</template>
چون ما تعریف کردیم <slot></slot> برچسب در popup-modal کامپوننت، هر چیزی که بین تگ های جزء آن قرار می دهیم (<popup-modal></popup-modal>) بین آن ارائه خواهد شد <slot> به جای آن برچسب ها
ما همچنین یک را اضافه کردیم ref="popup" به popup-modal برچسب زدن با تنظیم آن ویژگی، اکنون می توانیم به آن دسترسی داشته باشیم popup-modal به عنوان مثال با this.$refs.popup. ما از آن مرجع برای تماس استفاده خواهیم کرد open() و close() روی مدال پاپ آپ
سپس، بیایید متدهای مولفه والد را پیاده سازی کنیم:
<!-- components/ConfirmDialogue.vue -->
<script>
import PopupModal from './PopupModal.vue'
export default {
name: 'ConfirmDialogue',
components: { PopupModal },
data: () => ({
// Parameters that change depending روی the type of dialogue
title: undefined,
message: undefined, // Main text content
okButton: undefined, // Text for confirm button; leave it empty because we don't know what we're using it for
cancelButton: 'Go Back', // text for cancel button
// Private variables
resolvePromise: undefined,
rejectPromise: undefined,
}),
methods: {
show(opts = {}) {
this.title = opts.title
this.message = opts.message
this.okButton = opts.okButton
if (opts.cancelButton) {
this.cancelButton = opts.cancelButton
}
// Once we set our config, we tell the popup modal to open
this.$refs.popup.open()
// Return promise so the caller can get results
return new Promise((resolve, reject) => {
this.resolvePromise = resolve
this.rejectPromise = reject
})
},
_confirm() {
this.$refs.popup.close()
this.resolvePromise(true)
},
_cancel() {
this.$refs.popup.close()
this.resolvePromise(false)
// Or you can throw an error
// this.rejectPromise(new Error('User canceled the dialogue'))
},
},
}
</script>
در نهایت، اجازه دهید کمی سبک به آن اضافه کنیم تا کمی زیباتر به نظر برسد:
<!-- components/ConfirmDialogue.vue -->
<style scoped>
.btns {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.ok-btn {
color: red;
text-decoration: underline;
line-height: 2.5rem;
cursor: pointer;
}
.cancel-btn {
padding: 0.5em 1em;
background-color: #d5eae7;
color: #35907f;
border: 2px solid #0ec5a4;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
}
</style>
با استفاده از گفتگوی تایید
برای استفاده از گفتگوی تایید، باید فقط عبارت را وارد کنید components/ConfirmDialogue.vue جزء. به عنوان مثال، یک را بسازیم page با یک دکمه “حذف” که مطمئن می شود که آیا شما واقعا می خواهم دیگری را حذف کنم page:
<template>
<div>
<h1>Delete Page</h1>
<button class="delete-btn" @click="doDelete">Delete Page</button>
<confirm-dialogue ref="confirmDialogue"></confirm-dialogue>
</div>
</template>
<script>
import ConfirmDialogue from '../components/ConfirmDialogue.vue'
export default {
components: { ConfirmDialogue },
methods: {
async doDelete() {
const ok = await this.$refs.confirmDialogue.show({
title: 'Delete Page',
message: 'Are you sure you want to delete this page? It cannot be undone.',
okButton: 'Delete Forever',
})
// If you throw an error, the method will terminate here unless you surround it wil try/catch
if (ok) {
alert('You have successfully delete this page.')
} else {
alert('You chose not to delete this page. Doing nothing now.')
}
},
},
}
</script>
<style scoped>
.delete-btn {
padding: 0.5em 1em;
background-color: #eccfc9;
color: #c5391a;
border: 2px solid #ea3f1b;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
}
</style>
از آنجایی که ما استفاده می کنیم await در روش ما برای به دست آوردن نتیجه گفتگوی تایید، باید اضافه کنیم async به تعریف روش ما
از طرف دیگر، ممکن است رویکرد سبک وعده را ترجیح دهید:
this.$refs.confirmDialogue.show({
title: 'Delete Page',
message: 'Are you sure you want to delete this page? It cannot be undone.',
okButton: 'Delete Forever',
}).then((result) => {
if (ok) {
alert('You have successfully delete this page.')
} else {
alert('You chose not to delete this page. Doing nothing now.')
}
})
برای اینکه ببینید چرا اگر کاربر گفتگوی تأیید را لغو کرد، پیشنهاد داده ایم که خطا ایجاد کند، ببینید کد زیر چقدر روان است:
await this.$refs.confirmDialogue.show({
title: 'Delete Page',
message: 'Are you sure you want to delete this page? It cannot be undone.',
okButton: 'Delete Forever',
})
alert('Deleting this page.')
از آنجایی که لغو به هیچ اقدامی نیاز ندارد، به سادگی نیازی به رسیدگی به آن حالت وجود ندارد. و اگر تصمیم به رسیدگی به درخواست لغو دارید، به سادگی آن کد را با یک بپیچید try/catch.
نتیجه
در این مقاله، یک مولفه بازشوی معین قابل استفاده مجدد را در Vue.js تعریف کرده‌ایم و آن را برای پیاده‌سازی گفتگوی تأیید به ارث برده‌ایم. سپس، انیمیشن‌هایی را برای اهداف زیبایی‌شناختی به آن اضافه کرده‌ایم و چند نمونه از روش استفاده از کامپوننت برای درخواست ورودی از کاربران را اجرا کردیم.
منتشر شده در 1403-01-17 23:37:04
