大佬牛逼, 又学到一招
我差不多改了一下，不知道是不是满足你的要求，我引入一个库mitt来实现，理论上只用回调函数也能做，就是没那么优雅。
现在在vue输入弹框点击get输入按钮，可以在ts组件中获取传递的参数
你需要先进行安装npm install mitt，并在modal对话框.ts文件开头引入 import mitt from "mitt";
vue输入弹窗.onOpen()
onOpen() {
let { containerEl } = this;
// containerEl.empty()
const vue输入弹窗容器 = containerEl
.getElementsByClassName("modal-content")[0]
.createEl("div");
let vueapp = createApp(naive输入弹窗); // 创建按钮vue实例
vueapp.provide("对话框配置", this.对话框配置); //将对话款配置参数下传
vueapp.mount(vue输入弹窗容器); // 将vue按钮实例挂载到容器元素
vueapp.config.globalProperties.vue全局对话框返回值 = []; //vueapp全局属性
const emitter = mitt()
vueapp.config.globalProperties.$emitter = emitter
emitter.on("test", (data)=>{
console.log(`test-callback${data}`);
})
}
native输入弹框.vue
获取输入值() {
for (let i of this.输入提示列表) {
this.输入值列表[i.id] = this.$refs[`input${i.id}`][0].value;
}
console.log(`输入值列表:${this.输入值列表}`);
this.vue全局对话框返回值 = this.输入值列表;
this.$emitter.emit('test', this.输入值列表)
},
1 个赞
哈哈哈非常感谢~, 这个应该可行, 就是多引用了一个mitt, 虽然我完全不知道这个干嘛的, 功能上看来是一个实现不借助vue父组件来接收vue子组件数据的桥梁. 我也刚正在尝试在 vue子组件内, 使用 this.$emit("父组件监听", this.输入值列表) 来传递事件, 然后 在modal 类的 onOpen() 函数里 使用 createApp({ … }) 的方式来接收子组件的数据, 如下图,
但还没有成功, 不知道您可否帮忙试下这个思路, 在OB里会报错:
runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.
at
vue3 版本已经移除emit和on相关的api，mitt库算是一个替代。
晚上好！昨晚睡着了，今天都在窜亲戚 
，还没有认真看您的回复，不好意思。这应该是 vue组件 的通信问题，that’s a good issue ， 我们计划以此为契机重新编写 Obsidian 插件开发中文文档的 Vue 指南，加入 vue组件 通信部分的内容，非常感谢您对 Obsidian 社区的贡献！
客气客气, 感谢您的细心指导, 希望能多出一些教程
开发 Obsidian 插件的时候，我们经常会定义许多不同的类，比如继承于 Plugin 的插件类、继承于 Modal 的弹窗类、继承于 PluginSettingTab 的设置页类，然后我们会经常将某一个类直接作为参数导入到另一个类里，这样在另一个类里就可以使用导入的这个类的所有变量和函数。
然后……借鉴这种想法，或许可以……
vue输入弹窗.ts
vueapp.config.globalProperties.modal = this
naive输入弹窗.vue
this.modal?.对话框返回值 = this.输入值列表
this.modal?.回调函数(this.modal?.对话框返回值)
this.modal?.close()
我稍微尝试了一下貌似是可以的…… 既然无法在 app端 直接捕捉 vue组件 的事件，那就直接在 vue组件 里完成后续的操作。哈哈哈，纯属花活，mitt库 才是正解！
这个很有意思, 其实我也刚想问怎么获取插件设置页面的设置参数,
mitt库确实好用, 牛逼plus, 借助mitt 我的自定义编辑器视图挂了一个codemirror
可以实时保存了, 现在想扩展下各种后缀的文件, 需要用插件面板的设置参数来绑定后缀用自定义的编辑视图打开
这个数据是隶属于您定义的那个设置页类里的，您可以在那个设置页类里定义一个变量，用来储存这个数据，然后把这个变量作为参数直接导入到另一个类里，这样在另一个类里就可以直接使用这个变量了。
那太 COOLLLLLLLL 了！
给个例子吧,
其实您一直就在用，这是您写的一段代码。
export default class Vue101tool extends Plugin {
settings!: MyPluginSettings;
editor!: Editor
async onload() {
// this 在这里指代 “Vue101tool” 这个类
// 您在这里创建了一个 “Vue101tool设置页” 实例，将 “Vue101tool” 的 app 变量和 “Vue101tool ” 整个类作为参数传了进去
this.addSettingTab(new Vue101tool设置页(this.app, this))
}
但是我不知道如何获取this.addSettingTab里面的变量, 这些代码都是sample里面的 
哈？我好像没明白您的意思，您在定义 “Vue101tool设置页” 类哪里不是已经获取到设定值了吗？
containerEl.createEl('h2', {text: '101工具插件设置'});
new Setting(containerEl)
.setName('wiki链接转html<img>标签') // 设置项的栏目名
.setDesc('输入指定后缀的wiki链接(比如".jpg",".png"),将链接转换为html的img标签:') // 对设置项的描述文字
.addText(text => text
.setPlaceholder('".jpg",".png"') //输入框内默认文本
.setValue(this.plugin.settings.mySetting)
.onChange(async (value) => {
console.log('用户输入: ' + value);
// 您在这里已经获取到设定值了呀
this.plugin.settings.mySetting = value;
await this.plugin.保存设置参数();
}));
当文本框的内容被更改时，执行以下操作：
终端输出文本框的内容
将 “Vue101tool”实例的 settings 变量中的 mySetting 字段的值改为文本框的内容
等待 “Vue101tool”实例 的 保存设置参数 函数执行完毕
所以 “Vue101tool”实例的 settings 变量中的 mySetting 字段的值 就已经是那个文本框的内容了呀，如果您想要去其它地方调用这个值的话，直接用 “Vue101tool”实例的 settings 变量中的 mySetting 字段的值就好了。
好, 明天试下, 碎觉
哈哈，晚安！明天继续奋斗！
请问您用的是 Obsidian 原生的 TextArea 吗？
Obsidian 原生的 TextArea 官方没有暴露修改其默认宽高的属性 API 。
但我们可以在创建 TextArea 时直接通过修改其 HTMLElement 的 style.width 属性 和 style.height 属性来达到相同的目的。
new Setting(containerEl)
.addTextArea((txta) => {
txta.inputEl.style.width = "500px"
txta.inputEl.style.height = "500px"
})
嗯用原生的，又学到了，
顺便说一下，论坛维护的插件中文开发文档网页的搜索功不能用，还是得回ob官方的英文开发文档页面查
不行, 高度改不了, 宽度没问题, 是不是写死了