bootstrap基礎快速入門-16 面板panel

學生就可以看懂的bootstrap基礎實戰系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。

bootstrap是進階html5很基礎常用的前端框架，可以做自適應漂亮的界面，再堅持一下，前端知識的大門就會打開了。

本節內容有動態顯示效果，建議實際操作一下。

前言由于之前的國際化的項目中總是要統計老項目中待翻譯的內容，然后再交由業務進行翻譯，如果總是人為統計不僅相當耗費精力和時間，而且還不能保證是否有遺漏，因此想通過編寫一個 i18n-helper 插件來實現這個功能。然而，大家的需求總是出奇的相似（因為已經有很多類似的插件存在了
），因此沒必要重復造輪子了，但是 如何開發 vscode 插件 的過程可以記錄下來，分享給大家！希望本文對你有所幫助！！！跑通官方插件示例好了，話不多說，我們先按著 官方文檔 跑一下它的插件用例吧！生成插件目錄安裝腳手架npm install -g yo generator-code
初始化插件目錄終端運行 yo code
，按照提示生成目錄即可。

試插件

由于官方文檔缺少一些細節，很容易導致小白調試插件失敗，再常見的有如下情況。

找不到 Hello World 命令

進入對應項目目錄后，按照官方文檔的指示可通過如下兩種方式進行調試：

按快捷鍵 F5
點擊編輯器左下方的 Run Extension

接著按下 Ctrl + Shift + P，并輸入 Hello World
命令，發現無法找到對應的命令：

這個原因主要是因為 vscode 版本不一致造成的：

package.json 文件中指定的 vscode 版本號
當前實際的 vscode 版本號：

解決方案自然就是保持版本的一致性

升級 vscode 版本

適用于當前版本號低于 package.json 文件中指定的版本號
【注意】
現在 vscode 版本的更新模型已經調整為 “默認” 模式，所以現在不會收到 vscode 需要更新的信息，也無法進行通過 “檢查更新” 按鈕來進行更新

修改 package.json 文件中的 vscode 對應版本號

這種方式比較簡單直接，就是修改為和當前正在使用的 vscode 版本保持一致即可，如下：

Hello World 命令報錯

經過上述操作后，重新啟動調試，按下 Ctrl + Shift + P，并輸入 Hello World
命令，就可以找到對應的命令了，但是執行該命令時報錯了：

原因就在于我們沒有編譯文件，此時注意查看 package.json
文件中的 main
字段會發現：

很明顯，我們沒有編譯源文件生成目標文件，此時我們只需要通過 npm run watch
啟用監聽模式，讓其進行編譯即可：

此時在執行命令，就會發現成功了：

【實戰】編寫 VSCode 插件

插件的三個概念

激活事件（針對 V1.74.0 之前的 VSCode 版本）

即插件激活的時機，目的是支持用戶在輸入 Hello World
命令后能夠激活插件
例如，使用 onCommand
進行注冊 onCommand:extension.helloWorld

發布內容配置

VS Code 通過 package.json
進行擴展，通過配置插件清單字段便于開發插件
例如，使用 contributes.commands
綁定一個命令 ID extension.helloWorld
，目的是讓 Hello World
命令就可以在命令面板中匹配到等

VS Code API

插件代碼中需要調用的一系列 JavaScript API 使用 VS Code 的一些功能特性
例如，通過 vscode.commands.registerCommand
將一個函數綁定到對應的命令 ID extension.helloWorld
上，激活命令時執行的就是該函數等

目錄結構比較簡單就不過多介紹了。

在 VSCode 中預覽 SVG 文件— <img />
標簽預覽

當然相關的 svg 插件已經有不少了，這里只是用這個簡單的需求來舉個例子，方便讓大家更容易理解。

SVG 文件在 VSCode 中的原始展示效果

發布內容配置 — package.json 文件

面向用戶的命令

首先，我們要注冊命令，讓用戶能夠使用我們的插件，這里我們就簡單支持如下兩種方式：

Ctrl + Shift + P 匹配命令

只需要在 package.json 中的 contributes.commands
進行如下配置即可，詳情可見 contributes.commands
"contributes": {

"commands": [

{

"command": "svg-viewer.previewsvg",

"title": "Preview SVG"

}

]

}

鼠標右鍵菜單選擇命令

