基于vue3+vite+自定义视图的思维导图

年底摸鱼突然发现一个国庆节写的研究型插件分享给大家。
这个项目基于vue3+vite+自定义视图,新注册了一个后缀用来处理,有点类似的官方的白板功能实现。
你也可以直接用这个项目用vue来开发插件。感觉ob成了一个特化形态的vscode了

有兴趣的可以下载使用,但是不确定有没有bug。效果

1 个赞

补充一下链接 GitHub - renmu123/obsidian-mind-map 。论坛我摸得不多,如果有什么建议可以去issue提

链接发错了吧,仓库里没搜到vue

确实贴错了,已修正

vue obsidian文档 有兴趣吗?

这个项目好像是翻译项目,我之后整理一下出个模板代码

我的意思是加vue和vite进obsidian生态。

只有vue不算什么优势,vite的动态调试才是。

ob的插件只能静态加载main.js,而且代码更改后需要重启插件才能生效,vite起不到什么作用的。

不用重启也能生效的,在插件管理器里关一下,再开就行了。

如果没有vite,vue和react相比并不具有什么优势。

如果觉得可行,在我给的链接里留个言。

这不就是重启插件,我用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我都是临时抱佛脚, 感谢您的细心回复, 收获良多 :rofl:

// 当 input 标签的内容被更改时 … (因为您用的是第三方的 UI 库,我不清楚您所使用的 UI 库要如何捕捉 input 标签内容被更改时的动作,这里可能需要您自己实现)
… {
// 修改 输入对话框返回值
this.输入对话框返回值 = …
}

那个 modal_vue输入弹窗函数就是包装一下new 语句, 我是想做成函数的方式来创建这个modal类实例, 然后返回输入的值, 方便我直接用函数来创建弹窗

function modal_vue输入弹窗(app实例: App, 对话框配置: Array ) {
new vue输入弹窗(app实例, 对话框配置).open();
}

vue组件的代码如下, 我直接用截图有语法高亮给你看得比较清晰, 本意是接收从app端传来的配置参数创建任意个数的input输入标签, 获取输入的值返回然后进一步加工最后扔到编辑器里:


css

vueapp全局变量的定义:

晚上好!您提供的代码暂时没法通过编译,编译错误主要集中在 “naive输入弹窗.vue” 文件。


或许我已经大致明白您的意思:

  1. 您希望使用函数包装 new 语句,通过调用函数的方式方便创建 “弹窗modal类实例”。
  2. 您希望 vue组件 可以接收从 app端 传来的配置参数创建任意个数的 input 输入标签,点击按钮后获取输入的值返回给 app端,由 app端 进行进一步加工最后扔到编辑器里。
  3. app端 → vue组件端 的数据传输您已经找到了解决方法,即通过 provide()inject() 方法将数据从 app端 传入 vue组件端。
  4. 但 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.tsthis.addCommand() 函数里直接用 new Vue弹窗().open() 更麻烦,


这里是源码 链接:https://pan.baidu.com/s/1Fd0oiW5jb7XwXVeJKlBOoA?pwd=7777 提取码:7777
非常感谢您的细致和耐心, 现在时间不早了, 早点休息比较好, 顺祝您新年愉快~ :kissing_heart:

经过测试发现, vueapp 使用 app.config.globalProperties.vue全局对话框返回值 设置的全局属性仅可以访问却无法被子组件修改, 因此在 modal.ts 文件里即便使用 原生addButton 的 onClick() 函数也无法获得 vue子组件内的返回值


目前仍然卡在 vue app实例 与子组件的双向数据传递

你可以在vue文件的script开头加上 // @ts-nocheck 来跳过ts的编译检查,或者把tsconfig.json中的strict参数修改为false

1 个赞