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
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 codeuse
<template> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> <! -- unicode --> <span class="iconfont"> </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></style>Copy the codeThen 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"> </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; } </style>Copy the codeAt the end
Study hard and watch well