年底摸鱼突然发现一个国庆节写的研究型插件分享给大家。
这个项目基于vue3+vite+自定义视图，新注册了一个后缀用来处理，有点类似的官方的白板功能实现。
你也可以直接用这个项目用vue来开发插件。感觉ob成了一个特化形态的vscode了
有兴趣的可以下载使用，但是不确定有没有bug。效果
2 个赞
链接发错了吧，仓库里没搜到vue
确实贴错了，已修正
这个项目好像是翻译项目，我之后整理一下出个模板代码
我的意思是加vue和vite进obsidian生态。
只有vue不算什么优势，vite的动态调试才是。
1 个赞
ob的插件只能静态加载main.js，而且代码更改后需要重启插件才能生效，vite起不到什么作用的。
不用重启也能生效的，在插件管理器里关一下，再开就行了。
如果没有vite，vue和react相比并不具有什么优势。
如果觉得可行，在我给的链接里留个言。
1 个赞
这不就是重启插件，我用vue做得原因是我只会vue，不会react，vite现在也可以用于react，你感兴趣的话可以折腾一下
非常感谢！一直想找使用 vue 框架的插件开发模板（因为官方好像只提供了 react 和 svelte 框架的说…）
请教一下, 我用modal 写了个自定义的vue组件的弹窗, 这个弹窗是接收一些input标签的输入值, 在这个弹窗modal类里面写了 onOpen() 和 onClose() 函数, 现在如何让这个弹窗的里的输入值, 返回给编辑器呢
1 个赞
如果是从一个异步的 async function 那里取得返回值的话，或许可以试试加上 await ？
等待异步执行完毕并确保取得返回值后才继续往下执行。
哦哦，看了一下，您好像是想使用 Obsidian 的命令面板，当选择 “101tool_vue输入弹窗” 命令时，打开您自己写的 “vue输入弹窗”，然后在弹窗里的 “Naive Input 组件” 输入值，最后当点击 “vue按钮组件” 时，让这个弹窗里的输入值，返回给编辑器。
您左边代码的 callback: () => {} 是当选择 “101tool_vue输入弹窗” 命令时要执行的内容。因为我没有看到您写的 modal_vue输入1弹窗() 函数定义在哪里，所以我不知道您具体是怎么实现的，而且这个 输入对话框返回值 您是不是把它定义成全局变量了，其实并不需要，我们比较推荐 “函数回调” 这种写法：
this.addCommand({
id: '101tool_vue输入弹窗',
name: '101tool_vue输入弹窗',
callback: () => {
// 创建一个 vue输入弹窗 实例，并调用 .open() 函数打开弹窗
// 传入 this.app 和 对话框配置 参数
// 从 回调函数 取得返回值（是否需要加 await 看情况）
new vue输入弹窗(this.app, [
{ id: 0, 标题: "父级标题1", 描述: "输入1提示信息：", 默认文本: "描述信息1" },
{ id: 0, 标题: "父级标题2", 描述: "输入2提示信息：", 默认文本: "描述信息2" },
{ id: 0, 标题: "父级标题3", 描述: "输入3提示信息：", 默认文本: "描述信息3" }
], (输入对话框返回值) => {
// 从 回调函数 取得返回值之后执行的内容
print(`输入的值是：${输入对话框返回值}`)
}).open()
}
})
// 定义 vue输入弹窗 类
export class vue输入弹窗 extends Modal {
// 定义类变量
对话框配置: Array<object>
输入对话框返回值: any[]
回调函数: (输入对话框返回值: any[]) => void
// 构造函数，当创建一个 vue输入弹窗 实例时，需要传入 app 和 对话框配置 参数，同时通过 回调函数 返回值
constructor(app: App, 对话框配置: Array<object>, 回调函数: (输入对话框返回值: any[]) => void) {
super(app)
this.对话框配置 = 对话框配置
this.回调函数 = 回调函数
}
onOpen() {
let { containerEl } = this
// containerEl.empty()
// 因为在 onClose() 函数那里已经 empty 了，所以这里没有必要再 empty 一次
// 也就是说，当对话框关闭的时候资源已经释放了，所以当对话框打开的时候资源本来就是空的，没必要再释放一次
const vue输入界面容器 = containerEl.createDiv()
let vueapp = createApp(naive输入弹窗) // 创建 按钮vue 实例
vueapp.provide('对话框配置', this.对话框配置) // 将对话框配置参数下传
vueapp.mount(vue输入界面容器) // 将 vue按钮 实例挂载到容器元素
// 当 input 标签的内容被更改时 ... （因为您用的是第三方的 UI 库，我不清楚您所使用的 UI 库要如何捕捉 input 标签内容被更改时的动作，这里可能需要您自己实现）
... {
// 修改 输入对话框返回值
this.输入对话框返回值 = ...
}
// 当 vue按钮 被点击时 ...（因为您用的是第三方的 UI 库，我不清楚您所使用的 UI 库要如何捕捉按钮被点击时的动作，这里可能需要您自己实现）
... {
// 执行 回调函数 返回值，然后关闭弹窗
this.回调函数(this.输入对话框返回值)
this.close()
}
}
onClose() {
let { containerEl } = this
// 当弹窗被关闭时释放所有资源
containerEl.empty()
}
}
您可以向我们提供更多信息，以便我们可以为您提供更多针对性的建议。
1 个赞
哈哈, 谢谢大佬, 这里其实我用的原生的html元素, js和ts,vue我都是临时抱佛脚, 感谢您的细心回复, 收获良多 
// 当 input 标签的内容被更改时 … （因为您用的是第三方的 UI 库，我不清楚您所使用的 UI 库要如何捕捉 input 标签内容被更改时的动作，这里可能需要您自己实现）
… {
// 修改 输入对话框返回值
this.输入对话框返回值 = …
}
那个 modal_vue输入弹窗函数就是包装一下new 语句, 我是想做成函数的方式来创建这个modal类实例, 然后返回输入的值, 方便我直接用函数来创建弹窗
function modal_vue输入弹窗(app实例: App, 对话框配置: Array ) {
new vue输入弹窗(app实例, 对话框配置).open();
}
vue组件的代码如下, 我直接用截图有语法高亮给你看得比较清晰, 本意是接收从app端传来的配置参数创建任意个数的input输入标签, 获取输入的值返回然后进一步加工最后扔到编辑器里:
vueapp全局变量的定义:
晚上好！您提供的代码暂时没法通过编译，编译错误主要集中在 “naive输入弹窗.vue” 文件。
或许我已经大致明白您的意思：
- 您希望使用函数包装 new 语句，通过调用函数的方式方便创建 “弹窗modal类实例”。
- 您希望 vue组件 可以接收从 app端 传来的配置参数创建任意个数的 input 输入标签，点击按钮后获取输入的值返回给 app端，由 app端 进行进一步加工最后扔到编辑器里。
- app端 → vue组件端 的数据传输您已经找到了解决方法，即通过
provide()和inject()方法将数据从 app端 传入 vue组件端。 - 但 vue组件端 → app端 的数据传输您还未找到特别好的解决方案，目前您正在尝试创建一个全局变量 “vue全局对话框返回值”，使其在 app端 和 vue组件端 均可以使用，在其中一端修改值，另一端可以同步更改，通过这种方式来实现 app端 和 vue组件端 的数据传输。
正常开启开发环境是有点问题, 还不清楚如何修改, 但是有办法绕过去
把 vue文件的 methods:{} 和 mounted(){} 的内容注释掉, 然后运行 npm run dev, 就可以编译, 然后再取消 methods 和 mounted 的注释, 再次编译即可,
对的, 还不知道怎么让app实例 捕捉vue组件的 button 的click触发的函数, 只要执行了button的触发函数, 就会为 vue全局变量赋值, 然后modal 类里面只要能捕捉到事件触发的信号, 就可以直接使用 vue全局变量的值
目前正在尝试功能分离, vue组件的 button 仅为 vue全局变量赋值, 而后追加一个 OB的原生按钮, OB的按钮负责获取 vue全局变量的值, 返回给 main.ts 里的封装函数并关闭弹窗, 这个函数封装会比直接在 main.ts 的 this.addCommand() 函数里直接用 new Vue弹窗().open() 更麻烦,
这里是源码 链接：https://pan.baidu.com/s/1Fd0oiW5jb7XwXVeJKlBOoA?pwd=7777 提取码：7777
非常感谢您的细致和耐心, 现在时间不早了, 早点休息比较好, 顺祝您新年愉快~ 
经过测试发现, vueapp 使用 app.config.globalProperties.vue全局对话框返回值 设置的全局属性仅可以访问却无法被子组件修改, 因此在 modal.ts 文件里即便使用 原生addButton 的 onClick() 函数也无法获得 vue子组件内的返回值
目前仍然卡在 vue app实例 与子组件的双向数据传递
你可以在vue文件的script开头加上 // @ts-nocheck 来跳过ts的编译检查，或者把tsconfig.json中的strict参数修改为false
1 个赞