• Packages
  • Themes
  • Documentation
  • Blog
  • Discuss
Sign in

element-ui-snippets

vue element-ui snippets
  • #vue
  • #vue.js
  • #vue2
  • #vue2.js
  • #element-ui
JoseNoriegaa
1.0.0 362
1
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

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.

  1. Open "Atom" and find the "Install Packages" section.
    Packages -> Settings View -> Install Packages/Themes
    
  2. Find the element-ui-snippets extension and install it

Component list

  • Basics
    • el-col
    • el-row
    • el-container
    • el-button
    • el-link
  • Form
    • el-radio
    • el-radio-group
    • el-checkbox
    • el-checkbox-group
    • el-checkbox-button
    • el-input
    • el-input-number
    • el-select
    • el-option
    • el-cascader
    • el-switch
    • el-slider
    • el-time-picker
    • el-time-select
    • el-date-picker
    • el-upload
    • el-color-picker
    • el-transfer
    • el-form
    • el-form-item
  • Data
    • el-table
    • el-table-column
    • el-tag
    • el-tree
    • el-pagination
    • el-badge
  • Notice
    • el-alert
    • Loading
    • Message
    • MessageBox
    • Notification
  • Navigation
    • el-menu
    • el-menu-item
    • el-submenu
    • el-tabs
    • el-tab-pane
    • el-breadcrumb
    • el-breadcrumb-item
    • el-page-header
    • el-dropdown
    • el-dropdown-menu
    • el-steps
    • el-step
  • Others
    • el-dialog
    • el-tooltip
    • el-popover
    • el-popconfirm
    • el-card
    • el-carousel
    • el-collapse
    • el-collapse-item
    • el-timeline
    • el-timeline-item
    • el-divider
    • el-calendar
    • el-image
    • el-backtop
    • Infinite Scroll
    • el-avatar
    • el-drawer

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

License

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by