preface

Today, I am working on the company's Vue project, which involves the reference of font icon and the modification of Element-UI font icon. In my previous company, I just changed bugs. Although I have learned a lot of things, I rarely practiced them by myself in the project. So some of the simple things have been forgotten, so write this article and sit down

Let's start with the icon reference

In fact, there are three main ways to introduce ICONS: Unicode, Font class and Symbol. I have never known why the Font icon file is like this before. After a careful look today, I find that this is actually a file that provides three different introduction methods

The iconfont. CSS file is provided for the introduction of Unicode and FontClass. The iconfont. If you look at the demo, if you look at the Symbol, you can introduce color ICONS

If you want to use them in your Vue project, just import them in main.js

/ / use unicode and fontclass import ". / assets/iconfont iconfont. CSS "/ / use the Symbol way import". / assets/iconfont iconfont. Js. ""Copy the code

use

template el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" /el-tree ! -- unicode -- span class="iconfont"#xe6cc; /span ! Word-wrap: break-word! Important; " span class=" max-width: 100%;  span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" style =" box-sizing: border-box! Important;" /template script export default {name: "Element", data() {return {data: [{label: "level 1", children: [{label:" level 1"] "Secondary 1-1", the children: [{label: "three 1-1-1",},],},],}, {label: "level 2", the children: [{label: "secondary 2-1", the children: [{label: "three 2-1-1",},],}, {label: "secondary 2-2", the children: [{label: "three 2-2-1",},],},],}, {label: "Level 3", the children: [{label: "secondary 3-1", the children: [{label: "three 3-1-1",},],}, {label: "secondary 3-2", the children: [{label: "triple the 3-2-1",},],},],},], defaultProps: {children: "children", the label: "label",},}; }, methods: { handleNodeClick(data) { console.log(data); ,}}}; /script style scoped/styleCopy the code

Then there's the elemental-UI icon replacement

template el-tree class="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" /el-tree ! -- unicode -- span class="iconfont"#xe6cc; /span ! Word-wrap: break-word! Important; " span class=" max-width: 100%;  span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" style =" box-sizing: border-box! Important;" /template script export default {name: "Element", data() {return {data: [{label: "level 1", children: [{label:" level 1"] "Secondary 1-1", the children: [{label: "three 1-1-1",},],},],}, {label: "level 2", the children: [{label: "secondary 2-1", the children: [{label: "three 2-1-1",},],}, {label: "secondary 2-2", the children: [{label: "three 2-2-1",},],},],}, {label: "Level 3", the children: [{label: "secondary 3-1", the children: [{label: "three 3-1-1",},],}, {label: "secondary 3-2", the children: [{label: "triple the 3-2-1",},],},],},], defaultProps: {children: "children", the label: "label",},}; }, methods: { handleNodeClick(data) { console.log(data); ,}}}; /script style style lang=" SCSS " /* [class*="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] [class^="el-icon-"] {font-family: "icon -"; important; }.tree /deep/.el-tree-node__expand-icon. Expanded {// Delete animation -webkit-transform: rotate(0deg); transform: rotate(0deg); }.tree /deep/.el-tree-node__expand-icon. El-icon-caret-right :before {// Fold content: "\e6cb"; font-size: 18px; }.tree /deep/.el-tree-node__scale-icon.expanded. El-icon-caret-right :before {// Expand content: "\e6cc"; font-size: 18px; } /styleCopy the code

At the end

Study hard and watch well