为 Nuxtjs 电子商务平台设计响应式模态和用户通知-js教程-PHP中文网

designing responsive modals and user notifications for nuxt.js e-commerce platform

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

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

在 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" @click="closemodal">
                    <nuxticon name="xmark-solid" class="modal__close--icon"/>
                </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 />
          <slot />
    </div>
    <appfooter />
    <modal v-if="basestore.gmodalstatus"/>
</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;
        &__close {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            &--btn {
                border: none;
                background-color: transparent;
                cursor: pointer;
                outline: none;
                display: flex;
                align-items: center;
            }
            &--icon {
                color: #6c757d;
                font-size: 20px;
            }
        }
    }
}

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

vue-composition-api-best-practices

Vue 3 组合式 API 与

相关专题

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

1738

2023.08.03

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2664

2023.09.04

java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友，请阅读本专题下面的的有关文章，欢迎大家来php中文网学习。

6064

2023.10.24

字符串介绍

字符串是一种数据类型，它可以是任何文本，包括字母、数字、符号等。字符串可以由不同的字符组成，例如空格、标点符号、数字等。在编程中，字符串通常用引号括起来，如单引号、双引号或反引号。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

5629

2023.11.24

java读取文件转成字符串的方法

Java8引入了新的文件I/O API，使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java，可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中，你需要将文件路径替换为你的实际文件路径，并且可能需要处理可能的IOException异常。想了解更多java的相关内容，可以阅读本专题下面的文章。

7294

2024.03.22