https://github.com/snowffer/Element-UI-Snippets-VSCode
https://github.com/snowffer/Element-UI-Snippets-VSCode
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/snowffer/Element-UI-Snippets-VSCode
- Owner: snowffer
- License: mit
- Created: 2020-09-25T09:43:46.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-19T02:22:33.000Z (over 4 years ago)
- Last Synced: 2024-11-02T05:32:56.488Z (7 months ago)
- Size: 30.3 KB
- Stars: 11
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-element - Element-UI-Snippets-VSCode - UI (Tools)
README
## This is Code Snippets of Element UI for VS Code.
### Install
#### Manual Install
Go to the [git](https://github.com/snowffer/Element-UI-Snippets-VSCode) and download the snippets folder, then copy the files in the folder to the path directly:
+ **Mac**: /Users/*< your-user-name >*/Library/Application Support/Code/User/snippets/
+ **Windows**: *< your-installed-driver >* :\Users\ *< your-user-name >* \AppData\Roaming\Code\User\snippets\
#### Through VS Code Extensions
+ From website: Go to Visual Studio Code [Marketplace](https://marketplace.visualstudio.com/vscode), and search 'Element UI Snippets', then click the install button.
+ From VS Code: click extensions sidebar, and search 'Element UI Snippets', then click the install button.
### Special Instruction
1. For the components like `el-table` which need children components to be its content, use `v-for` to loop to generate the children components.
### Snippets List
1. All the Element UI tags below, ignore the closure and more detailed information. Such as `elr` to ``, actually that represents `$3`
2. The sinppets' order follows the order of the components of Guide on Element UI official website basically.
3. Totally 108 snippets. Will add more if necessary.
4. **Only work in .vue file for now.**
#### Basic Part
|No.|Trigger Key|Element Tag|
|:------:|:--------------:|:--------|
|1. | `elrow` | `` |
|2. | `elcol` | `` |
|3. | `elhc` | `hidden-xs-only,hidden-sm-only,etc` |
|4. | `elcon` | `` |
|5. | `elas` | `` |
|6. | `elhe` | `` |
|7. | `elma` | `` |
|8. | `elfo` | `` |
|9. | `elcb` | `#409EFF` |
|10. | `elcs` | `#67C23A` |
|11. | `elcw` | `#E6A23C` |
|12. | `elcd` | `#F56C6C` |
|13. | `elci` | `#909399` |
|14. | `elcpt` | `#303133` |
|15. | `elcrt` | `#606266` |
|16. | `elcst` | `#909399` |
|17. | `elcht` | `#C0C4CC` |
|18. | `elcbb` | `#DCDFE6` |
|19. | `elclb` | `#E4E7ED` |
|20. | `elclrb` | `#EBEEF5` |
|21. | `elelb` | `#DCDFE6` |
|22. | `eltypo` | `font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;` |
|23. | `elbbs` | `box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)` |
|24. | `elbls` | `box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)` |
|25. | `elb` | `el-button` |
|26. | `elbg` | `el-button-group` |
|27. | `ell` | `el-link` |
#### Form Part
|No. | Trigger Key | Element Tag|
|:------:|:--------------:|:--------|
|1. | `elr` | `` |
|2. | `elrg` | `` |
|3. | `elrbg` | ` with ` |
|4. | `elrb` | `` |
|5. | `elc` | `` |
|6. | `elcg` | `` |
|7. | `elcbg` | ` with ` |
|8. | `elcbt` | `` |
|9. | `eli` | `` |
|10. | `elit` | `` |
|11. | `ela` | `` |
|12. | `elis` | `` |
|13. | `elin` | `` |
|14. | `elsel` | `` |
|15. | `elselr` | `` |
|16. | `elop` | `` |
|17. | `elopg` | `` |
|18. | `elca` | `` |
|19. | `elcap` | `` |
|20. | `elsw` | `` |
|21. | `elsl` | `` |
|22. | `eltp` | `` |
|23. | `elts` | `` |
|24. | `eltsr` | ` * 2` |
|25. | `eltpr` | `` |
|26. | `eldp` | `` |
|27. | `eldpr` | `` |
|28. | `eldtp` | `` |
|29. | `eldtpr` | `` |
|30. | `elu` | `` |
|31. | `elra` | `` |
|32. | `elcp` | `` |
|33. | `eltr` | `` |
|34. | `elf` | `` |
|35. | `elfi` | `` |
#### Data Part
|No. | Trigger Key | Element Tag|
|:------:|:--------------:|:--------|
|1. | `elt` | `` |
|2. | `eltc` | `` |
|3. | `elta` | `` |
|4. | `elpr` | `` |
|5. | `eltree` | `` |
|6. | `elp` | `` |
|7. | `elba` | `` |
|8. | `elav` | `` |
#### Notice Part
|No. | Trigger Key | Element Tag|
|:------:|:--------------:|:--------|
|1. | `elal` | `` |
|2. | `elloads` | `element-loading-*` |
|3. | `elme` | `this.$message({})` |
|4. | `elmebox` | `this.$msgbox({})` |
|5. | `elmeal` | `this.$alert({})` |
|6. | `elmecon` | `this.$confirm({})` |
|7. | `elmepro` | `this.$prompt({})` |
|8. | `elno` | `this.$notify({})` |
|9. | `elnot` | `this.$notify.type({})` |
#### Navigation Part
|No. | Trigger Key | Element Tag|
|:------:|:--------------:|:--------|
|1. | `elmen` | `` |
|2. | `elsubmen` | `` |
|3. | `elmeni` | `` |
|4. | `eltabs` | `` |
|5. | `eltabp` | `` |
|6. | `elbr` | `` |
|7. | `elbri` | `` |
|8. | `elpa` | `` |
|9. | `eldr` | `` |
|10. | `eldri` | `` |
|11. | `elsts` | `` |
|12. | `elst` | `` |
#### Others Part
|No. | Trigger Key | Element Tag|
|:------:|:--------------:|:--------|
|1. | `eldi` | `` |
|2. | `elto` | `` |
|3. | `elpo` | `` |
|4. | `elpoco` | `` |
|5. | `elcard` | `` |
|6. | `elcaro` | `` |
|7. | `elcaroi` | `` |
|8. | `elcolla` | `` |
|9. | `elcollai` | `` |
|10. | `elti` | `` |
|11. | `eltii` | `` |
|12. | `eld` | `` |
|13. | `elcal` | `` |
|14. | `elim` | `` |
|15. | `elback` | `` |
|16. | `elinfi` | `v-infinite-scroll` |
|17. | `eldra` | `` |