feel free to send a pull request if you want to contribute.
Description: This is an extension of code snippets for the Element-UI library in Atom text editor.
Note: it is necessary to have installed the extension "language-vue" or something similar.
For install this extension, there are a few steps.
Packages -> Settings View -> Install Packages/Themes
<el-col></el-col>
<el-col:xs="":sm="":md="":lg="":xl=""></el-col>
<el-col :span=""></el-col>
<el-col:span="":offset="":push="":pull="":xs="":sm="":md="":lg="":xl=""tag=""></el-col>
<el-row></el-row>
<el-rowtype="flex"align=""justify=""></el-row>
<el-row><el-col :span="12"></el-col><el-col :span="12"></el-col></el-row>
<el-row :gutter=""></el-row>
<el-row:gutter="0"type=""tag="div"justify="start"align="top"></el-row>
<el-container><el-aside width="200px"><!-- Aside content --></el-aside><el-container><el-header height=""><!-- Header content --></el-header><el-main height=""><!-- Main content --></el-main></el-container></el-container>
<el-buttontype="text"@click.native=""></el-button>
<el-buttonsize="medium"type="primary":plain="false":round="false":circle="false":loading="false":disabled="false"icon="":autofocus="false"native-type="button"@click.native=""></el-button>
<el-linkhref="url"target="_self"></el-link>
<el-linktype="primary"underline="true"disabled="false"href="url"target="_self"icon=""></el-link>
<el-radiov-model=""label=""></el-radio>
<el-radiov-model=""label="">option A</el-radio><el-radiov-model=""label="">option B</el-radio>
<el-radiov-model=""label="":disabled="false":border="false"size="medium"name=""@change=""></el-radio>
<el-radio-groupv-model=""@change=""></el-radio-group>
<el-radio-groupv-model=""size="medium":disabled="false"text-color="#FFFFFF"fill="#409EFF"@change=""></el-radio-group>
<el-checkbox v-model=""></el-checkbox>
<el-checkbox-groupv-model=""size="small"></el-checkbox-group>
<el-checkboxv-model=""label=""true-label=""false-label="":disabled="false":border="false"size="medium"name="":checked="false":indeterminate="false"@change=""></el-checkbox>
<el-checkbox-groupv-model=""size="medium":disabled="false":min="":max=""text-color="#FFFFFF"fill="#409EFF"@change=""></el-checkbox-group>
<el-checkbox-button:label=""true-label=""false-label=""></el-checkbox-button>
<el-checkbox-buttonlabel=""true-label=""false-label="":disabled="false"name="":checked="false"></el-checkbox-button>
<el-inputv-model=""placeholder=""/>
<el-inputv-model=""placeholder=""prefix-icon=""/>
<el-inputv-model=""placeholder=""suffix-icon=""/>
<el-inputtype="textarea":rows=""placeholder=""v-model=""/>
<el-inputtype="textarea":rows=""placeholder=""v-model=""autosize/>
<el-inputtype="textarea":rows=""placeholder=""v-model=""resize="none"/>
<el-input-numberv-model=""size="small":precision="":step="":max="":controls=" true"/>
<el-selectv-model=""placeholder=""><el-optionv-for="item in Array":key="item.value":label="item.label":value="item.value":disabled="item.disabled"/></el-select>
<el-optionlabel=""value="":disabled="false"/></el-option>
<el-cascader:options=""v-model=""@change=""placeholder=""expand-trigger="click"/>
<el-switchv-model=""active-value=""inactive-value=""active-text=""inactive-text=""/>
<el-sliderv-model=""vertical="false"/>
<el-time-pickerv-model="":picker-options="{selectableRange: '18:30:00 - 20:30:00',}"placeholder="Arbitrary time"/>
<el-time-selectv-model="":picker-options="{start: '08:30',step: '00:15',end: '18:30',}"placeholder="Select time"/>
<el-date-pickerv-model=""type="date"placeholder=""/>
<el-uploadaction="":on-preview="":on-remove="":multiple="true":limit="":on-exceed="":file-list=""><el-buttonsize="small"type="primary">upload file</el-button><divslot="tip"class="el-upload__tip">Only jpg/png files with a size smaller than 500kb</div></el-upload>
<el-uploadaction=""list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog>
<el-rate v-model=""/>
<el-color-picker v-model=""/>
<el-transferv-model="":titles="['List 1', 'List 2']":data=""/>
<el-form:model="":rules=""ref=""@submit.native.prevent@keyup.enter.native=""><!-- FORM ITEMS --><!-- Button Submit --><el-form-item><el-buttontype="primary"@click="":loading="false"></el-button></el-form-item></el-form>
<el-form-item prop=""></el-form-item>
<el-table :data="tableData"></el-table>
<el-table-columnprop=""label=""width=""/>
<el-tag@click="closeHandler()"type="":closable="false">tag text</el-tag>
<el-progresstype="line":percentage="":status=""/>
<el-tree:data="":props=""@node-click=""/>
<el-pagination@size-change="sizeChange"@current-change="currentChange":current-page="currentPage":page-sizes="[20, 40, 80, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalNum" background></el-pagination>
<el-badge:value=""size="small"></el-badge>
<el-alerttitle="Alert title"type="success":closable="false":show-icon="true"/>
<el-menu:default-active=""mode="horizontal"@select="handleSelect"></el-menu>
<el-menu-item index="">Navigation option</el-menu-item>
<el-submenu index=""><template slot="title">title</template><el-menu-item index="-1">item one</el-menu-item></el-submenu>
<el-menumode="vertical":default-active="":collapse="false"background-color="#304156"text-color="#bfcbd9"active-text-color="#409EFF"></el-menu>
<el-tabsv-model=""type="card"></el-tabs>
<el-tab-pane:label="":name=""></el-tab-pane>
<el-breadcrumb separator="/"><el-breadcrumb-item:to="{ path: '/' }"></el-breadcrumb-item></el-breadcrumb>
<el-breadcrumb-item></el-breadcrumb-item>
<el-page-header @back="" content=""></el-page-header>
<el-page-headertitle="Back"content=""@back=""></el-page-header>
<el-dropdown><span style="cursor: pointer; color: #409eff;">Dropdown List<i class="el-icon-arrow-down el-icon--right"/></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>Action 1</el-dropdown-item></el-dropdown-menu></el-dropdown>
<el-dropdown-menu slot="dropdown"></el-dropdown-menu>
<el-dropdown-item></el-dropdown-item>
<el-steps :active="step" finish-status="success"><el-step title="step 1"/></el-steps>
<el-step title=""/>
<el-dialogtitle="Tips":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-buttontype="primary"@click="dialogVisible = false">Confirm</el-button></span></el-dialog>
<el-tooltipeffect="light"content=""placement="top-start"></el-tooltip>
<el-popoverplacement="top-start"title="Title"width="200"trigger="hover"content="this is content, this is content, this is content"><el-button slot="reference">Hover to activate</el-button></el-popover>
<el-popconfirmtitle="Are you sure to delete this?"><el-button slot="reference">Delete</el-button></el-popconfirm>
<el-popconfirmtitle="Are you sure to delete this?"confirmButtonText="YES"cancelButtonText="NO"confirmButtonType="primary"cancelButtonType="text"icon="el-icon-question"iconColor="#FF9900":hideIcon="false"><el-button slot="reference">Delete</el-button></el-popconfirm>
<el-card class=""><div slot="header" class="clearfix"><span>Card name</span></div></el-card>
<el-carousel height="150px"></el-carousel>
<el-carousel-item></el-carousel-item>
<el-collapsev-model=""@change="handleChange"></el-collapse>
<el-collapse-itemtitle=""name=""></el-collapse-item>
<el-timeline :reverse="false"></el-timeline>
<el-timeline-itemtimestamp="YYYY-MM-DD":hide-timestamp="false"placement="bottom"type="primary"color=""size="normal"icon=""></el-timeline-item>
<el-timeline-itemtimestamp="YYYY-MM-DD"></el-timeline-item>
<el-divider></el-divider>
<el-dividerdirection="horizontal"content-position="center"></el-divider>
<el-calendar v-model="" />
v-model="":range="[]":first-day-of-week="1"/>
<el-imagesrc=""fit="contain"></el-image>
<el-imagesrc=""fit="contain"alt="image"referrer-policy="":lazy="false"scroll-container="":preview-src-list="[]":z-index="2000"@load=""@error=""></el-image>
<el-backtop target=""></el-backtop>
<el-backtoptarget="":visibility-height="200":right="40":bottom="40"@click=""></el-backtop>
<ulclass="infinite-list"v-infinite-scroll=""style="overflow:auto"><li v-for="item in " class="infinite-list-item"></li></ul>
<el-avatarshape="circle"size="medium"src=""></el-avatar>
<el-avataricon=""size="medium"shape="circle"src=""srcSet=""alt=""fit="cover"@error="() => {}"></el-avatar>
<el-drawertitle="":visible="false"direction="rtl"></el-drawer>
<el-drawer:append-to-body="false":before-close="":close-on-press-escape=""custom-class="":destroy-on-close="false":modal="true":modal-append-to-body="true"direction="rtl":show-close="true"size="30%"title="":visible="false":wrapperClosable="true":withHeader="true"@open="() => {}"@opened="() => {}"@close="() => {}"@closed="() => {}"></el-drawer>
this.$notify({title: 'Title',message: 'Message',type: 'success',duration: 2500,});
this.$message({type: '',message: '',showClose: false,});
this.$loading({lock: true,text: 'loading...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',});
this.$alert('This is a message', 'Title', {confirmButtonText: 'OK',callback: (action) => {},});
this.$confirm('Message', 'Title', {confirmButtonText: 'OK',cancelButtonText: 'Cancel',type: 'warning',}).then(() => {}).catch(() => {});
this.$msgbox({title: 'Title',message: 'Title',showCancelButton: true,confirmButtonText: 'OK',cancelButtonText: 'Cancel',beforeClose: (action, instance, done) => {if (action === 'confirm') {instance.confirmButtonLoading = true;instance.confirmButtonText = 'Loading...';setTimeout(() => {done();setTimeout(() => {instance.confirmButtonLoading = false;}, 300);}, 3000);} else {done();}}}).then((action) => {// Do something});
this.$prompt('Please input your e-mail', 'Tip', {confirmButtonText: 'OK',cancelButtonText: 'Cancel',inputPattern: /[w!#$%&'*+/=?^_`{|~-]+(?:.[w!#$%&'*+/=?^_`{|}~-]+)*@(?:[w](?:[w-]*[w])?.)+[w](?:[w-]*[w])?/},inputErrorMessage: 'Invalid Email'}).then(data) => {// Do something}).catch(() => {// Do something});
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.