可以参考如下options option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, series: [ { name: 'Access From', selectedMode: 'single', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold', formatter:'{c}' } }, labelLine: { show: false }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] };

斜杠后面的是子网掩码位数，代表32位子网掩码从左边开始有多少个1，比如是/24,就代表网络位占据了24位，主机位有8位，剩下的可分配子网IP就有2^(32-24)-2=254个，用来限制子网网段的访问，这需要一丢丢计算机网络的知识(划分子网是为了满足日渐增多的主机对于IP地址的需求)，前面的IP限制的是网络部分，后面的子网掩码位数限制的是该IP下的主机访问。 回到题目，你要设置120.77.212.99, 120.77.212.100能访问指定端口，那就要设置两条同端口但是不同IP的规则。 我的华为云服务器可以这样设置: "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241210/fda0946f6b073b90424604e455d726ae.png)

使用定制地图样式：腾讯地图允许你自定义地图的样式，包括地名的显示方式。你可以创建自定义地图样式，以控制哪些地名显示，哪些不显示，以及它们的显示样式。这可以通过腾讯地图的开发者工具来实现。根据你的需求，可以减少地名的显示数量，以提高地图的可读性。

它为什么可以把"welcome"替换成"欢迎"，它是有一个这个映射关系，代码中做了处理，不是魔法，他处理的地方就是t函数，"$t('welcome')"和"computed"都是动态的，所以切换语言后，页面重新渲染，可以重新计算，换成映射到的东西，但welcome1和welcome2是你写死在页面中的，换不了，除非你重新初始化组件

TypeScript 是一门强类型语言，当你声明一个变量或参数时，编译器会自动推断它的类型。在上面的代码中，res 变量被初始化为一个空对象 {}，因此编译器默认认为它是一个没有任何属性的空对象。 当你使用可选链 res?.status 时，编译器会检查这个属性是否存在于对象中，并给出相应的警告信息。 你可以尝试使用以下方法来解决提示报错 或者忽略 两种方式解决： 1 if ((res as { status?: number })?.status === 200) { console.log(res, 'res'); } 2 定义一个接口类型，包含期望的属性及其类型 type resType = { status?: number; message?: string; }; async function getUserInfolist() {// let res:resType = await new Promise(function (reslove){ reslove({status: 200,message: '成功'}) }) if(res?.status === 200){ console.log(res,'res') } }

import React, { useEffect, useState } from 'react' import { Card } from 'antd'; const CPU = () => { const [aaa, setAaa] = useState('123') // 这行会报错 console.log(aaa) return ( Card content ) } export default CPU 这个代码确实是React的函数式组件，问题应该不是出在这个组件中。应该是工程中的其他地方错误的使用了"use**"钩子导致的，"React"的"Hook"只能在函数体中使用，并且不应该被"if"、"for"、"while"等结构体包裹。 建议题主通过逐步注释的方式排查问题

* 静态语言：条件编译 * 动态语言：if 判断 你应该举个例子，把问题用简单的代码写出来才能快速得到解决方案。

404 是目标不存在，猜测是你配置的路径不对。

如何实现子节点全选后父节点全选，子节点不全选父节点半选。 https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241118/38ba83049aa240e01c26a980c8f5da9f.png

直接 github 搜索就行："https://github.com/search?q=vue%402.6.11&type=repositories" (https://link.segmentfault.com/?enc=%2FWlek1hvUdvzCWhZntouFQ%3D%3D.MKX9oD09SJyBsXqtf1kE6jefVHgdUc19QB%2BIpmPqQmsrJwVzB5W1fTLVnFJ8WD8Npa34qEHjPOyJnNmhTYj%2B3Q%3D%3D) ，这个技巧 GET 了没 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241117/3c24d9c92690e9a0f1f39a41b35cd745.png) node版本更好查了，直接在 vue 的官方仓库中找到对应 tag： "https://github.com/vuejs/vue/blob/v2.6.11/package.json" (https://link.segmentfault.com/?enc=hC2zphO8M8SLtClBc68crg%3D%3D.UZMGbarNGC2fDh94oaUgk0EGcCt3icBeqoyW7reIlQrC2bE4ldOzBivqZ0JgqSSOC3ECUg4uTHccJyyR5qdL6g%3D%3D) , 会找到 ""@types/node": "^12.12.0""

最简单的方式是直接用"table" "截屏2023-11-26 13.56.29.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241113/0667076bade24d10ba6979785fa8fc39.png)

用的是 "React" 和 "Antd v5" 为什么在改了 "state" 之后元素还是没变化呢 const [editLock, setEditLock] = useState(false); const MenuAction = () => setEditLock(true)} /> const menuDefault: MenuProps['items'] = [ { label: , key: 'top' }, ]; const formatMenu = (data: any) => data.map((item: any) => ({ key: item.id, children: [], label: {!editLock && } , })) 问过 GPT 但是没有结果

常用nuxt，直接将图片放在static目录下，引用时使用/static/xx.png

得封装成两个方法会比较好,php一些方法属于历史遗留问题,设计的并不符合某些规范 def extract_column(data, column_name): """ 提取列表中指定列名的值，并返回一个列表 :param data: 包含字典的列表 :param column_name: 要提取的列名 :return: 包含提取值的列表 """ return [item[column_name] for item in data] def extract_column_to_dict(data, key_column_name, value_column_name): """ 提取列表中指定键名和值名的字典 :param data: 包含字典的列表 :param key_column_name: 键名对应的列名 :param value_column_name: 值对应的列名 :return: 包含提取键值对的字典 """ return {item[key_column_name]: item[value_column_name] for item in data} # 使用方法 data = [ {'id': 1, 'name': 'Alice', 'age': 25}, {'id': 2, 'name': 'Bob', 'age': 30}, {'id': 3, 'name': 'Charlie', 'age': 35}, ] names = extract_column(data, 'name') print(names) # 输出：['Alice', 'Bob', 'Charlie'] new_dict = extract_column_to_dict(data, 'id', 'name') print(new_dict) # 输出：{1: 'Alice', 2: 'Bob', 3: 'Charlie'}

想请教各位巨佬一个布局如图，div宽高都固定，怎么在第二行超出时显示.... "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241106/aba83c1a7b6ca8f364d705a73c2a6ebf.png) div宽高都固定，怎么在第二行超出时显示....

AutoAnimate 这个动画库怎么在vue2上使用，注册成指令 import { vAutoAnimate } from '@formkit/auto-animate' Vue.directive("auto-animate",vAutoAnimate) 点击 出现 没有动画效果，也没有报错不知道是为什么 想在vue2上使用这个@formkit/auto-animate 这个动画库

这个和 axios 没有关系，axios 只是封装了 ajax 的 api，与客户端和服务器有关， 更具体来说，这个是网络运维的事情，和前端关系不大，正常使用就行了

对于页面多、角色多的单页应用，路由是非常重要的一种基础设施。 所以，如果你的应用符合上面的描述，那么它的路由不应该写在入口里，更不应该写在组件里，而应该放到独立的路由文件夹，并且尽可能抽离配置项，让配置归于配置，处理归于处理。 不过，如果不是界面多（且/或）角色多的单页应用，就没有必要写路由，"if else"一把梭就行。

定义一个数组，每在页面上新增一个模块就在数组中新增（增删改），页面遍历数组，根据不同的模块类型渲染

两个误区吧： * 尽量不要把 useEffect 当作一个 “监听器” 来使用 * useRef 保存的内容不随着组件的每次渲染而更新。在 useEffect 逻辑里，第二个参数里传 ref 相关的值，这种使用方式不太对。 解决思路：在更新 ScaleRef.current 的地方，直接写 useEffect 里的逻辑即可（有全量代码的话，视情况而定）。

1.在任意目录下执行 pnpm ls -g ERROR  The configured global bin directory "/xxx" is not in PATH For help, run: pnpm help list 2.在存在pnpm-lock文件的项目下执行：pnpm ls -g 结果不报错 请问是什么原因造成报错的呢？

debian12 如何使用 apt 一键安装 docker-compose V2 版本？ 仓库里面自带的，还是 python 写的 v1 版本，我要安装 golang 写的 v2 版本 ops@es-redis-20240228:~/opt/redis$ sudo apt install docker-compose Reading package lists... Done Building dependency tree... Done Reading state information... Done The following packages were automatically installed and are no longer required: docker-buildx-plugin docker-compose-plugin libltdl7 libslirp0 pigz slirp4netns Use 'sudo apt autoremove' to remove them. The following additional packages will be installed: binutils binutils-common binutils-x86-64-linux-gnu cgroupfs-mount containerd criu docker.io libbinutils libctf-nobfd0 libctf0 libgprofng0 libintl-perl libintl-xs-perl libjansson4 libmodule-find-perl libmodule-scandeps-perl libnet1 libnftables1 libnl-3-200 libproc-processtable-perl libprotobuf32 libsort-naturally-perl libterm-readkey-perl needrestart python3-attr python3-distro python3-distutils python3-docker python3-dockerpty python3-docopt python3-dotenv python3-json-pointer python3-jsonschema python3-lib2to3 python3-protobuf python3-pyrsistent python3-rfc3987 python3-texttable python3-uritemplate python3-webcolors python3-websocket runc tini Suggested packages: binutils-doc containernetworking-plugins docker-doc aufs-tools btrfs-progs debootstrap rinse rootlesskit xfsprogs zfs-fuse | zfsutils-linux needrestart-session | libnotify-bin iucode-tool python-attr-doc python-jsonschema-doc The following packages will be REMOVED: containerd.io docker-ce docker-ce-cli docker-ce-rootless-extras The following NEW packages will be installed: binutils binutils-common binutils-x86-64-linux-gnu cgroupfs-mount containerd criu docker-compose docker.io libbinutils libctf-nobfd0 libctf0 libgprofng0 libintl-perl libintl-xs-perl libjansson4 libmodule-find-perl libmodule-scandeps-perl libnet1 libnftables1 libnl-3-200 libproc-processtable-perl libprotobuf32 libsort-naturally-perl libterm-readkey-perl needrestart python3-attr python3-distro python3-distutils python3-docker python3-dockerpty python3-docopt python3-dotenv python3-json-pointer python3-jsonschema python3-lib2to3 python3-protobuf python3-pyrsistent python3-rfc3987 python3-texttable python3-uritemplate python3-webcolors python3-websocket runc tini 0 upgraded, 44 newly installed, 4 to remove and 2 not upgraded. Need to get 75.6 MB of archives. After this operation, 32.6 MB of additional disk space will be used. Do you want to continue? [Y/n] y Get:1 file:/etc/apt/mirrors/debian.list Mirrorlist [30 B] Get:2 https://deb.debian.org/debian bookworm/main amd64 runc amd64 1.1.5+ds1-1+deb12u1 [2710 kB] Get:3 https://deb.debian.org/debian bookworm/main amd64 containerd amd64 1.6.20~ds1-1+b1 [25.9 MB] Get:4 https://deb.debian.org/debian bookworm/main amd64 tini amd64 0.19.0-1 [255 kB] Get:5 https://deb.debian.org/debian bookworm/main amd64 docker.io amd64 20.10.24+dfsg1-1+b3 [36.2 MB] Get:6 https://deb.debian.org/debian bookworm/main amd64 binutils-common amd64 2.40-2 [2487 kB] Get:7 https://deb.debian.org/debian bookworm/main amd64 libbinutils amd64 2.40-2 [572 kB] Get:8 https://deb.debian.org/debian bookworm/main amd64 libctf-nobfd0 amd64 2.40-2 [153 kB] Get:9 https://deb.debian.org/debian bookworm/main amd64 libctf0 amd64 2.40-2 [89.8 kB] Get:10 https://deb.debian.org/debian bookworm/main amd64 libgprofng0 amd64 2.40-2 [812 kB]

缓存分多种，他们说的是 http 缓存，那看来不是你要的。 楼上有个评论说了 "Service Workers"，这个是 http 前的一个缓存地，除了能拦截 http，也能接收一些 message 。 再往前说，就是 webSql、DB、localStorage、cookie 这些本地缓存了，也可以理解为持久化缓存。 再往前说，就是直接内存缓存了 以上就是和前端相关所有缓存了

如题： 刷新页面之后有概率 #/ 之后的地址消失， 1.token 保活没问题，token 过期的提示都在 2.和缓存无关，clear site data 之后刷新页面，提示 无token 3.没有除外 JS 代码的重定向，debugger 开了也没用 4.概率性出现，无痕浏览器里面也不影响 5.和单个电脑无关，多台电脑都能复现 复现条件： 1.单个账号登录 1H+ 无操作，可以提升触发 BUG 的概率

在vite 或者 webpack 打开 sourcemap 即可在 微信开发者工具中 断点到源代码。 比如 vite: import { defineConfig } from "vite"; import uni from "@dcloudio/vite-plugin-uni"; import { nodePolyfills } from "vite-plugin-node-polyfills"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [nodePolyfills(), uni()], build: { sourcemap: true, // 打开sourcemap }, });

如何进入OpenHarmony的系统目录？ "1709871542233.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/e6671c04592f1c5b7251f9dbaeb34776.png) 目的是获取设备的获取设备的特权管控白名单文件install_list_capability.json，安装调用了系统级API的APP，把APP包名加入白名单里

这是我拿到的一组php数据，我突然看不明白这是什么数据了？我去遍历不行，用arr[0]可以拿到objectclass的数组，但是这数组为什么是(6)? array(6) { ["count"] => int(5) [0] => array(8) { ["objectclass"] => array(3) { ["count"] => int(2) [0] => string(3) "top" [1] => string(18) "organizationalUnit" } [0] => string(11) "objectclass" ["ou"] => array(2) { ["count"] => int(1) [0] => string(6) "people" } [1] => string(2) "ou" ["description"] => array(2) { ["count"] => int(1) [0] => string(18) "存放人员信息" } [2] => string(11) "description" ["count"] => int(3) ["dn"] => string(38) "ou=people,dc=info,dc=huel,dc=edu,dc=cn" } [1] => array(8) { ["objectclass"] => array(3) { ["count"] => int(2) [0] => string(3) "top" [1] => string(18) "organizationalUnit" } [0] => string(11) "objectclass" ["ou"] => array(2) { ["count"] => int(1) [0] => string(5) "admin" } [1] => string(2) "ou" ["description"] => array(2) { ["count"] => int(1) [0] => string(27) "存放管理员用户信息" } [2] => string(11) "description" ["count"] => int(3) ["dn"] => string(47) "ou=admin,ou=people,dc=info,dc=huel,dc=edu,dc=cn" } [2] => array(8) { ["objectclass"] => array(3) { ["count"] => int(2) [0] => string(3) "top" [1] => string(18) "organizationalUnit" } [0] => string(11) "objectclass" ["ou"] => array(2) { ["count"] => int(1) [0] => string(4) "adm2" } [1] => string(2) "ou" ["description"] => array(2) { ["count"] => int(1) [0] => string(30) "存放重置密码用户信息" } [2] => string(11) "description" ["count"] => int(3) ["dn"] => string(46) "ou=adm2,ou=people,dc=info,dc=huel,dc=edu,dc=cn" } [3] => array(8) { ["objectclass"] => array(3) { ["count"] => int(2) [0] => string(3) "top" [1] => string(18) "organizationalUnit" } [0] => string(11) "objectclass" ["ou"] => array(2) { ["count"] => int(1) [0] => string(7) "teacher" } [1] => string(2) "ou" ["description"] => array(2) { ["count"] => int(1) [0] => string(24) "存放教师用户信息" } [2] => string(11) "description" ["count"] => int(3) ["dn"] => string(49) "ou=teacher,ou=people,dc=info,dc=huel,dc=edu,dc=cn" } [4] => array(8) { ["objectclass"] => array(3) { ["count"] => int(2) [0] => string(3) "top" [1] => string(18) "organizationalUnit" } [0] => string(11) "objectclass" ["ou"] => array(2) { ["count"] => int(1) [0] => string(7) "student" } [1] => string(2) "ou" ["description"] => array(2) { ["count"] => int(1) [0] => string(24) "存放学生用户信息" } [2] => string(11) "description" ["count"] => int(3) ["dn"] => string(49) "ou=student,ou=people,dc=info,dc=huel,dc=edu,dc=cn" } }

参考这个："http://www.alongweb.top/uniapp/uniapp-18.html" (https://link.segmentfault.com/?enc=MVIv7JMVHVs4Yqag38nu5Q%3D%3D.pVLEhWK%2BNXz9vgj8r9IqimcYzDs5aP%2BNBdGad8%2Fru91RMXYGCS4oDxFoGI5XM1if)

单独的js文件里面也可以 "import { router } from '/router.js" 的。 不光是 "vue-router"，"vuex" 以及UI库的一些消息弹窗也可以这样用。 举个例子 👉 "vue-element-admin/src/permission.js at master" (https://link.segmentfault.com/?enc=XavS%2BaKzAi1Bun2Hu%2FSepA%3D%3D.9zugfWpy10Ik9XgxDHiGCquXDVMIyfZaMy%2BsomFOk331%2Bnm2zaBGPCCq2JTVK5vSg5s19xh1HNmaJOXchgJzkL5C6kXbMaG19AZlh0EQWwE%3D) import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { getToken } from '@/utils/auth' // get token from cookie import getPageTitle from '@/utils/get-page-title' NProgress.configure({ showSpinner: false }) // NProgress Configuration const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist router.beforeEach(async(to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939 } else { // determine whether the user has obtained his permission roles through getInfo const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // get user info // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] const { roles } = await store.dispatch('user/getInfo') // generate accessible routes map based on roles const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // dynamically add accessible routes router.addRoutes(accessRoutes) // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }) } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } } }) router.afterEach(() => { // finish progress bar NProgress.done() })

用这个试试 " window.open(url, '_blank')"

代码这样写 private let logger = Logger(subsystem: subsystem, category: "menu") 提示： Let 'logger' is not concurrency-safe because it is not either conforming to 'Sendable' or isolated to a global actor; this is an error in Swift 6

新人正在学习Flutter，使用wechat_assets_picker上传多张图片，使用extended_image做图片浏览，浏览图片时，删除单张图片后extended_image怎样跳转到下一张图片？ post.dart页面代码： import 'dart:io'; import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:wechat_assets_picker/wechat_assets_picker.dart'; class Post extends StatefulWidget { const Post({super.key}); @override State createState() => _PostState(); } class _PostState extends State { // 已选中图片列表 List selectedAssets = []; // 相册图片初始化索引 int currentIndex = 0; /// 从相册选取图片 pickImage(BuildContext context) async { final List? result = await AssetPicker.pickAssets( context, pickerConfig: AssetPickerConfig( maxAssets: 4, requestType: RequestType.image, textDelegate: const AssetPickerTextDelegate(), selectedAssets: selectedAssets ), ); if (result != null) { setState(() { selectedAssets = result; }); } } /// 上传的图片列表（小图预览） Widget _imagesList() { return LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { final double width = (constraints.maxWidth - 5 * 3) / 4; return Wrap( spacing: 5, children: [ for (final asset in selectedAssets) InkWell( onTap: () { setState(() { currentIndex = selectedAssets.indexOf(asset); }); Get.to(() => gallery()); // 单击单张缩略图进入预览组件 }, child: Container( clipBehavior: Clip.antiAlias, decoration: BoxDecoration( borderRadius: BorderRadius.circular(5) ), child: AssetEntityImage( asset, width: width, height: width, fit: BoxFit.cover, isOriginal: false, //是否原图，否 ), ), ), if(selectedAssets.length pickImage(context), child: Container( width: width, height: width, decoration: BoxDecoration( color: const Color.fromRGBO(242, 242, 244, 1), borderRadius: BorderRadius.circular(5) ), child: const Icon(Fonts.tianjia, color: Color.fromRGBO(178, 178, 180, 1)), ), ) ], ); } ); } // 图片浏览 Widget gallery() { return Scaffold( extendBodyBehindAppBar: true, appBar: AppBar( title: Row( crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ InkWell( onTap: () => Get.back(), child: const Icon(Fonts.fanhui) ), // 删除按钮 InkWell( onTap: () { setState(() { selectedAssets.remove(selectedAssets[currentIndex]); }); //当选中的图片被删除干净后，关掉图片查看器 if(selectedAssets.isEmpty) { Get.back(); } }, child: const Icon(Fonts.shanchu, size: 20, color: Color.fromRGBO(50, 50, 52, 1)), ), ], ), ), body: ExtendedImageGesturePageView.builder( controller: ExtendedPageController( // 传入图片初始位置 initialPage: currentIndex, ), onPageChanged: (int index) { setState(() { currentIndex = index; }); }, itemCount: selectedAssets.length, itemBuilder: (BuildContext context, int index) { AssetEntity item = selectedAssets[index]; return ExtendedImage( image: AssetEntityImageProvider( item, isOriginal: true ), fit: BoxFit.cover, mode: ExtendedImageMode.gesture, clearMemoryCacheWhenDispose: true, initGestureConfigHandler: ((state) { return GestureConfig( minScale: 0.9, maxScale: 3.0, animationMinScale: 0.7, animationMaxScale: 3.5, speed: 1.0, inertialSpeed: 100.0, initialScale: 1.0, inPageView: true ); }), ); } ), ); } @override Widget build(BuildContext context) { return Scaffold( body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: _imagesList() ) ); } } 目前能正常删除已选中的图片，但是在删除成功后，图片查看器没办法自动转到在一张图片。

跟编译和性能有关 class会保留 interface不会 看一篇文章吧 "https://zhuanlan.zhihu.com/p/62443803" (https://link.segmentfault.com/?enc=7moJ9W%2Fy3GdGkdSVP57iDA%3D%3D.70wXURBd7%2BFwCphLD2iVh02Ws6QFRJ31LaWorNFwjTvNWSytjewhXsK263ApSlvh)

nginx解决跨域，前端请求后返回的不是想要的内容？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/37977a0cbf9e1907232bf00cd5e237a0.png) 正常返回应该是： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/f9afcd3cdb874c037765c23895215d22.png) 而实际返回确实： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/cd387378d0047232f2b52fdb04b184f7.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/4220a3c6c0772041c78200fe48c4d749.png)

在一个非Vue项目构建的、仅是普通的JavaScript项目里，只是简单地在页面引入了quill.js、vue-quill-editor.js、vue.js。 1. 需要实现在vuequilleditor中粘贴文本时，将粘贴的富文本转换文纯文本，并插入到光标所在位置。 2. 如果光标选中了部分内容，需要将选中的内容替换为粘贴文本。 3. 插入文本后，需要修改光标位置到插入文本的后面 4. 即使当前光标所在的位置（选中的文本）带有css样式，粘贴后的文本也不能带有样式。 Vue.use(window.VueQuillEditor) var toolbarOptions = [ ['bold', 'underline'], [{ 'color': ['blue', 'red', 'black'] }], ['link'], ['clean'] ] var main = new Vue({ el: "#main", data: { QuillEditors: [], editorOption: { scrollingContainer: null, modules: { toolbar: toolbarOptions }, theme: 'snow' }, }, methods: { } }) 我尝过使用mounted函数，监听‘paste’事件，然后获取剪切板内容的文本格式（text/plain），再调用quill的insertText方法将文本内容插入。 但是插入后，文本内容会受到 插入index所在的delta的样式的影响？ 同样，删除时使用deleteText、insertText方法，结果也都不理想。 *** 经过maxkiicc大佬的帮助，我已经解决了 1. 需要实现在vuequilleditor中粘贴文本时，将粘贴的富文本转换文纯文本，并插入到光标所在位置。 2. 插入文本后，需要修改光标位置到插入文本的后面 3. 即使当前光标所在的位置（选中的文本）带有css样式，粘贴后的文本也不能带有样式。 尚未解决的问题为： 2. 如果光标选中了部分内容，需要将选中的内容替换为粘贴文本。 问题描述： 如果用光标选中一部分内容，然后再粘贴，会发现粘贴的内容被删除了光标选中文本长度的内容。 比如： 当前内容为：1234 光标选中文本：23 要粘贴的内容：index 得到的结果：1dex4 Vue.use(window.VueQuillEditor) var toolbarOptions = [ ['bold', 'underline'], [{ 'color': ['blue', 'red', 'black'] }], ['link'], ['clean'] ] var main = new Vue({ el: "#main", data: { QuillEditors: [], editorOption: { scrollingContainer: null, modules: { toolbar: toolbarOptions }, theme: 'snow' }, }, mounted () { var quill = this.$refs.myQuillEditor.quill quill.root.addEventListener('paste', function (e) { e.preventDefault() const clipboardData = e.clipboardData || window.clipboardData const pastedText = clipboardData.getData('text/plain') requestAnimationFrame(() => { const pasteLength = pastedText.length const index = quill.selection.savedRange.index const length = quill.selection.savedRange.length // retain delete的index不能等于0 if (index === 0) { if (length !== 0) { quill.updateContents([ { insert: pastedText, }, { delete: length } ]) } else { quill.updateContents([ { insert: pastedText, }, ]) } } else { if (length !== 0) { quill.updateContents([ { retain: index, }, { insert: pastedText, }, { delete: length } ]) } else { quill.updateContents([ { retain: index, }, { insert: pastedText, }, ]) } } // 挪动光标到复制文本后 setTimeout(() => { quill.setSelection(index + pasteLength, 0) }, 0) }) }) } })

vite4.x+React批量导入图片打包部署后不显示 "vite.config.ts"中配置了"assetsDir: 'statics',"打包之后的图片都在"statics"目录中,导入图片的代码如下： const images = import.meta.glob('@/assets/images/sample/rack/*.png') const [imgUrlsMap, setImgUrlsMap] = useState() useEffect(() => { Promise.all( Object.keys(images).map(async (key) => { const module: any = await images[key](); const imageUrl = new URL(module.default, import.meta.url).href return imageUrl; }) ).then((urls) => { // const ImgPathMap: any = urls.reduce((total: any, current: any) => { return { ...total, [current?.split('/')?.slice(-1)[0]?.split('.')[0]]: current// 值：http://localhost:3187/imh_view/src/assets/images/sample/rack/6.png } }, {}) setImgUrlsMap(ImgPathMap) }) }, []) { rackSpeci?.map((item: any, idx: number) => ( onSpeciSelect(item,idx)} /> { item.name } ({ item.rowNum + 'X' + item.columnNum }） )) } 得到的图片地址："http://localhost:3187/imh_view/src/assets/images/sample/rack/6.png" 问题描述：在本地开发环境中图片能显示出来，打包部署之后不显示，审核元素查看img元素甚至没看到src属性，请问该如何解决呢

其实被压缩的是窗口高度，页面的文档流会通过滚动条机制来应对所有高度的，文档流就不存在被压缩的问题。 所以你的“被压缩”，如果不是因为你按屏幕高度比写布局的话，那就只有一种可能——不是页面被“压缩”，而是你页面底下的按钮因为“水涨船高”而跑上来了。 “水涨船高”的按钮，通常是通过 "position:fixed"或者"position:sticky" “粘”在视口底部的，这样的设计在全尺寸显示 的情况下不会有问题，只是软键盘一顶上来 就违背初衷了。 那么，如果确实如此的话，解决的方案也就清晰明了了：分全尺寸 和软键盘 两种情形来布局就行了，全尺寸的时候该显示还得显示，顶上来的时候底下的内容就不显示，例如使用 JS ： { mounted(){ window.addEventListener('resize', () => { // 触发阈值可以根据窗口的全尺寸高度再加上某个经验值来确定 if(window.innerHeight < xxxxx){ // 假设 buttonWrap 是页面中那些被顶上来的内容的容器 this.$refs.buttonWrap.style.display = "none"; } else { this.$refs.buttonWrap.style.display = "block"; // "flex"... } }) } } 当然如果我猜错原因的话就另请高明吧。

有一个需求，需要用户上传word，完了在线编辑后生成pdf，目前是打算时候"canvas-editor"来进行在线编辑，用"Mammoth.js"来实现解析word，生成html信息传给"canvas-editor"。 目前有一个问题，如果word设置了页眉页脚的话，"Mammoth.js"是拿不到相关信息的，请问这该如何解决呢？或者有没有其他更好的库？

import aiohttp import aiofiles import asyncio from tqdm import tqdm import os # 模拟获取视频URL列表的函数 def get_video_urls(): return [ 'https://example.com/video1.mp4', 'https://example.com/video2.mp4', # 添加更多URL ] # 异步下载单个视频文件 async def download_video(session, url, save_path): try: async with session.get(url) as response: response.raise_for_status() async with aiofiles.open(save_path, 'wb') as f: async for chunk in response.content.iter_chunked(1024): await f.write(chunk) print(f"Downloaded: {url}") except Exception as e: print(f"Failed to download {url}: {e}") # 主下载函数 async def main(): video_urls = get_video_urls() save_dir = 'videos' os.makedirs(save_dir, exist_ok=True) async with aiohttp.ClientSession() as session: tasks = [] for url in video_urls: file_name = os.path.join(save_dir, os.path.basename(url)) tasks.append(download_video(session, url, file_name)) for task in tqdm(asyncio.as_completed(tasks), total=len(tasks)): await task # 运行主函数 if __name__ == '__main__': asyncio.run(main())

先本地部署看是否报错。 本地 Java -jar，把 spring-boot-maven-plugin 中的 configuration、executions 去掉再 package 试试。

不限于某种语言提供给库使用者进行配置的方法（这是我能想到的）： 1. 方法的参数中 2. 提供接口 interface 只要实现接口的中方法就可以覆盖默认的方法 3. 继承重写 4. 提供类似AOP的方法 既然想删除一些内容那就继承后实现自己业务，功能和NetWorkImage一样；也就是说里面内容是从flutter3.19.5/packages/flutter/lib/src/painting/_network_image_io.dart这里抄的 import 'dart:async'; import 'dart:io'; import 'dart:ui' as ui; import 'package:flutter/foundation.dart'; typedef _SimpleDecoderCallback = Future Function( ui.ImmutableBuffer buffer); class SteNetworkImage extends ImageProvider implements NetworkImage { /// Creates an object that fetches the image at the given URL. const SteNetworkImage(this.url, {this.scale = 1.0, this.headers}); @override final String url; @override final double scale; @override final Map? headers; @override Future obtainKey(ImageConfiguration configuration) { return SynchronousFuture(this); } @override ImageStreamCompleter loadBuffer( NetworkImage key, DecoderBufferCallback decode) { // Ownership of this controller is handed off to [_loadAsync]; it is that // method's responsibility to close the controller's stream when the image // has been loaded or an error is thrown. final StreamController chunkEvents = StreamController(); return MultiFrameImageStreamCompleter( codec: _loadAsync(key as NetworkImage, chunkEvents, decode: decode), chunkEvents: chunkEvents.stream, scale: key.scale, debugLabel: key.url, informationCollector: () => [ DiagnosticsProperty('Image provider', this), DiagnosticsProperty('Image key', key), ], ); } @override ImageStreamCompleter loadImage( NetworkImage key, ImageDecoderCallback decode) { // Ownership of this controller is handed off to [_loadAsync]; it is that // method's responsibility to close the controller's stream when the image // has been loaded or an error is thrown. final StreamController chunkEvents = StreamController(); return MultiFrameImageStreamCompleter( codec: _loadAsync(key as NetworkImage, chunkEvents, decode: decode), chunkEvents: chunkEvents.stream, scale: key.scale, debugLabel: key.url, informationCollector: () => [ DiagnosticsProperty('Image provider', this), DiagnosticsProperty('Image key', key), ], ); } // Do not access this field directly; use [_httpClient] instead. // We set `autoUncompress` to false to ensure that we can trust the value of // the `Content-Length` HTTP header. We automatically uncompress the content // in our call to [consolidateHttpClientResponseBytes]. static final HttpClient _sharedHttpClient = HttpClient() ..autoUncompress = false; static HttpClient get _httpClient { HttpClient? client; assert(() { if (debugNetworkImageHttpClientProvider != null) { client = debugNetworkImageHttpClientProvider!(); } return true; }()); return client ?? _sharedHttpClient; } Future _loadAsync( NetworkImage key, StreamController chunkEvents, { required _SimpleDecoderCallback decode, }) async { try { assert(key == this); final Uri resolved = Uri.base.resolve(key.url); final HttpClientRequest request = await _httpClient.getUrl(resolved); ///这里实现你的逻辑 headers?.forEach((String name, String value) { request.headers.add(name, value); }); final HttpClientResponse response = await request.close(); if (response.statusCode != HttpStatus.ok) { // The network may be only temporarily unavailable, or the file will be // added on the server later. Avoid having future calls to resolve // fail to check the network again. await response.drain>([]); throw NetworkImageLoadException( statusCode: response.statusCode, uri: resolved); } final Uint8List bytes = await consolidateHttpClientResponseBytes( response, onBytesReceived: (int cumulative, int? total) { chunkEvents.add(ImageChunkEvent( cumulativeBytesLoaded: cumulative, expectedTotalBytes: total, )); }, ); if (bytes.lengthInBytes == 0) { throw Exception('SteNetworkImage is an empty file: $resolved'); } return decode(await ui.ImmutableBuffer.fromUint8List(bytes)); } catch (e) { // Depending on where the exception was thrown, the image cache may not // have had a chance to track the key in the cache at all. // Schedule a microtask to give the cache a chance to add the key. scheduleMicrotask(() { PaintingBinding.instance.imageCache.evict(key); }); rethrow; } finally { chunkEvents.close(); } } @override bool operator ==(Object other) { if (other.runtimeType != runtimeType) { return false; } return other is NetworkImage && other.url == url && other.scale == scale; } @override int get hashCode => Object.hash(url, scale); @override String toString() => '${objectRuntimeType(this, 'SteNetworkImage')}("$url", scale: ${scale.toStringAsFixed(1)})'; }

三百个图表，用 canvas 画的话，应该不会有太大的性能问题。 如果你说的页面不卡是指一进页面就立刻展示图表，那需要你手动控制一下绘制 echarts 图表的时机，比如分批加载数据和渲染。