排查一番发现这样的代码就能 cpu 干一半,里面再嵌套一个 v-for ,cpu 就占八九十了:
<li v-for="menu in menus" :key="menu.key"> </li>
之前一直以为是 ai 插件的锅,屏蔽掉所有 ai 插件后,情况依然如此,把 v-for 相关代码注释掉以后就好了 这是个啥情况啊
]]>With this release, we are unifying Nuxt UI and Nuxt UI Pro into a single, powerful, and completely free open-source library
Blog: https://nuxt.com/blog/nuxt-ui-v4
Nuxt UI: https://ui.nuxt.com/
]]>enum BaseEvent { CLICK = 'click' } interface CustomEvent{ [BaseEvent.CLICK]:string } defineEmits<EmitEvents>()
上面这种写法 @vue/compiler-sfc 会报 Unsupported computed key in type referenced by a macro ,应该怎么写才对?谢谢。
]]>主要是针对这个项目代码评价,没有针对外包崽的意思。 总之是闹麻了,看着就头疼
附部分代码截图,很多地方都很离谱
]]>直接展示代码:
App.vue
<script setup> import { ref, reactive } from 'vue' import Comp from './Comp.vue' // const styleCOnfig= ref({ // fontSize: 16 // }) const styleCOnfig= reactive({ fontSize: 16 }) </script> <template> <p :style="{ fontSize: styleConfig.fontSize + 'px'}">我是字体</p> <Comp v-model="styleConfig" /> </template>
Comp.vue
<script setup lang="ts"> import { reactive, watch } from 'vue' interface StyleConfig { fontSize: number } interface Props { modelValue: StyleConfig } const props = defineProps<Props>() interface Emits { (e: 'update:modelValue', value: StyleConfig): void } const emit = defineEmits<Emits>() const localCOnfig= reactive<StyleConfig>({ ...props.modelValue }) watch(localConfig, (newConfig) => { emit('update:modelValue', { ...newConfig }) }, { deep: true }) </script> <template> <div> <label>字体大小</label> <input v-model="localConfig.fontSize" /> </div> </template>
]]>大会网站: https://vueconf.cn
Vue.js & Vite 作者将给大家带来主题演讲。
Vue & Nuxt & Vite 核心团队成员 Anthony Fu 将出席本次大会,他将给大家分享 Vite DevTools 设计哲学的最新进展,以及未来展望。
Vite 核心团队成员 Matias Capeletto ( patak ) 将通过远程的方式给大家带来主题为《 The first 5 years of Vite 》的演讲。
Vue.js 核心团队成员,Vue Router 、Pinia 、VueFire 等库的作者 Eduardo (posva) 将出席本次会议,给大家带来主题为《流畅的 UI 与异步状态管理》的演讲。
Vue & Vue Macros & Vue Language Tools 团队成员、TS Macro & Vue JSX Vapor 作者高飞将出席本次会议,给大家带来主题为《 Vue JSX Vapor 的进化史》的演讲。
Vue & VueUse 核心团队成员 Doctor Wu 将出席本次会议,给大家带来主题为《 Alien Signals:Vue 响应式演进与最速 Signals 实践》的演讲。
Vue.js 核心团队成员,Volar.js & Vue Language Tools & alien-signals 作者 Johnson 将出席本次会议,并带来主题为《 TSSLint 如何消除 linter 在 IDE 中最大的隐性开销》的演讲。本次分享将会介绍 TSSLint 如何通过重新设计,解决了上述性能问题。
腾讯高级前端工程师吕洋将出席本次会议,给大家带来主题为《浏览器里构建 Vue:渐进式 AI+低代码开发体验》的演讲。
Vue.js 核心团队成员,tsdown / Vue Macros 作者三咲智子将出席本次会议,给大家带来主题为《 tsdown:库库包一切》的演讲。
Vue Vine 作者沈青川将给大家带来主题为《 Vue Vine 1.0 升级报告》的分享。
Vue.js 团队成员、Vue Language Tools 核心贡献者山吹色御守将出席本次会议,给大家带来主题《 Vue Language Tools 的增量更新机制解析》的分享。
]]>写业务的时候发现,因为想偷懒嘛,直接就在想在外部去定义一个变量,然后写个弹窗里( tsx )的 el-input ,而不是又去写个 vue 页面,但发现就输入不了了,而且跟着文档写 textarea 没有字数统计。就两个问题嘛
TSX 的写法嘛,最开始我是这么写的
const auditText = ref(''); // 忽略代码<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }} max-length={50}placeholder="请填写审核不通过原因(最少五个字)"show-word-limittype="textarea" />
然后发现真是一点反应没有啊,然后看了下文档上面的这句话
const auditText = ref<string>(''); function test(value) { console.log(value); auditText.value = value; } //忽略代码 <ElInput model-value={auditText.value} OnInput={test} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因(最少五个字)" show-word-limit type="textarea" />
但是那其实也不用这么麻烦人文档里也写得很清楚了v-model
就行
<ElInput v-model={auditText.value} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因(最少五个字)" show-word-limit type="textarea" />
先看看官网的写法,定义个 maxlength 再定义个 show-word-limit 就有字数统计了
可是如果我在 tsx 里按官网这么写会发生什么那
果然吗,不是 props 的属性就不用写了,原生事件是直接绑定在 attrs 上给 input 标签的,所以写在 tsx 里会报错,写在模版里不会。暂时就忽略这一行检查把~~~。
平时会记录一些简单但好玩的问题,水一篇 vue ,每天一篇 vue 一篇 react 。
]]>需求是二次封装,用在多个项目里,设计器/Builder 是必要的。
如果自己开发工作量又有点大,对于我来说能做集成就绝不自己开发。
]]>@electron/osx-sign
electron-winstaller
dayjs
immer
minimist
nanoid
web-vitals
axios
chalk
electron-squirrel-startup
multistream
inquirer
sanitize-html
qrcode
vue
@byted-sdk/account-api
vue-router
@vueuse/core
file-uri-to-path
file:
协议的 URI 转换为本地文件系统路径。follow-redirects
proxy-from-env
HTTP_PROXY
, HTTPS_PROXY
, NO_PROXY
) 中获取代理设置。form-data
multipart/form-data
类型数据流的库,常用于文件上传。asynckit
combined-stream
mime-types
delayed-stream
data
事件)直到调用 resume()
方法的流。mime-db
supports-color
ansi-styles
has-flag
color-convert
color-name
debug
once
readable-stream
stream
模块中可读流接口的实现,可用于旧版 Node.js 或浏览器环境。wrappy
inherits
util.inherits
方法的独立版本,用于实现对象间的原型继承。util-deprecate
util.deprecate
方法的独立版本,用于标记函数或方法为已废弃。string_decoder
string_decoder
模块的独立版本,用于将 Buffer 对象解码为字符串。safe-buffer
cli-width
lodash
mute-stream
run-async
ansi-escapes
figures
strip-ansi
external-editor
string-width
cli-cursor
wrap-ansi
ora
escape-string-regexp
is-unicode-supported
ansi-regex
chardet
iconv-lite
tmp
safer-buffer
safe-buffer
类似,提供更安全的 Buffer API ,可能是其替代或增强版本。os-tmpdir
os.tmpdir()
方法的 ponyfill (腻子脚本),提供获取操作系统临时目录路径的功能。restore-cursor
onetime
once
功能类似,但可能来自不同作者或有细微差别)。mimic-fn
cli-spinners
is-interactive
log-symbols
wcwidth
wcwidth()
函数,用于计算宽字符(如中日韩字符)在终端中占据的列数。defaults
clone
buffer
base64-js
ieee754
is-plain-object
{}
或 new Object()
创建的对象)。parse-srcset
<img>
标签的 srcset
属性。postcss
htmlparser2
picocolors
source-map-js
domelementtype
htmlparser2
定义 DOM 元素的类型。entities
domhandler
htmlparser2
的一个处理器,用于将解析的 HTML/XML 构建成 DOM 树结构。domutils
domhandler
创建的 DOM 结构的工具函数。dom-serializer
domhandler
创建的 DOM 树渲染回 HTML/XML 字符串。pngjs
yargs
decamelize
fooBar
-> foo_bar
)。require-directory
require()
每个文件,并返回一个嵌套的哈希结构。which-module
y18n
yargs
使用的轻量级国际化 (i18n) 库。find-up
camelcase
is-fullwidth-code-point
path-exists
locate-path
p-locate
p-limit
p-try
Promise.try()
的 ponyfill ,用于启动一个 Promise 链。core-js-pure
js-cookie
fast-glob * 作用: 一个快速的 glob 模式匹配库(用于文件路径匹配)。
@nodelib/fs.stat * 作用: 提供具有扩展 API 的 fs.stat
和 fs.lstat
方法。
merge2 * 作用: 将多个流( streams )按顺序或并行合并为一个流。
glob-parent * 作用: 从 glob 字符串中提取出非通配符部分的父路径。
@nodelib/fs.walk * 作用: 提供遍历目录的方法。
micromatch * 作用: 高度优化的通配符和 glob 模式匹配库。
is-glob * 作用: 判断一个字符串是否看起来像一个 glob 模式或扩展 glob 模式。
is-extglob * 作用: 判断一个字符串是否为扩展 glob (extglob) 模式。
fastq * 作用: 一个快速、简单、基于 Promise 的异步队列。
@nodelib/fs.scandir * 作用: 提供 fs.scandir
方法,用于扫描目录内容。
reusify * 作用: 高效地重用对象,减少垃圾回收。
run-parallel * 作用: 并行运行一组函数。
queue-microtask * 作用: 一个用于将函数排队到微任务( microtask )中执行的微型库。
picomatch * 作用: 一个非常快速且准确的 Javascript glob 模式匹配器。
braces * 作用: Javascript 实现的类似 Bash 的花括号扩展功能(例如 a{b,c}d
-> abd, acd
)。
fill-range * 作用: 填充一个数字或字母范围,可以指定步长,或创建一个与正则表达式兼容的范围。
to-regex-range * 作用: 从两个数字或字母创建一个与正则表达式兼容的范围。
is-number * 作用: 判断一个值是否为数字类型。
node-machine-id * 作用: 获取一个唯一的机器 ID 。
@vue/shared * 作用: Vue.js 内部包共享的工具函数。
@vue/runtime-dom * 作用: Vue.js 针对 DOM 环境的运行时。
@vue/compiler-dom * 作用: Vue.js 针对 DOM 环境的编译器。
@vue/compiler-sfc * 作用: Vue.js 单文件组件 (SFC, .vue 文件) 的编译器。
@vue/server-renderer * 作用: Vue.js 用于服务器端渲染 (SSR) 的包。
csstype * 作用: 为 TypeScript 提供严格类型的 CSS 属性和值定义。
@vue/runtime-core * 作用: Vue.js 的运行时核心,平台无关。
@vue/reactivity * 作用: Vue.js 的响应式系统核心。
@vue/compiler-core * 作用: Vue.js 的编译器核心,平台无关。
estree-walker * 作用: 用于遍历符合 ESTree 规范的抽象语法树 (AST)。
@babel/parser * 作用: Babel 使用的 Javascript 解析器,可以将 Javascript 代码转换为 AST 。
@babel/types * 作用: Babel 用于处理 AST 节点的工具函数和类型定义。
@babel/helper-string-parser * 作用: Babel 内部用于解析字符串的辅助函数。
@babel/helper-validator-identifier * 作用: Babel 内部用于验证标识符(变量名等)的辅助函数。
to-fast-properties * 作用: 强制 V8 引擎对一个对象使用“快速属性”模式,以优化性能。
magic-string * 作用: 一个用于操作字符串并能生成对应 source map 的库。
@vue/reactivity-transform * 作用: Vue.js 实验性的响应式语法糖转换。
@vue/compiler-ssr * 作用: Vue.js 针对服务器端渲染 (SSR) 的编译器。
@jridgewell/sourcemap-codec * 作用: 用于编码和解码 sourcemap VLQ (Variable Length Quantity) 段。
crypto-js * 作用: 一个 Javascript 的加密标准库,支持多种加密算法和哈希函数。
isuri * 作用: 检查一个字符串是否为有效的 URI 。
rfc-3986 * 作用: 验证 URI 是否符合 RFC 3986 标准。
@vueuse/metadata * 作用: VueUse 内部使用的元数据。
vue-demi * 作用: 一个开发工具,允许编写通用的 Vue 库,使其同时兼容 Vue 2 和 Vue 3 。
@vueuse/shared * 作用: VueUse 库共享的工具函数。
plist * 作用: Apple 的属性列表 (Property List, .plist) 文件解析器和构建器。
fs-extra * 作用: 扩展了 Node.js 内置 fs
模块的功能,添加了更多文件系统操作方法,并为 fs
方法增加了 Promise 支持。
xmlbuilder * 作用: 一个用于 Node.js 的 XML 构建器。
graceful-fs * 作用: fs
模块的替代品,进行了一些改进,例如更好地处理文件系统错误和资源限制。
universalify * 作用: 将回调风格的函数转换为 Promise 风格的函数,反之亦然。
jsonfile * 作用: 方便地读取和写入 JSON 文件。
lodash.template * 作用: Lodash 库中的 _.template
方法,用于创建编译模板函数。
temp * 作用: Node.js 的临时文件和目录创建工具 (与 tmp
类似,可能由不同依赖使用)。
lodash.templatesettings * 作用: Lodash 库中的 _.templateSettings
方法,用于配置 _.template
的行为。
commander * 作用: Node.js 命令行界面解决方案,使创建命令行工具更简单。
minimatch * 作用: 一个轻量级的 glob 模式匹配工具。
glob * 作用: 为 Node.js 提供 glob 功能(文件名模式匹配)。
brace-expansion * 作用: 实现类似 Bash 的花括号扩展功能(已在 braces
中列出,功能相同)。
concat-map * 作用: 一个 map
函数,其回调可以返回一个数组或单个值,结果会被展平。
fs.realpath * 作用: Node.js fs.realpath
方法的实现或 ponyfill ,用于解析符号链接并返回规范化的绝对路径。
path-is-absolute * 作用: Node.js path.isAbsolute()
方法的 ponyfill ,判断路径是否为绝对路径。
inflight * 作用: 防止对同一资源发起重复的异步请求,而是将回调添加到正在进行的请求上。
mkdirp * 作用: 递归地创建目录,类似 Unix 命令 mkdir -p
。
rimraf * 作用: Node.js 实现的 rm -rf
命令,用于递归地删除文件和目录。
今年,我们将再次相聚在深圳(老地方),共同迎来 VueConf 2025 !
👨💻👩💻 本次大会将有 11 位演讲嘉宾 登场——既有大家熟悉的老朋友,也有首次亮相的新面孔。无论你是 Vue 的资深爱好者,还是刚入门的新手,这里都能找到属于你的技术干货与灵感火花!
🔥 为什么不能错过 VueConf 2025 ?
立即抢票 👉 https://vueconf.cn/
让我们一起在深圳,感受 Vue 的魅力!
VueConf 2025 ,不见不散!
]]>单向数据流版简单 demo
layouts.vue AComponent.vue
BComponent.vue
状态管理流版简单 demo
layouts.vue AComponent.vue
BComponent.vue
WSL 版本:2.4.12.0
内核版本:5.15.167.4-1
网络模式:Mirrored
WSL2 安装的是 Ubuntu 22.04.5 LTS
目前遇到的问题是 开启系统代理(无论是 Fiddler Everywhere 或者 Clash Verge )后,会出现一些请求特别特别慢的情况。
我是使用 Cursor +WSL2 开发的模式,启动一个 vue3 的项目,发现每次只要打开系统代理,刷新页面总会有几个请求需要加载几十秒甚至 1 分钟以上才能请求完成,而且 vue 的 hot reload 也完全没办法用,卡住的请求并不是固定的,但每次都会随机卡住几个。
目前怀疑的点,强制刷新页面后,在开发模式下,可能需要加载几十上百个文件,是不是大量文件加载导致的这个问题?
我应该如何排查和解决问题?求大佬指点。
]]>我在 Ubuntu 20.04 和 Ubuntu 24.04 上,用 nodejs 18-23 都无法成功 build ,均报 typescript 语法错误。可见 https://github.com/am32-firmware/am32-configurator/issues/29
我并不想改他的源码,我觉得这肯定是环境问题。
有谁能帮忙解决环境问题,告诉我你的各种工具版本号,以及支付宝 / Paypal 账号,我发 88 元红包(不多,希望专业的 V 友能帮个忙)
]]>旧的 page route 结构,经常 page 和 component 两个目录来回跳
- page - about.tsx - component # 纯组件 - componentA.tsx - componentB.tsx - container # 和业务耦合的组件 - componentC.tsx
app route 文件结构类似这样,只在 about 页面使用的组件完全可以放在 about 下,如果出现多页面复用组件再升级到 component 或者 container 目录
- page - about - page.tsx - componentA.tsx - componentB.tsx - componentC.tsx
]]>这里显然没有正确解析出样式来,我试了很多方法都没能解决这个问题,各个 ai 问了个遍了,然后去网上找了好多方法,还是没搞定,下面是我这个页面的源码,有没有大佬帮我看看到底该怎么解决这个问题啊?小弟我感激不尽啊
<template> <div class="layout"> <div class="menu"> <RouterLink to="/" class="re-home">返回首页</RouterLink> <!-- Logo --> <div class="logo"> <img :src="logo" draggable="false" alt="logo" class="logo-img" /> <span class="logo-span">柑橘智能问答</span> </div> </div> <div class="chat"> <!-- 消息列表 --> <Bubble.List :items="messages" class="messages" style="flex: 1" :messageRender="renderMarkdown" :roles="{ ai: { placement: 'start', typing: { step: 5, interval: 20 }, styles: { content: { borderRadius: '16px' } } }, local: { placement: 'end', variant: 'shadow' } }" /> <!-- 输入框 --> <Sender :value="content" class="sender" @submit="onSubmit" @update:value="(val) => (cOntent= val)" /> </div> </div> </template> <script setup> import { ref, h } from 'vue' import { Conversations, Prompts, Sender, Bubble } from 'ant-design-x-vue' import { Edit, Delete } from '@element-plus/icons-vue' import reqAIChat from '@/api/chat/index' import { message } from 'ant-design-vue' import { ElMessage } from 'element-plus' import logo from '@/assets/images/logo.png' import { marked } from 'marked' import hljs from 'highlight.js' import 'highlight.js/styles/github.css' marked.setOptions({ highlight: (code) => hljs.highlightAuto(code).value, breaks: true, gfm: true }) marked.use({ renderer: { link(href, title, text) { return `<a href="${href}" target="_blank" rel="noopener">${text}</a>` } } }) const renderMarkdown = (content, item) => { if (item?.isMarkdown) { return h('Typography', { class: 'markdown-container' }, [ h('div', { innerHTML: marked.parse(content), // Vue 3 直接注入 HTML class: 'markdown-body' }) ]) } return content // 普通文本直接返回 } const cOntent= ref('') const messages = ref([ { key: '1', content: '## Markdown 测试\n[链接]( https://x.ant.design)1. **橙( Orange )**:包括甜橙和酸橙,甜橙中又分为脐橙、瓦伦西亚橙等。2. **柑橘( Mandarin )**:也称为蜜橘,包括各种小型、易剥皮的柑橘。3. **柚子( Pomelo )**:也称为文旦,是柑橘类中最大的一种。4. **柠檬( Lemon )**:以其酸味和香气闻名。5. **青柠( Lime )**:比柠檬小,酸味较轻。6. **葡萄柚( Grapefruit )**:大小和形状类似葡萄,味道可以是甜的也可以是酸的。', role: 'ai', variant: 'primary', isMarkdown: true } ]) const activeKey = ref('0') const cOnversationsItems= ref( Array.from({ length: 2 }).map((_, index) => ({ key: `item${index + 1}`, label: `未命名对话 ${index + 1}` })) ) const OnSubmit= async (nextContent) => { if (!nextContent) return messages.value.push({ key: `${messages.value.length + 1}`, content: nextContent, role: 'local', variant: 'shadow' }) content.value = '' try { const res = await reqAIChat({ message: nextContent }) if (!res) { ElMessage({ message: '请求失败', type: 'error' }) return } messages.value.push({ key: `${messages.value.length + 1}`, content: res, role: 'ai', variant: 'primary', isMarkdown: true }) } catch (error) { ElMessage({ message: '请求出错', type: 'error' }) } } const OnAddConversation= () => { conversationsItems.value.push({ key: `${conversationsItems.value.length + 1}`, label: `未命名对话${conversationsItems.value.length + 1}` }) activeKey.value = `${conversationsItems.value.length + 1}` } const menuCOnfig= (conversation) => { return { items: [ { label: '编辑', key: 'edit', icon: () => h(Edit) }, { label: '删除', key: 'delete', icon: () => h(Delete), danger: true } ], onClick: (menuInfo) => { message.info(`点击 ${conversation.key} - ${menuInfo.key}`) } } } </script> <style scoped> .markdown-body { padding: 12px 16px; line-height: 1.7; /* 必须继承字体 */ font-family: inherit; /* 代码块样式 */ pre { padding: 12px; border-radius: 8px; background: #f6f8fa !important; } code { font-family: 'SFMono-Regular', Consolas, monospace; } } .markdown-body { line-height: 1.6; color: #333; } .re-home { display: inline-block; padding: 10px 20px; margin: 12px; background: #ffa500; color: white; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: bold; text-align: center; transition: background-color 0.3s ease; } .layout { width: 100%; min-width: 1000px; height: 722px; display: flex; background: #fff; font-family: AlibabaPuHuiTi, sans-serif; } .menu { padding: 24px 0; /* background: #fff; */ width: 280px; height: 100%; display: flex; flex-direction: column; background: rgba(245, 245, 245, 0.5); } .logo { display: flex; height: 72px; align-items: center; justify-content: start; padding: 0 24px; } .logo-img { width: 24px; height: 24px; } .logo-span { margin: 0 8px; font-weight: bold; color: #333; font-size: 16px; } .add-btn { background: #1677ff0f; border: 1px solid #1677ff34; width: calc(100% - 24px); cursor: pointer; margin: 0 12px 24px 12px; font-size: 14px; height: 32px; padding: 4px 15px; border-radius: 6px; } .add-btn:hover { color: #69b1ff; } .chat { height: 100%; width: 100%; max-width: 700px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px; gap: 16px; } </style>
这里 content 里已经有一些写死的内容了,那是我用来测试的,就是想着如果可以解析了那么这些写死的内容是会被正确解析上去的,但是我看了好久都没搞懂该怎么解决这个问题,所以这个写死的内容也一直留着了
]]>不吹不黑,如果说 tsx 的 typescript 支持跟 vue3 的 template 支持差距不大,也就不说了,tsc 检查 template 无法提示组件不存在的属性,官方 vscode 插件 vue official 2.2.8 版本 用起来更是让人蛋疼,组件自动识别飘忽不定,高亮也是飘忽不定,就连 script 部分提示也会出错。
也许你会说重启试试,无法自动导入,手动导入呀,template 支持不行,你也可以用 tsx 写呀
也有人说,我写代码就是一把梭,复制粘贴,什么 typescript ,直接 anyscript 和 unkonwscript 走起
我只能说对对对
]]>最近 ai 告诉我 props 不是最佳实践,emit 是最佳实践,可我用 cursor 给我生成的代码清一色都是 props 模式,给我整不会了
其实我感觉用 Vue3 tsx 的话,什么 v-model 和 emit 这些都没必要了,和 react 一样 props 到底就好了
]]>哪位大佬给我讲讲,这里面的原理
<Hello :title="" :item="" />
这个 T 是根据第一个 Prop 参数推倒的?
根据顺序来的?还是怎样?当有多个 Prop 时,
是根据调用组件写的 Prop 顺序,还是定义 Prop 顺序,还是怎样?
完全懵逼中?
]]>
如题,我现在在做一个项目,我是 Windows ,技术栈是 VITE+VUE3+TS ,上传也没用后端,直接生成 blob 格式链接,(只让上传 svg 格式图片)如:blob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e
我现在已经实现了转换 png 和 ico 格式图片,但转换 icns 一直没找到如何实现,找到一个 png2icons ,但一直有莫名其妙的报错,我试了好久也不行,特来求助了
简单附一下我转换的代码console.log("Processing images...:", props.uploadedImage); // blob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e const image = await loadImage(props.uploadedImage); const smallImage: any = await resizeImage(image, 32, 32, "png"); // 调整为输出 png 格式
]]>const {data:list}
开头的代码进行解构,难道 ref 就没法解构吗 ]]>const pagination = reactive({ page: 1, total: 9, page_size: 3 }) const showChart = computed(() => (i: number) => { let offset = (pagination.page-1)*pagination.page_size console.log(i, i > offset && i <= offset+pagination.page_size) return i > offset && i <= offset+pagination.page_size })
首次展示正确,点击分页按钮后不切换,这个怎么实现?
]]><div v-if="item.type=='multi-select'"> <el-select-v2 ref="selectMultiRef" class="bar" v-model="selectedValues[item.value]" filterable placeholder="Select" clearable highlight-current-row :optiOns="filteredOptions(item).value" @change="updateOptions" :filter-method="filterMethod" multiple > </el-select-v2> </div>
filterMethod 具体是
const filterMethod = (query:any) => { let optiOns= selectMultiRef.value[0].allOptions const escapeStringRegexp = (string = '') => string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d') const regexp = new RegExp(escapeStringRegexp(query), 'i') let filteredOptiOns= options.filter((opt: any) => { return query ? regexp.test(opt.label || '') : true }).sort((a: any, b: any) => { const aStartsWith = a.label.toLowerCase().startsWith(query.toLowerCase()); const bStartsWith = b.label.toLowerCase().startsWith(query.toLowerCase()); return (aStartsWith === bStartsWith) ? 0 : (aStartsWith ? -1 : 1); }) selectMultiRef.value[0].optiOns= filteredOptions //这行报错 };
报错信息:TypeError: 'set' on proxy: trap returned falsish for property 'options'
要实现需求:通过 filterMethod 将筛选后的选项与 query 字符串前缀排序
搜了一下,stackoverflow 上类似报错的答案是把:optiOns="filteredOptions(item).value"的 options 换成一个变量,之后 filterMethod 给这个变量赋值,最后达到效果。
现在的问题是整个代码是一个组件,父组件传进来一个数组,之后再把每个 item 赋值给各个 select 组件。 这样就不好把每个 select 组件的 options 都设置一个变量。
请教各位大佬,有没有什么方法能直接通过 filterMethod 修改 select 的 options
]]>组件共享问题:如果在管理端进行操作并且预览的话,无法实现管理端组件和客户端组件的共用(两个项目相互独立),参考过其他开源项目使用 iframe (嵌入)客户端传参方式的方案,感觉整体交互会比较复杂。
首页加载问题:既然是门户网站,想来是不是使用 ssr 比如 nuxt 是不是更好,但是这样的话技术曲线会增高,因为之前也没接触过。如果使用传统单页面的方案,前端接收 JSON 来渲染组件铺首页,效果肯定很差,会有先白屏的效果,体验应该也不会太好。
渲染问题:有没有什么方案,可以不用编译就可以动态渲染页面,这样我更改完界面,客户端就直接看到效果,而不是使用接口拿 JSON 铺组件的效果,vite 或者 nuxt 可以么?
或者有没有这方面的开源项目,可以给小弟参考参考
]]><el-col v-if=" switchFn(item.configType, item).includes('address') " > <el-form-item :prop="`item.address`" :rules="[ { required: true, message: '必填项', trigger: 'blur' }]" label="地址" > <el-input v-model="item.address"/> </el-form-item> </el-col>
]]><template> <view class="w100" :change:bb="auto" :bb="bb">测试</view> </template> <script> export default { data() { return { bb:1, } }, methods: { auto(newValue, oldValue, ownerInstance, instance) { console.log(newValue, oldValue, ownerInstance, instance) setTimeout(() => {console.log(this.bb);this.bb = this.bb + 1;}, 2000); } } </script>
这种用法是立即执行的 watch 监听,可以检测 bb 的值的变化,实测只能监测元素上绑定的值如 bb ,uniapp 文档里也没找到有这种用法的说明,有大佬知道吗
]]>createNode.js
的部分代码片段如下,本意是想看下创建组件时的时间戳:
function getTimeStamp() { let timeNow = Date.now(); console.log("create: ", timeNow); return timeNow; } export function createNameComponent(component) { return () => { return new Promise((resolve) => { component().then((comm) => { const tempComm = defineComponent({ name: (comm.default.name || "vueAdminBox") + "_" + getTimeStamp(), props: comm.default.props || {}, ...
当前实现效果如下:
可以看到,组件只有第一次打开时会触发getTimeStamp
函数,关闭再打开就不会重新获取时间戳了。
我期望每次打开标签页都是不同的时间戳,有老哥遇到这个问题吗?
]]>