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

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

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
});

Vue Element-UI Snippets

Installation:

Component list

Snippets:

Basic

Form

Data

Notice

Navigation

Others

JavaScript

I think this package is bad news.