{"id":13521641,"url":"https://github.com/snowffer/Element-UI-Snippets-VSCode","last_synced_at":"2025-03-31T20:32:15.330Z","repository":{"id":71270013,"uuid":"298531387","full_name":"snowffer/Element-UI-Snippets-VSCode","owner":"snowffer","description":null,"archived":false,"fork":false,"pushed_at":"2020-10-19T02:22:33.000Z","size":31,"stargazers_count":11,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-02T05:32:56.488Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/snowffer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-09-25T09:43:46.000Z","updated_at":"2023-06-20T07:56:10.000Z","dependencies_parsed_at":"2023-03-18T00:45:16.781Z","dependency_job_id":null,"html_url":"https://github.com/snowffer/Element-UI-Snippets-VSCode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowffer%2FElement-UI-Snippets-VSCode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowffer%2FElement-UI-Snippets-VSCode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowffer%2FElement-UI-Snippets-VSCode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowffer%2FElement-UI-Snippets-VSCode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snowffer","download_url":"https://codeload.github.com/snowffer/Element-UI-Snippets-VSCode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246536125,"owners_count":20793390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:00:36.680Z","updated_at":"2025-03-31T20:32:15.039Z","avatar_url":"https://github.com/snowffer.png","language":null,"funding_links":[],"categories":["Tools"],"sub_categories":[],"readme":"## This is Code Snippets of Element UI for VS Code.\n\n### Install\n\n#### Manual Install\n\nGo 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:\n\n+ **Mac**: /Users/*\u003c your-user-name \u003e*/Library/Application Support/Code/User/snippets/\n+ **Windows**: *\u003c your-installed-driver \u003e* :\\Users\\ *\u003c your-user-name \u003e* \\AppData\\Roaming\\Code\\User\\snippets\\\n\n#### Through VS Code Extensions\n\n+ From website: Go to Visual Studio Code [Marketplace](https://marketplace.visualstudio.com/vscode), and search 'Element UI Snippets', then click the install button.\n+ From VS Code: click extensions sidebar, and search 'Element UI Snippets', then click the install button.\n\n### Special Instruction\n\n1. For the components like `el-table` which need children components to be its content, use `v-for` to loop to generate the children components.\n\n### Snippets List\n\n1. All the Element UI tags below, ignore the closure and more detailed information. Such as `elr` to `\u003cel-radio\u003e`, actually that represents `\u003cel-radio v-model=\"${1}\" label=\"${2}\"\u003e$3\u003c/el-radio\u003e`\n2. The sinppets' order follows the order of the components of Guide on Element UI official website basically. \u003c!--Supply extra General and Options parts.--\u003e\n3. Totally 108 snippets. Will add more if necessary.\n4. **Only work in .vue file for now.**\n\n#### Basic Part\n\n|No.|Trigger\u0026nbsp;Key|Element Tag|\n|:------:|:--------------:|:--------|\n|1. | `elrow` | `\u003cel-row\u003e` |\n|2. | `elcol` | `\u003cel-col\u003e` |\n|3. | `elhc` | `hidden-xs-only,hidden-sm-only,etc` |\n|4. | `elcon` | `\u003cel-container\u003e` |\n|5. | `elas` | `\u003cel-aside\u003e` |\n|6. | `elhe` | `\u003cel-header\u003e` |\n|7. | `elma` | `\u003cel-main\u003e` |\n|8. | `elfo` | `\u003cel-footer\u003e` |\n|9. | `elcb` | `#409EFF` |\n|10. | `elcs` | `#67C23A` |\n|11. | `elcw` | `#E6A23C` |\n|12. | `elcd` | `#F56C6C` |\n|13. | `elci` | `#909399` |\n|14. | `elcpt` | `#303133` |\n|15. | `elcrt` | `#606266` |\n|16. | `elcst` | `#909399` |\n|17. | `elcht` | `#C0C4CC` |\n|18. | `elcbb` | `#DCDFE6` |\n|19. | `elclb` | `#E4E7ED` |\n|20. | `elclrb` | `#EBEEF5` |\n|21. | `elelb` | `#DCDFE6` |\n|22. | `eltypo` | `font-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;` |\n|23. | `elbbs` | `box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)` |\n|24. | `elbls` | `box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)` |\n|25. | `elb` | `el-button` |\n|26. | `elbg` | `el-button-group` |\n|27. | `ell` | `el-link` |\n\n#### Form Part\n\n|No. |  Trigger\u0026nbsp;Key | Element Tag|\n|:------:|:--------------:|:--------|\n|1. | `elr` | `\u003cel-radio\u003e` |\n|2. | `elrg` | `\u003cel-radio-group\u003e` |\n|3. | `elrbg` | `\u003cel-radio-group\u003e with \u003cel-radio-button\u003e` |\n|4. | `elrb` | `\u003cel-radio-button\u003e` |\n|5. | `elc` | `\u003cel-checkbox\u003e` |\n|6. | `elcg` | `\u003cel-checkbox-group\u003e` |\n|7. | `elcbg` | `\u003cel-checkbox-group\u003e with \u003cel-checkbox-button\u003e` |\n|8. | `elcbt` | `\u003cel-checkbox-button\u003e` |\n|9. | `eli` | `\u003cel-input\u003e` |\n|10. | `elit` | `\u003cel-input type=\"textarea\"\u003e` |\n|11. | `ela` | `\u003cel-autocomplete\u003e` |\n|12. | `elis` | `\u003ctemplate slot=''\u003e` |\n|13. | `elin` | `\u003cel-input-number\u003e` |\n|14. | `elsel` | `\u003cel-select\u003e` |\n|15. | `elselr` | `\u003cel-select remote\u003e` |\n|16. | `elop` | `\u003cel-option\u003e` |\n|17. | `elopg` | `\u003cel-option-group\u003e` |\n|18. | `elca` | `\u003cel-cascader\u003e` |\n|19. | `elcap` | `\u003cel-cascader-panel\u003e` |\n|20. | `elsw` | `\u003cel-swtich\u003e` |\n|21. | `elsl` | `\u003cel-slider\u003e` |\n|22. | `eltp` | `\u003cel-time-picker\u003e` |\n|23. | `elts` | `\u003cel-time-select\u003e` |\n|24. | `eltsr` | `\u003cel-time-select\u003e * 2` |\n|25. | `eltpr` | `\u003cel-time-picker is-range\u003e` |\n|26. | `eldp` | `\u003cel-date-picker\u003e` |\n|27. | `eldpr` | `\u003cel-date-picker type=\"daterange,monthrange\"\u003e` |\n|28. | `eldtp` | `\u003cel-date-picker type=\"datetime\"\u003e` |\n|29. | `eldtpr` | `\u003cel-date-picker type=\"datetimerange\"\u003e` |\n|30. | `elu` | `\u003cel-upload\u003e` |\n|31. | `elra` | `\u003cel-rate\u003e` |\n|32. | `elcp` | `\u003cel-color-picker\u003e` |\n|33. | `eltr` | `\u003cel-transfer\u003e` |\n|34. | `elf` | `\u003cel-form\u003e` |\n|35. | `elfi` | `\u003cel-form-item\u003e` |\n\n#### Data Part\n\n|No. |  Trigger Key | Element Tag|\n|:------:|:--------------:|:--------|\n|1. | `elt` | `\u003cel-table\u003e` |\n|2. | `eltc` | `\u003cel-table-column\u003e` |\n|3. | `elta` | `\u003cel-tag\u003e` |\n|4. | `elpr` | `\u003cel-progress\u003e` |\n|5. | `eltree` | `\u003cel-tree\u003e` |\n|6. | `elp` | `\u003cel-pagination\u003e` |\n|7. | `elba` | `\u003cel-badge\u003e` |\n|8. | `elav` | `\u003cel-avatar\u003e` |\n\n#### Notice Part\n\n|No. |  Trigger Key | Element Tag|\n|:------:|:--------------:|:--------|\n|1. | `elal` | `\u003cel-alert\u003e` |\n|2. | `elloads` | `element-loading-*` |\n|3. | `elme` | `this.$message({})` |\n|4. | `elmebox` | `this.$msgbox({})` |\n|5. | `elmeal` | `this.$alert({})` |\n|6. | `elmecon` | `this.$confirm({})` |\n|7. | `elmepro` | `this.$prompt({})` |\n|8. | `elno` | `this.$notify({})` |\n|9. | `elnot` | `this.$notify.type({})` |\n\n#### Navigation Part\n\n|No. |  Trigger Key | Element Tag|\n|:------:|:--------------:|:--------|\n|1. | `elmen` | `\u003cel-menu\u003e` |\n|2. | `elsubmen` | `\u003cel-submenu\u003e` |\n|3. | `elmeni` | `\u003cel-menu-item\u003e` |\n|4. | `eltabs` | `\u003cel-tabs\u003e` |\n|5. | `eltabp` | `\u003cel-tab-pane\u003e` |\n|6. | `elbr` | `\u003cel-breadcrumb\u003e` |\n|7. | `elbri` | `\u003cel-breadcrumb-item\u003e` |\n|8. | `elpa` | `\u003cel-page-header\u003e` |\n|9. | `eldr` | `\u003cel-dropdown\u003e` |\n|10. | `eldri` | `\u003cel-dropdown-item\u003e` |\n|11. | `elsts` | `\u003cel-steps\u003e` |\n|12. | `elst` | `\u003cel-step\u003e` |\n\n#### Others Part\n\n|No. |  Trigger Key | Element Tag|\n|:------:|:--------------:|:--------|\n|1. | `eldi` | `\u003cel-dialog\u003e` |\n|2. | `elto` | `\u003cel-tooltip\u003e` |\n|3. | `elpo` | `\u003cel-popover\u003e` |\n|4. | `elpoco` | `\u003cel-popconfirm\u003e` |\n|5. | `elcard` | `\u003cel-card\u003e` |\n|6. | `elcaro` | `\u003cel-carousel\u003e` |\n|7. | `elcaroi` | `\u003cel-carousel-item\u003e` |\n|8. | `elcolla` | `\u003cel-collapse\u003e` |\n|9. | `elcollai` | `\u003cel-collapse-item\u003e` |\n|10. | `elti` | `\u003cel-timeline\u003e` |\n|11. | `eltii` | `\u003cel-timeline-item\u003e` |\n|12. | `eld` | `\u003cel-divider\u003e` |\n|13. | `elcal` | `\u003cel-calendar\u003e` |\n|14. | `elim` | `\u003cel-image\u003e` |\n|15. | `elback` | `\u003cel-backtop\u003e` |\n|16. | `elinfi` | `v-infinite-scroll` |\n|17. | `eldra` | `\u003cel-drawer\u003e` |\n\n\u003c!--\n#### General Part\nNo. |  Trigger Key | Element Tag\n|:------:|:--------------:|:--------|\n|1. | `el` | `\u003cel-*\u003e` |\n|2. | `elic` | `\u003cel-icon-*\u003e` |\n\n#### Options Part\nNo. |  Trigger Key | Element Tag\n|:------:|:--------------:|:--------|\n|1. | `elpos` | positions |\n|2. | `elanims` | animation types |\n--\u003e\n\u003c!--\n#### #TODO\n1. `tree`的data值\n2. `import`样式的快捷方式\n3. 不同类型的`button`\n4. 各种引用路径：内置动画，样式\n--\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowffer%2FElement-UI-Snippets-VSCode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnowffer%2FElement-UI-Snippets-VSCode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowffer%2FElement-UI-Snippets-VSCode/lists"}