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

开发讨论
1

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

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

image
image587×541 10.7 KB

2 个赞
2

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

3

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

4

确实贴错了，已修正

5

vue obsidian文档 有兴趣吗?

1 个赞
6

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

7

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

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

1 个赞
8

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

9

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

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

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

1 个赞
10

这不就是重启插件，我用vue做得原因是我只会vue，不会react，vite现在也可以用于react，你感兴趣的话可以折腾一下

11

非常感谢！一直想找使用 vue 框架的插件开发模板（因为官方好像只提供了 react 和 svelte 框架的说…）

12

请教一下, 我用modal 写了个自定义的vue组件的弹窗, 这个弹窗是接收一些input标签的输入值, 在这个弹窗modal类里面写了 onOpen() 和 onClose() 函数, 现在如何让这个弹窗的里的输入值, 返回给编辑器呢

Tkd0lUQqlH
Tkd0lUQqlH1503×721 198 KB

1 个赞
13

如果是从一个异步的 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 个赞
14

哈哈, 谢谢大佬, 这里其实我用的原生的html元素, js和ts,vue我都是临时抱佛脚, 感谢您的细心回复, 收获良多 :rofl:

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

15

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

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

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

vue代码
vue代码962×865 91.5 KB

css

vueapp全局变量的定义:

fmY3C3youv
fmY3C3youv648×672 72.1 KB

16

晚上好！您提供的代码暂时没法通过编译，编译错误主要集中在 “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组件端 的数据传输。
17

正常开启开发环境是有点问题, 还不清楚如何修改, 但是有办法绕过去
把 vue文件的 methods:{} 和 mounted(){} 的内容注释掉, 然后运行 npm run dev, 就可以编译, 然后再取消 methods 和 mounted 的注释, 再次编译即可,

18

对的, 还不知道怎么让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
非常感谢您的细致和耐心, 现在时间不早了, 早点休息比较好, 顺祝您新年愉快~ :kissing_heart:

19

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

vueapp全局属性问题
vueapp全局属性问题737×852 44.4 KB

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

20

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

1 个赞