为 Nuxtjs 电子商务平台设计响应式模态和用户通知

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签电子商务平台

在我的网络笔记中查看这篇文章！

在上一篇文章中，我们完成了电子商务商店主页的创建，现在是时候进一步添加一些动态元素，例如模式和通知。首先，模态窗口对于产品快速查看、产品管理等很有用，而通知作用至关重要，因为它是与用户沟通的最佳方式，从欢迎消息开始到销售消息结束。是的，正如您从介绍和标题中看到的那样，我们今天的文章将包含以下内容：

在 nuxt.js 中创建自定义模态框
在我们的电子商务商店中配置通知消息

现在我们知道模态和警报有多重要，让我们研究如何将它们集成到我们的 nuxt.js 电子商务应用程序中并了解实现细节。

1. 在 nuxt.js 中创建自定义模态框

我们需要澄清，我们想要创建一个可重用的模态窗口，以便它可以以多种方式使用并显示不同的数据。为此，我们将创建一个主模态组件，其中包含特定于模态的样式和项目，这些样式和项目可以在我们的模态组件内呈现。

首先，在“ui”文件夹中创建一个 modal.vue 文件，其中包含一个模糊背景的容器和一个包含动态渲染项目的模态 div。此外，我们将导入“xmark”图标并将其设为关闭模态窗口的按钮。

<template><div class="container">        <div class="modal">            <div class="modal__close">                <button class="modal__close--btn">                    <nuxticon name="xmark-solid" class="modal__close--icon"></nuxticon></button>            </div>            <div class="modal__content">            </div>        </div>    </div></template>

在我们的基础存储中，我们将添加两个带有 false 值的新变量“modalstatus”和字符串形式的“modaltype”，并添加将修改这些值的简单操作。

asetmodalstatus(status) {    this.modalstatus = status;},asetmodaltype(type) {    this.modaltype = type;},

状态变量将控制模态渲染行为，类型将更新不同的模态类型。

现在，当我们有了模态控制系统时，我们可以将模态组件添加到默认布局中。不要忘记导入我们的基地商店。

<template><div class="layout">      <appheader></appheader><slot></slot></div>    <appfooter></appfooter><modal v-if="basestore.gmodalstatus"></modal></template>

太好了，我们的可重用模态组件已准备就绪，现在如果我们想显示模态，我们只需更新基础存储中的 modalstatus 值即可。

此外，你可以在模态组件中添加任何你想要的样式，但我建议你使用“glassmorphism”，它会看起来很时尚。

