当前位置：首页 > article >正文

【Vue3】知识汇总，附详细定义和源码详解，后续出微信小程序项目（3）

article 2024/11/14 1:38:51

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================

前情提要

🔺因为最近学习的vue语言，发现有很多细节的碎块需要汇总，所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义，和源代码解析，可以当作类似于英语单词一样瞄几眼，大概知道即可
那么话不多说我们开始吧 在这里插入图片描述

vue

前情提要
Vite
uni-app交互反馈showToast的用法
showLoading加载和showModal模态框
- - 示例代码片段
  - - showLoading 实现
    - showModal 实现

Vite

Vite 是一个现代的前端构建工具，它提供了快速的冷启动和即时热模块替换（HMR）。在 Vite 项目中，vite.config.js 文件用于配置项目的各种选项。以下是一个基本的 vite.config.js 示例：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 开发服务器端口
    open: true, // 自动打开浏览器
  },
  build: {
    outDir: 'dist', // 输出目录
    minify: 'terser', // 压缩器，'terser' 或 'esbuild'
    sourcemap: false, // 是否生成 source map
  },
  resolve: {
    alias: {
      '@': '/src', // 路径别名
    },
  },
});

插件:
- plugins: [vue()]: 使用 Vue 插件来处理 .vue 文件。
开发服务器:
- server.port: 设置开发服务器的端口号。
- server.open: 设置为 true 时，启动后会自动打开浏览器。
构建配置:
- build.outDir: 指定构建输出的目录。
- build.minify: 选择压缩器，可以是 'terser' 或 'esbuild'。
- build.sourcemap: 是否生成 source map 文件。
路径解析:
- resolve.alias: 配置路径别名，例如将 @ 映射到 /src 目录。

你可以根据项目需求进一步自定义 vite.config.js 文件。例如，添加 CSS 预处理器、配置环境变量等。

但是呢，我个人不太建议使用这个插件，最好还是自己import比较好喔！

uni-app交互反馈showToast的用法

在这里插入图片描述

它有好几种用法呢，比如显示消息提示框、加载动画和模态弹窗。显示消息提示框用uni.showToast，能设置标题、图标、是否防触摸穿透和显示时间。加载动画用uni.showLoading，可以显示一个加载动画，一般用于请求时间比较久的操作，比如文件上传。还有模态弹窗用uni.showModal，可以只有一个确定按钮，也可以同时有确认和取消按钮哦。

操作成功

uni.showToast({
	title:"操作成功"
})

在这里插入图片描述

操作失败

uni.showToast({
	title:"失败",
	icon: "errer"
})

在这里插入图片描述

想这些类似的，以下便是总结：
在这里插入图片描述

showLoading加载和showModal模态框

showLoading 和 showModal 模态框，这些通常用于前端开发中的用户界面交互。具体来说：

showLoading：
- 这是一个常见的方法，用于在页面上显示一个加载指示器（loading spinner）。当页面正在处理数据请求或者执行耗时操作时，通常会调用这个方法来告知用户当前正在加载。
- 例如，在发起 AJAX 请求之前调用 showLoading，在请求完成后调用 hideLoading 隐藏加载指示器。
showModal 模态框：
- 模态框是一种常用的 UI 组件，用于显示重要信息、提示用户输入或进行确认操作。模态框会覆盖在主内容之上，要求用户必须与之交互才能继续其他操作。
- 模态框可以包含各种内容，如表单、警告信息、成功消息等。

示例代码片段

假设使用的是 JavaScript 和 HTML 来实现这两个功能，以下是一些简单的示例代码：

uni.showLoading({
	title: '加载中...',
	mask: true //当进行加载的时候不允许实行后面的任务
});
setTimeout(()=> {
	uni.hideLoading()
},2000)

在这里插入图片描述

<template>
	<view class="">
		分类页面
		<button @click="remove">删除</button>
	</view>
</template>

<script setup>
function remove(){
	uni.showModal({
		title: '是否删除？',		
	});
}

在这里插入图片描述

showLoading 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show Loading Example</title>
    <style>
        #loading {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div id="loading">Loading...</div>
    <button onclick="showLoading()">Show Loading</button>
    <script>
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
        }

        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }
    </script>
</body>
</html>

showModal 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show Modal Example</title>
    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }
    </style>
</head>
<body>
    <button onclick="showModal()">Show Modal</button>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span onclick="hideModal()" style="float:right; cursor:pointer;">&times;</span>
            <p>This is a modal!</p >
        </div>
    </div>
    <script>
        function showModal() {
            document.getElementById("myModal").style.display = "block";
        }

        function hideModal() {
            document.getElementById("myModal").style.display = "none";
        }
    </script>
</body>
</html>