element-ui が提供する el-icon を使用する代わりに、ボタンに自分の絵を表示したいのですが、
その結果は図に示すようになります: 中央のボタンは自分の絵 (devops.png)
具体的な実装方法は以下の通りです。
-
まず、画像をインポートします。インポートパスは任意ですが、私は画像をassetsディレクトリに置きました。
-
ボタンのアイコンをカスタマイズする
<el-button @click="to_devops(scope.row.pr_url)">
<i class="el-icon-devops" /> // 自定义icon，这个el-icon-devops是我自己命名的
</el-button>
- CSSでel-icon-devopsを設定する
::v-deep .el-icon-devops {
background: url('../../../assets/devops.png') center no-repeat; // 注意此处的url，在这里引入自己的图片
font-size: 12px;
background-size: cover;
}
::v-deep .el-icon-devops:before {
content: "替";
font-size: 12px;
visibility: hidden;
}
ようやく表示できるようになりました。私はデフォルトのボタンを使用しているので、背景は白ですが、他の背景色が必要な場合は、自分で調整できます。