====================
快速跳转:
我的个人博客主页👉: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;">×</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>
🌼那么今天就到这里吧!
▲这次的知识汇总框架只是一次尝试,后续会陆续跟新vue系列。再后来会逐渐成熟,向大家展现更简洁明了的知识汇总!
一个小小的赞是对我最大的鼓励!
感谢你们看到这里,下次见~