.container {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.5);    z-index: 100;    display: flex;    justify-content: center;    align-items: center;    .modal {        min-width: 300px;        min-height: 300px;        background: rgba( 255, 255, 255, 0.9 );        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );        backdrop-filter: blur( 13px );        -webkit-backdrop-filter: blur( 13px );        border-radius: 10px;        border: 1px solid rgba( 255, 255, 255, 0.18 );        padding: 24px;        display: flex;        flex-direction: column;        &amp;__close {            display: flex;            justify-content: flex-end;            width: 100%;            &amp;--btn {                border: none;                background-color: transparent;                cursor: pointer;                outline: none;                display: flex;                align-items: center;            }            &amp;--icon {                color: #6c757d;                font-size: 20px;            }        }    }}

我们在这里做得很好，但我建议您继续创建第一个使用我们的模式的组件 - “产品预览”，在单击任何产品卡上的预览按钮后即可使用该组件。让我们在“common”文件夹中创建一个新的 vue 文件并添加一些 html/css 元素：

<template><div class="product-preview">        <div class="product-preview__left">            <div class="product-preview__left--image">                @@##@@            </div>        </div>        <div class="product-preview__right">            <p class="product-preview__right--name">product name</p>            <p class="product-preview__right--price">$100</p>            <p class="product-preview__right--text">lorem ipsum dolor sit amet consectetur adipisicing elit. consequatur, ipsam! lorem ipsum dolor sit amet consectetur adipisicing elit. consequatur, ipsam! lorem ipsum dolor sit amet consectetur adipisicing elit. consequatur, ipsam!</p>            <button class="product-preview__right--btn">add to cart</button>            <button class="product-preview__right--btn2">                <nuxticon name="heart-regular" size="20" class="overlay__list--icon"></nuxticon>                add to wishlist            </button>        </div>    </div></template>

然后将此组件导入到 modal.vue 文件中，并将其插入到 content div 中。

<div class="modal__content">    <productpreview v-if="basestore.modaltype === 'product-preview'"></productpreview></div>

现在，我们只需要在卡片中添加一个像“showpreview”这样的函数，这样用户点击后，该函数就会将模态类型设置为“product-preview”，将模态状态设置为“true”。就是这样，我们有了可重用的模式和产品预览功能。

好的，我们需要继续并向 nuxt.js 项目添加警报消息。

2. 在我们的电子商务商店中配置通知消息

好吧，我们可以添加诸如模态改变其样式之类的东西，并将其称为警报，听起来是一个简单而快速的解决方案。但是，如果同时触发两个或多个警报（例如“欢迎”消息和“您的愿望清单不为空”消息）怎么办？为了解决这个问题，我们将创建一个警报容器，该容器将根据传入消息的数量进行扩展。

首先，我们将向商店添加警报设置，类似于我们对模态部分所做的操作。将“notificationslist”数组添加到状态部分，并添加将从列表中推送和删除通知的通知操作。每个通知都有一个唯一的 id，并显示状态、类型、消息和延迟（我们的消息可见的时间量）。

asetnotification(payload) {    const notification = {        id: uuidv4(),        show: true,        type: payload.type,        msg: payload.msg,        delay: payload.delay ? payload.delay : 7000,    }    this.notificationslist.push(notification);},aremovenotification(id) {    const indextoremove = this.notificationslist.findindex((element) =&gt; element.id === id);    if (indextoremove !== -1) {        this.notificationslist.splice(indextoremove, 1);    }},

下一步，我们需要创建一个“通知”组件，该组件将根据消息类型自行呈现消息。另外，我们需要使用延迟时间并自动删除消息。

<template><div class="animate__animated animate__backinright" v-if="notification.show">        <div class="alert alert-success" v-if="notification.type === 'success'">            <div class="icon__wrapper">                <nuxt-icon name="exclamation-solid"></nuxt-icon></div>            <p class="notification__text">{{ notification.msg }}</p>            <span class="close">                ×            </span>        </div>        <div class="alert alert-error" v-if="notification.type === 'error'">            <div class="icon__wrapper">                <nuxt-icon name="exclamation-solid"></nuxt-icon></div>            <p class="notification__text">{{ notification.msg }}</p>            <span class="close">                ×            </span>        </div>    </div></template><script>    import { usebasestore } from '@/store/base';    export default {        name: 'mainnotification',        props: {            notification: {                type: object,                required: true            }        },        computed: {            basestore() {                return usebasestore();            }        },        mounted() {            settimeout(() => {                this.basestore.aremovenotification(this.notification.id);            }, this.notification.delay)        }    }</script>

你可以按照你想要的任何方式设计你的消息，我会像往常一样使用“glassmorphism”并添加一些颜色。

.alert-success {    background: rgba( 114, 255, 136, 0.45 );    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );    backdrop-filter: blur( 10px );    -webkit-backdrop-filter: blur( 10px );    border-radius: 10px;    border: 1px solid rgba( 255, 255, 255, 0.18 );}

最后一步，我们需要创建消息容器并将该容器添加到 app.vue 文件中。

通知容器将简单地渲染存储在基本文件中的列表数组。

<template><div class="notification__container">        <mainnotification v-for="(notification, index) of basestore.gnotificationslist" :key="index" :notification="notification"></mainnotification></div></template><script>import { usebasestore } from '@/store/base';import mainnotification from './mainnotification.vue';export default {    name: 'notificationcontainer',    components: {        mainnotification,    },    computed: {        basestore() {            return usebasestore();        }    }};</script>

不要忘记将“通知容器”添加到主 app.vue 文件中。

<template><div>    <nuxtlayout><nuxtpage></nuxtpage></nuxtlayout></div>  <notificationcontainer></notificationcontainer></template>

就是这样，我们可以重新启动我们的开发服务器并触发几次通知消息，只是为了检查结果。

通过模式和通知的集成，我们的 nuxt.js 电子商务应用程序变得更加动态、交互和用户友好。这些元素有助于增强购物体验，使我们的客户能够预览产品并在整个旅程中随时了解情况。

随着我们不断构建和改进我们的电子商务平台，我们可以进一步扩展模式和通知的功能，根据特定用例进行定制，并确保为用户提供无缝且引人入胜的体验。

如果您需要本教程的源代码，可以在这里获取。

文章推荐

为 Nuxtjs 电子商务平台设计响应式模态和用户通知

1. 在 nuxt.js 中创建自定义模态框

2. 在我们的电子商务商店中配置通知消息

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？