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>

elcolflex

<el-col
  type="flex"
  align=""
  justify=""
>
 
</el-col>

elcolsp
```
<el-col :span="">
 
</el-col>
```

elcolfull

<el-col
  :span=""
  :offset=""
  :push=""
  :pull=""
  :xl=""
  :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>

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"
  size="medium"
  name=""
  @change=""
>
 
</el-radio>

elradiogroup

<el-radio-group
  v-model=""
  size="medium"
  :disabled="false"
>
 
</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=""
  :disabled="false"
  true-label=""
  false-label=""
  :border="false"
  size="medium"
  name=""
  :checked="false"
  :indeterminate="false"
  @change=""
>
 
</el-checkbox>

elcheckgrfull

<el-checkbox-group
  v-model=""
  size="small"
  :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>

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>

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>

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>

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

element-ui-snippets

Vue Element-UI Snippets

Installation:

Snippets:

Basic

Column

Row

Container

Button

Form

Radio

Checkbox

Inputs

Select

Cascader

Switch

Slider

Time picker

Date time picker

Upload

Rate

Color picker

Transfer

Form

Data

Table

Tag

Progress

Tree

Pagination

Badge

Notice

Alert

Navigation

Menu

Tabs

Breadcrumb

Dropdown

Steps

Others

Dialog

Tooltip

Popover

Card

Carousel

Collapse

JavaScript

I think this package is bad news.