1. 安装Vite插件npm install vite-plugin-cdn-import2. 使用插件// vite.config.ts import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import cdn from "vite-plugin-cdn-import"; export default defineConfig({ plugins: [vue(), cdn({ modules: [ "vue", "vue-router", { name: "dayjs", var: "dayjs", path: [ "dayjs.min.js", "plugin/customParseFormat.js", "plugin/weekday.js", "plugin/localeData.js", "plugin/weekOfYear.js", "plugin/weekYear.js", "pl
1月前
使用AnimateList实现动画效果的列表AnimatedList( key: _listKey, initialItemCount: _items.length, itemBuilder: (context, index, animation) { return _buildItem(_items[index], animation); }, ))在_buildItem中可以指定使用哪种动态效果，这里使用SlideTransition结合CurvedAnimation实现一个滑入滑出的效果。 Widget _buildItem(String item, Animation<double> animation) { return SlideTransition( position: Tween<Offset>( begin: Offset(1.0, 0.0), // 从右侧滑入 end: Offset.zero, // 最终位置 ).animate(CurvedAnimation( parent: animation, curve: Curves.easeInOut, )), child: Card(
2月前
示例：跨列表拖拽排序这个示例包含两个列表，用户可以在它们之间拖拽项目。import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Drag and Drop', home: DragAndDropDemo(), ); } } class DragAndDropDemo extends StatefulWidget { @override _DragAndDropDemoState createState() => _DragAndDropDemoState(); } class _DragAndDropDemoState extends State<DragAndDropDemo> { List<String> listA = ["Item A1", "Item A2", "Item A3"]; List<String> listB = [
2月前
Scaffold 是 Flutter 中的一个重要组件，通常用于构建应用程序的基本视觉结构。它提供了一个框架，用于实现常见的应用程序结构元素，如 AppBar、Drawer、BottomNavigationBar、FloatingActionButton 和 SnackBar 等。Scaffold 组件的主要属性以下是 Scaffold 组件的一些主要属性：appBar:类型：PreferredSizeWidget描述：用于显示应用程序的顶部导航栏（AppBar）。body:类型：Widget描述：主要的内容区域，通常包含页面的主内容。floatingActionButton:类型：Widget描述：一个可浮动的操作按钮，通常用于执行主要操作。floatingActionButtonLocation:类型：FloatingActionButtonLocation描述：指定浮动操作按钮的位置。drawer:类型：Widget描述：一个侧边导航栏，可以通过手势或点击按钮打开。bottomNavigationBar:类型：Widget描述：一个底部导航栏，通常用于在不同的视图之间导航。persistentFooterButtons:类型：List<Widget>描述：一个持久的底部按钮区域，通常用于显示一些操作按钮。backgroundColor:类型：Color描述：Sca
2月前
Math.abs(x)：返回x的绝对值。Math.ceil(x)：对x进行向上取整。Math.floor(x)：对x进行向下取整。Math.max(x, y, z, ...)：返回一组数中的最大值。Math.min(x, y, z, ...)：返回一组数中的最小值。Math.pow(x, y)：返回x的y次幂。Math.round(x)：对x进行四舍五入。Math.sqrt(x)：返回x的平方根。Math.sin(x)：返回x的正弦值。Math.cos(x)：返回x的余弦值。Math.tan(x)：返回x的正切值。Math.random()：返回一个0到1之间的随机数。
3月前
1. package.json中添加依赖"electron": "^29.1.1", "electron-builder": "^24.13.3", "vite-plugin-electron": "^0.28.4", "vite-plugin-electron-renderer": "^0.14.5"2. vite.config.ts中添加electron插件import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from "path" import electron from 'vite-plugin-electron/simple' import fs from 'node:fs' import pkg from './package.json' const isDevelopment = process.env.NODE_ENV !== 'production' fs.rmSync('dist-electron', { recursive: true, force: true }) // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), !isDevelop
封面图片
3月前
<script setup lang="ts"> // 定义接受的参数 const props = defineProps({ name: String, description: String, icon: Object, }); // 定义触发的函数 const emits = defineEmits({ callback: (list: ErrorResultItem[]) => list, }); // 定义可供父组件使用ref调用的函数 defineExpose({ jumpErrorPane, }); </script>
3月前
可以使用CSS3中的@keyframes规则来定义动画，并通过animation属性将动画应用到元素上。以下是一个简单的示例，演示如何使用CSS3实现一个简单的旋转动画：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 Animation Example</title> <style> .box { width: 100px; height: 100px; background-color: #007bff; animation: rotate 2s linear infinite; /* 应用名为“rotate”的动画，持续时间为2秒，线性变化，无限循环 */ } @keyframes rotate { 0% { transform: rotate(0deg); /* 初始状态，不旋转 */ }
封面图片
3月前
使用了 grid-template-columns: repeat(auto-fill, 50px); 来设置每个元素的固定宽度为 50px，并使用 grid-gap: 10px; 来设置间距为 10px。Grid 布局会自动调整剩余空间，使得尽可能多地放置元素，并在放不下时平均分配剩余空间给每个间距。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Layout Example</title> <style> .grid-container { display: grid; grid-template-columns: repeat(auto-fill, 50px); grid-gap: 10px; justify-content: space-around; } .grid-item { background-color: lightblue
封面图片
3月前
Promise是JavaScript中的一种处理异步的机制。他是一种代表一个异步操作最终完成或失败的对象。Promise有三种状态 pending（进行中），fulfilled（已完成）， rejected（已失败）。Promise有两个主要方法 then和catch，then处理异步操作成功的情况，catch处理异步操作失败的情况，还有一个不论成功或失败都会执行的finally方法。当使用Promise时，会传入一个执行器。执行器传入两个参数，resolve, reject。当操作成功时使用resolve返回参数，失败时用reject返回参数。返回的参数会被then或者catch方法接收到。Promise本身还有一些比较常用的方法：1. all函数，将多个Promise放在一个数组中，然后用Promise.all(Array)执行，当数组内的所有异步操作成功时这个promise才会返回成功。不然就会返回失败。2. allSettled, 将多个Promise放在一个数组中。使用这个方法执行，当数组内所有异步操作完成后这个异步操作完成，并且会打印出数组中所有异步操作的状态与执行结果（一个数组，数组内对象格式为 { status: 'rejected'|'fulfilled', value: any }）。3. any方法，接收一个多个Promise的数组，当其中一个异步操作完成后，
封面图片
4月前
  • 共 28 条数据
  • 1
  • 2
  • 3
  • Go toPage