這種方式相對于上面的方式來講更簡便，只需要在 package.json 中的 contributes.menus
進行如下配置即可，詳情可見 contributes.menus
"contributes": {

"menus": {

"editor/context": [

{

"command": "svg-viewer.previewsvg"

}

]

}

上述鼠標右鍵菜單選擇命令的配置有一點不好，那就是安裝此插件后，在任何文件中右鍵都會顯示 Preview SVG 選項，此時調試效果如下：

因為我們的本意是預覽 SVG 文件，而不是其他文件，因此對于不符合的文件就沒有必要展示此選項了，此時可以通過 when 子句上下文來控制顯示隱藏命令選項，此時配置更改為：

"contributes": {

    "menus": {

      "editor/context": [

        {

          "command": "svg-viewer.previewsvg",

          "when": "resourceExtname == '.svg'"

        }

      ]

}

調試效果如下：

使用 VSCode API

注冊命令

上述我們配置好了命令，現在就需要注冊命令了，也就是決定當命令激活時需要做些什么事情，即只需要在 extension.ts 文件的 activate 方法中做如下修改即可：

// 執行命令時被激活

export function activate(context: vscode.ExtensionContext) {

  // 使用控制臺輸出診斷信息(console.log)和錯誤(console.error)

  // 這行代碼只會在你的擴展被激活時執行一次

  console.log('Congratulations, your extension "svg-viewer" is now active!');




  // 注冊命令，commandId 參數必須與 package.json 中的 command 字段匹配

  let disposable = vscode.commands.registerCommand(

    "svg-viewer.previewsvg",

    () => {

      // 具體要做的內容

    }

  );




  context.subscriptions.push(disposable);

}

使用 Webview

平時我們通過瀏覽器使用 <img>
標簽可以查看 svg 文件的效果，例如：

那么在 VSCode 中可不可以也以這樣的方式來實現呢？

那當然是可以的。

我們可以使用如下代碼編輯器中創建一個 Webview ，然后其中的 html 選項內容就可以用我們常見的 html 結構來填充，并作為最終結果來進行渲染，例如：

  // 創建并顯示新的 webview

  const panel = vscode.window.createWebviewPanel(

    "SVGPreview", // 只供內部使用，即 webview 的標識

    "SVG Preview", // 面板標題

    vscode.ViewColumn.One, // 給新的 webview 面板一個編輯器視圖

    {} // Webview 選項

  );




  // 設置HTML內容

  panel.webview.html = `<!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>SVG Preview</title>

      </head>

      <body>

        <img src="${目標文件地址}" />

      </body>

    </html>

    `;

獲取目標文件的 base64 格式

由于我們打開相應 svg 文件后右鍵進行預覽，那么第一步就得先獲取當前這個文件的路徑，這就又得需要使用的 VSCode API 了，如下

 const editor = vscode.window.activeTextEditor;

 let url = editor.document.fileName; // 獲取到的就是對應文件的絕對路徑

但是如果你直接把這個路徑作為 <img>
標簽的 src 屬性是沒法沒正常渲染的，大致如下：

既然如此，那么我們可以把這個 svg 文件讀取到，然后把它轉成 base64 的格式，再交由 <img>
標簽使用即可，此時我們就需要使用到 node 內置的 fs 模塊了，即：

  const fs = require("fs");

  const content = fs.readFileSync(url);

  return `data:image/svg+xml;base64,${content.toString("base64")}`;

源代碼 & 效果展示

需要查看源碼的可點此獲取：源代碼

經過上述的處理我們就可以在 VSCode 中預覽 svg 文件了，效果如下：

在 VSCode 中預覽 SVG 文件 —<svg>
標簽預覽

上述方案雖然可以實現我們需要的功能，但是對于 svg 文件來講還是復雜了，因為在瀏覽其中是可以直接渲染 <svg>
標簽的，而 svg 文件的內容不就是 <svg>
標簽嗎，那么我們只需要把文件內容讀取出來，直接填充到 webview.html 中就好了，根本不需要轉成 base64 格式。

這個方案比較簡單，這里直接貼出 extension.ts 文件中的代碼了：

import * as vscode from "vscode";




// 執行命令時被激活

export function activate(context: vscode.ExtensionContext) {

  const fs = require("fs");




  // 注冊命令，commandId 參數必須與 package.json 中的 command 字段匹配

  let disposable = vscode.commands.registerCommand(

    "svg-viewer.previewsvg",

    () => {

      const url = getActiveTextUrl();

      const content = fs.readFileSync(url, "utf-8");

      opedWebview(content);

    }

  );




  context.subscriptions.push(disposable);

}




// 獲取當前文件路徑

export function getActiveTextUrl(): string {

  let url = "";

  const editor = vscode.window.activeTextEditor;




  if (editor) {

    url = editor.document.fileName;

  }




  return url;

}




// 創建并顯示新的 webview

export function opedWebview(content: string) {

  const panel = vscode.window.createWebviewPanel(

    "SVGPreview", // 只供內部使用，即 webview 的標識

    "SVG Preview", // 面板標題

    vscode.ViewColumn.One, // 給新的 webview 面板一個編輯器視圖

    {} // Webview 選項

  );




  // 設置HTML內容

  panel.webview.html = getWebviewContent(content);

}




// 渲染模版

export function getWebviewContent(content: string) {

  return `<!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>SVG Preview</title>

        <style>

          html,

          body {

            width: 100%;

            height: 100%;

          }

          body {

            display: flex;

            justify-content: center;

            align-items: center;

          }

          svg {

            max-height: 90%;

          }

        </style>

      </head>

      <body>

        ${content}

      </body>

    </html>

    `;

}




// 停用命令時執行

export function deactivate() {}

發布

發布到官網應用市場

通過這個地址注冊開發者賬號，然后按提示發布到官網應用市場即可。

使用 vsce 打成 vsix 插件

這種方式可以實現即使沒有發布到應用市場，也可以直接通過對應文件的方式進行插件的安裝和使用。

安裝 vsce 工具

安裝命令 npm i vsce -g

打包生成 .vsix 文件

直接使用 vsce package
命令進行打包，完成后就會生成一個 .vsix
文件，這個也就是在后續安裝插件時要使用的文件。

【注意
】在使用這個命令打包時，可能會出現 vsce 所需要支持的 VSCode 最低版本和當前使用版本之間存在出入，導致打包失敗：
特別是如果按照前文的方式直接修改 package.json
文件中的版本號時，此時最好還是將 VSCode 版本進行升級，而不是手動修改版本號。

安裝 vsix 插件

按照如下方式操作并選擇對應的 .vsix 文件即可.

通過本篇文章，希望能讓你從一個 VSCode 插件開發的小白變成大白，能夠為團隊賦能，或者作為自己的一個技能亮點。

anel面板在我們做一些闡述性說明時會用到，還有物流狀態時，并且這個組件自定義部分還很靈活，方便我們添加一些額外的內容。

準備工作：

創建一個頁面: Panel.vue
在router.js里配置Panel頁面的路由

{
 path: '/panel',
 name: 'panel',
 component: () => import('./views/Panel.vue')
 }

在index.vue里添加一項

<a href="javascript：void(0)" @click="$router.push('/panel')">
 <van-col span="6" class="marb20">
 <van-icon name="newspaper-o" />
 <div>Panel 面板</div>
 </van-col>
</a>

至今為止呢，我們的首頁顯示的樣式子是這樣滴?不知道不覺間我們已經學完了35個組件了！哇噢，為自己歡呼一下吧！如果想看更多的內容，歡迎關注我，每天都有更新哈。

代碼演示Panel 面板：

基礎用法：

<van-panel
 class="pnael"
 title="標題內容"
 desc="描述內容"
 status="狀態"
 >
 <div class="con">第一節內容</div>
</van-panel>

title：標題

desc：描述內容

status：狀態

使用slot自定義內容

slot可以自定義header，footer兩個部分

<van-panel
 class="pnael"
 title="標題內容"
 desc="描述內容"
 status="狀態"
 icon="newspaper-o"
 >
 <div class="con">第一節內容</div>
 <div slot="header">
 <van-button>取消</van-button>
 <van-button type="danger">確定</van-button>
 </div>
</van-panel>

icon：可以在標題前面加一個圖標

自定義header部分，即把標題那一欄占用

自定義footer部分，即自定義的部分會放到內容下面

到目前為止呢，Panel 面板就演示完了！慶祝一下我們又學完一個組件啦！

今天就到這里啦。休息休息一會兒吧?明天繼續加油噢！加油

在線咨詢

上一篇：將富文本html內容轉換為純文本，并限制展示字數長度
下一篇：分享100個面向開發人員的免費網站模板，總有一款適合你

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商