vscode插件开发记录---模式对话框

主体参考：https://www.cnblogs.com/liuxianan/p/vscode-plugin-webview.html

webview-panel.ts：

https://github.com/ayqy/browser/blob/a0b2cba5a59924debb4c2a0456ff0802d2c15d95/src/WebviewPanel.ts

修改一下静态方法createOrShow,添加一些参数

 message: any,//用于消息显示类型的对话框

position: vscode.WebviewModalPosition,//对话框显示的位置

 config:any,//用于传入对话框输入项的默认值

callback:any//function(pConfig){} 对框框点击确定后的回调

对话框初始化参数通过message['xx'] = xxx;message['cmd'] = "initParam";WebviewPanel.currentPanel.postMessage(message);形式传给webview，对应的webview页面如果采用vuejs开发则，组件created中window.addEventListener('message', this.onMessage),然后根据message.cmd执行初始化；反向的消息通讯参考callVscode,

webview : vscode.postMessage({ key: "close" }) ==》 webviewpanel.ts: message.key === "close" this.dispose();

webview : callVscode({ cmd: 'saveSetting', config: this.config }, () => { this.alert('保存成功！');});==》webviewpanel.ts: this._callback(message);this.dispose();

值得注意的是webview中的资源引入需要webview-panel.ts中添加支持（参考第一个链接）

    private _getWebViewContent(templatePath: string): string {
        const resourcePath: string = path.join(this._basePath, templatePath);
        //const resourcePath = util.getExtensionFileAbsolutePath(context, templatePath);
        const dirPath = path.dirname(resourcePath);
        let html = fs.readFileSync(resourcePath, 'utf-8');
        // vscode不支持直接加载本地资源，需要替换成其专有路径格式，这里只是简单的将样式和JS的路径替换
        html = html.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
            return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString() + '"';
        });
        return html;
    }

表单的样式采用引入的bootstrap支持,其他的只是一些细节调整;

/----------------------------------------------------------------------------------------------------------------------------------------/

依照上面这种思路:webview页面中vscode.postMessage,panel.webview.onDidReceiveMessage中处理消息,我们还可以做一些点击页面元素关联跳转文件行或者一些其他的native功能;