Vue Element-UI Snippets
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.
Installation:
For install this extension, there are a few steps.
- Open "Atom" and find the "Install Packages" section.
Packages -> Settings View -> Install Packages/Themes
- Find the element-ui-snippets extension and install it
Component list
- Basics
- Form
- Data
- Notice
- Navigation
- Others
Snippets:
Basic
Column
- elcol
<el-col> </el-col>
- elcolr
<el-col :xs="" :sm="" :md="" :lg="" :xl="" > </el-col>
- elcolsp
<el-col :span=""> </el-col>
- elcolfull
<el-col :span="" :offset="" :push="" :pull="" :xs="" :sm="" :md="" :lg="" :xl="" tag="" > </el-col>
Row
- elrow
<el-row> </el-row>
- elrowflex
<el-row type="flex" align="" justify="" > </el-row>
- elrowc2
<el-row> <el-col :span="12"> </el-col> <el-col :span="12"> </el-col> </el-row>
- elrowg
<el-row :gutter=""> </el-row>
- elrowfull
<el-row :gutter="0" type="" tag="div" justify="start" align="top" > </el-row>
Container
- elcontainer
<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>
Button
- elbtn
<el-button type="text" @click.native="" > </el-button>
- elbtnfull
<el-button size="medium" type="primary" :plain="false" :round="false" :circle="false" :loading="false" :disabled="false" icon="" :autofocus="false" native-type="button" @click.native="" > </el-button>
Link
- ellink
<el-link
href="url"
target="_self"
>
</el-link>
- ellinkfull
<el-link
type="primary"
underline="true"
disabled="false"
href="url"
target="_self"
icon=""
>
</el-link>
Form
Radio
- elradio
<el-radio v-model="" label="" > </el-radio>
- elradio2
<el-radio v-model="" label="" > option A </el-radio> <el-radio v-model="" label="" > option B </el-radio>
- elradiofull
<el-radio v-model="" label="" :disabled="false" :border="false" size="medium" name="" @change="" > </el-radio>
- elradiogroup
<el-radio-group v-model="" @change="" > </el-radio-group>
- elradiogroupfull
<el-radio-group v-model="" size="medium" :disabled="false" text-color="#FFFFFF" fill="#409EFF" @change="" > </el-radio-group>
Checkbox
- elcheck
<el-checkbox v-model=""> </el-checkbox>
- elcheckgr
<el-checkbox-group v-model="" size="small" > </el-checkbox-group>
- elcheckfull
<el-checkbox v-model="" label="" true-label="" false-label="" :disabled="false" :border="false" size="medium" name="" :checked="false" :indeterminate="false" @change="" > </el-checkbox>
- elcheckgrfull
<el-checkbox-group v-model="" size="medium" :disabled="false" :min="" :max="" text-color="#FFFFFF" fill="#409EFF" @change="" > </el-checkbox-group>
- elcheckbtn
<el-checkbox-button :label="" true-label="" false-label="" > </el-checkbox-button>
- elcheckbtnfull
<el-checkbox-button label="" true-label="" false-label="" :disabled="false" name="" :checked="false" > </el-checkbox-button>
Inputs
- elinput
<el-input v-model="" placeholder="" />
- elinputpicon
<el-input v-model="" placeholder="" prefix-icon="" />
- elinputsicon
<el-input v-model="" placeholder="" suffix-icon="" />
- eltextarea
<el-input type="textarea" :rows="" placeholder="" v-model="" />
- eltextareaauto
<el-input type="textarea" :rows="" placeholder="" v-model="" autosize />
- eltextareanr
<el-input type="textarea" :rows="" placeholder="" v-model="" resize="none" />
- elinputnum
<el-input-number v-model="" size="small" :precision="" :step="" :max="" :controls=" true" />
Select
- elselect
<el-select v-model="" placeholder="" > <el-option v-for="item in Array" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>
- elopt
<el-option label="" value="" :disabled="false" /> </el-option>
Cascader
- elcascader
<el-cascader :options="" v-model="" @change="" placeholder="" expand-trigger="click" />
Switch
- elswitch
<el-switch v-model="" active-value="" inactive-value="" active-text="" inactive-text="" />
Slider
- elslider
<el-slider v-model="" vertical="false" />
Time picker
- eltimepicker
<el-time-picker v-model="" :picker-options="{ selectableRange: '18:30:00 - 20:30:00', }" placeholder="Arbitrary time" />
- eltimeselect
<el-time-select v-model="" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', }" placeholder="Select time" />
Date time picker
- eldatepicker
<el-date-picker v-model="" type="date" placeholder="" />
Upload
- elupload
<el-upload action="" :on-preview="" :on-remove="" :multiple="true" :limit="" :on-exceed="" :file-list="" > <el-button size="small" type="primary" > upload file </el-button> <div slot="tip" class="el-upload__tip" > Only jpg/png files with a size smaller than 500kb </div> </el-upload>
- eluploadavatar
<el-upload action="" 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>
Rate
- elrate
<el-rate v-model=""/>
Color picker
- elcolorpicker
<el-color-picker v-model=""/>
Transfer
- eltrans
<el-transfer v-model="" :titles="['List 1', 'List 2']" :data="" />
Form
- elform
<el-form :model="" :rules="" ref="" @submit.native.prevent @keyup.enter.native="" > <!-- FORM ITEMS --> <!-- Button Submit --> <el-form-item> <el-button type="primary" @click="" :loading="false" > </el-button> </el-form-item> </el-form>
- elformitm
<el-form-item prop=""> </el-form-item>
Data
Table
- eltable
<el-table :data="tableData"> </el-table>
- eltablecol
<el-table-column prop="" label="" width="" />
Tag
- eltag
<el-tag @click="closeHandler()" type="" :closable="false" > tag text </el-tag>
Progress
- elprogress
<el-progress type="line" :percentage="" :status="" />
Tree
- eltree
<el-tree :data="" :props="" @node-click="" />
Pagination
- elpagination
<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>
Badge
- elbadge
<el-badge :value="" size="small" > </el-badge>
Notice
Alert
- elalrt
<el-alert title="Alert title" type="success" :closable="false" :show-icon="true" />
Navigation
Menu
- elmenu
<el-menu :default-active="" mode="horizontal" @select="handleSelect" > </el-menu>
- elmenuitm
<el-menu-item index=""> Navigation option </el-menu-item>
- elsubmenu
<el-submenu index=""> <template slot="title"> title </template> <el-menu-item index="-1"> item one </el-menu-item> </el-submenu>
- elmenuv
<el-menu mode="vertical" :default-active="" :collapse="false" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > </el-menu>
Tabs
- eltabs
<el-tabs v-model="" type="card" > </el-tabs>
- eltabp
<el-tab-pane :label="" :name="" > </el-tab-pane>
Breadcrumb
- elbreadcrumb
<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }" > </el-breadcrumb-item> </el-breadcrumb>
- elbreadcrumbitm
<el-breadcrumb-item> </el-breadcrumb-item>
Page Header
- elpageheader
<el-page-header @back="" content=""> </el-page-header>
- elpageheaderfull
<el-page-header title="Back" content="" @back="" > </el-page-header>
Dropdown
- eldropdown
<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>
- eldropdownmenu
<el-dropdown-menu slot="dropdown"> </el-dropdown-menu>
- eldropdownitm
<el-dropdown-item> </el-dropdown-item>
Steps
- elsteps
<el-steps :active="step" finish-status="success"> <el-step title="step 1"/> </el-steps>
- elstep
<el-step title=""/>
Others
Dialog
- eldialog
<el-dialog title="Tips" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false"> Cancel </el-button> <el-button type="primary" @click="dialogVisible = false" > Confirm </el-button> </span> </el-dialog>
Tooltip
- eltooltip
<el-tooltip effect="light" content="" placement="top-start" > </el-tooltip>
Popover
- elpopover
<el-popover placement="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>
Popconfirm
- elpopconfirm
<el-popconfirm title="Are you sure to delete this?" > <el-button slot="reference"> Delete </el-button> </el-popconfirm>
- elpopconfirmfull
<el-popconfirm title="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>
Card
- elcard
<el-card class=""> <div slot="header" class="clearfix"> <span>Card name</span> </div> </el-card>
Carousel
- elcarousel
<el-carousel height="150px"> </el-carousel>
- elcarouselitm
<el-carousel-item> </el-carousel-item>
Collapse
- elcollapse
<el-collapse v-model="" @change="handleChange" > </el-collapse>
- elcollapseitm
<el-collapse-item title="" name="" > </el-collapse-item>
Timeline
- eltimeline
<el-timeline :reverse="false"> </el-timeline>
- eltimelinefull
<el-timeline-item timestamp="YYYY-MM-DD" :hide-timestamp="false" placement="bottom" type="primary" color="" size="normal" icon="" > </el-timeline-item>
- eltimelineitem
<el-timeline-item timestamp="YYYY-MM-DD" > </el-timeline-item>
Divider
- eldivider
<el-divider></el-divider>
- eldividerfull
<el-divider direction="horizontal" content-position="center" > </el-divider>
Calendar
- elcalendar
<el-calendar v-model="" />
- elcalendarfull
v-model="" :range="[]" :first-day-of-week="1" />
Image
- elimage
<el-image src="" fit="contain" > </el-image>
- elimagefull
<el-image src="" fit="contain" alt="image" referrer-policy="" :lazy="false" scroll-container="" :preview-src-list="[]" :z-index="2000" @load="" @error="" > </el-image>
Backtop
- elbacktop
<el-backtop target=""> </el-backtop>
- elbacktopfull
<el-backtop target="" :visibility-height="200" :right="40" :bottom="40" @click="" > </el-backtop>
Infinite Scroll
- elinfinite
<ul class="infinite-list" v-infinite-scroll="" style="overflow:auto" > <li v-for="item in " class="infinite-list-item"> </li> </ul>
Avatar
- elavatar
<el-avatar shape="circle" size="medium" src="" > </el-avatar>
- elavatarfull
<el-avatar icon="" size="medium" shape="circle" src="" srcSet="" alt="" fit="cover" @error="() => {}" > </el-avatar>
Drawer
- eldrawer
<el-drawer title="" :visible="false" direction="rtl" > </el-drawer>
- eldrawerfull
<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>
JavaScript
- elnoti
this.$notify({ title: 'Title', message: 'Message', type: 'success', duration: 2500, });
- elmessage
this.$message({ type: '', message: '', showClose: false, });
- elloading
this.$loading({ lock: true, text: 'loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)', });
- elalert
this.$alert('This is a message', 'Title', { confirmButtonText: 'OK', callback: (action) => {}, });
- elconfirm
this.$confirm('Message', 'Title', { confirmButtonText: 'OK', cancelButtonText: 'Cancel', type: 'warning', }).then(() => { }).catch(() => { });
- elmsgbox
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 });
- elprompt
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 });