ele-plus包的安装和使用

时间  2019-11-07
标签 ele 安装 使用 繁體版
原文   原文链接

代码仓库

版本详细说明，请查看doc下面的版本文件

最新版本 v0.5.7

安装

npm install ele-plus -S
复制代码

引入ElePlus

完整引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import ElePlus from 'ele-plus'
import 'ele-plus/lib/ele-plus.css'
Vue.use(ElePlus)
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})
复制代码

按需引入

import {
        ElpDialog,
        ElpSearch,
        ElpSvgIcon,
        ElpButton,
        ElpImageDialog,
        ElpImageList,
        ElpImageOfSelfDialog,
        ElpImagePage,
        ElpImagesDialog,
        ShortCut,
        DragImage,
        MouseScroll,
        ElpCarousel,
        ElpControllerTable,
        ElpFilterOperator,
        ElpPagination,
        ElpTable,
        ConstantParams
  } from 'ele-plus'
  
  Vue.use(ElpDialog)
  Vue.use(ElpSearch)
  Vue.use(ElpSvgIcon)
  Vue.use(ElpButton)
  Vue.use(ElpImageDialog)
  Vue.use(ElpImageOfSelfDialog)
  Vue.use(ElpImagesDialog)
  Vue.use(ElpImageList)
  Vue.use(ElpImageOfSelfDialog)
  Vue.use(ElpImagePage)
  Vue.use(ElpImagesDialog)
  Vue.use(ShortCut)
  Vue.use(DragImage)
  Vue.use(MouseScroll)
  Vue.use(ElpControllerTable)
  Vue.use(ElpFilterOperator)
  Vue.use(ElpPagination)
  Vue.use(ElpTable)
  Vue.use(ConstantParams)
复制代码

组件使用说明

弹出框：elp-dialog

增长了滑出效果css

使用与el-dialog的使用方法一致，只是增长了滑出效果的属性slideOutType

  • 默认显示方式，居中显示：center
  • 从顶部滑出，居中显示：top
  • 从底部滑出，居中显示：bottom
  • 从右侧滑出，居中显示：right
  • 从左侧滑出，居中显示：left
  • 从右侧滑出，贴近边缘：rightSide
  • 从左侧滑出，贴近边缘：leftSide
  • 从顶部滑出，贴近边缘：topSide

示例

<el-button @click="visible=true">点击显示弹出框</el-button>
    <elp-dialog :visible.sync="visible" title="标题" slideOutType="rightSide">弹出框内容</elp-dialog>
复制代码

搜索框

该组件包括：输入框和搜索按钮；支持回车键删除完内容以后查询、存在内容回车查询、点击搜索按钮进行查询，增长防抖vue

示例

<elp-search v-model="value"></elp-search> 复制代码

按键获取焦点指令

  • 一、引入指令
import {ShortCut} from 'ele-plus'
复制代码
  • 二、局部注册
directives: {
    ShortCut
  }
复制代码
  • 三、全局注册
Vue.use(ShortCut)
复制代码
  • 四、指令v-shortCut

绑定到父元素便可git

  • 指令名：keydown
  • 修饰符：keyDown（回车和上下左右键）、arrow（上下左右键）、enter（回车键）、self（指定元素）

接收值说明

一、self（value接收值为id的值或id的数组）

用于指定固定元素获取焦点github

  • 字符串：
//form中也可以使用
  <el-form v-shortCut:keydown.keyDown.self="'aa'">
  <el-input id='aa'><el-input>
  <el-form>
复制代码
  • 数组：
<el-form v-shortCut:keydown.keyDown.self="['aa','bb','cc','dd']">
...
  <el-input id='aa'><el-input>
  <el-input id='bb'><el-input>
  <el-input id='cc'><el-input>
  <el-input id='dd'><el-input>
...
<el-form>
复制代码
二、其余修饰符(主要用于固定列，并须要使用上下键获取上下行的相同位置元素焦点)
  • Number类型：值为一行的操做元素个数，用于上下键
v-shortCut:keydown.keyDown="10"
 v-shortCut:keydown.arrow="10"
复制代码
  • 可变值：用于重置光标位置
v-shortCut:keydown.keyDown="s"
   v-shortCut:keydown.arrow="s"
   v-shortCut:keydown.enter="s"
复制代码
  • Object：
//form中也可以使用
<el-form v-shortCut:keydown.enter>...<el-form>
//可编辑表格中使用
<el-table  v-shortCut:keydown.keyDown="shortCutObj">....</el-table>
//定义变量
data(){
  return {
    shortCutObj: {
      rowCount: 11,//值为一行的操做元素个数，用于上下键
      callBack: () => {//获取最后一个元素触发的回调函数
        return this.addRow()
      },
      parenClassName: 'el-table__body-wrapper', //父元素class下的全部操做元素
      ignore:['elpignore']//能够忽略元素： disabled、select、radio、checkbox、date、multi_select,elpignore (默认忽略：'radio', 'checkbox', 'disabled')
    },
  }
}
复制代码

防抖按钮：elp-button

使用与el-button的使用方法一致,只是增长了防抖npm

图片组件

  • 不带工具栏，支持上下切换的图片组件 ElpImageOfSelfDialog：

引入方式：element-ui

// 全局
 import {ElpImageOfSelfDialog} from 'ele-plus'
 Vue.use(ElpImageOfSelfDialog)
 //局部
 import {ElpImageOfSelfDialog} from 'ele-plus'
export default {
    components: {
        ElpImageOfSelfDialog
    }
}
复制代码
接收的属性以下：
  • 一、visible：[Boolean]，默认值false。是否显示 visible.sync="dialogVisible"
  • 二、imageUrl：[String],必填项，
  • 三、shadowType：[Boolean],默认值true（显示遮罩层）。是否显示遮罩层
  • 四、imageStyle：[Object],默认值{height: '800px'}
  • 五、imageList：[Array],必填项，结构可为['imgurl1','imgurl2'...]，也可为[{title:'title1',list:['imgurl1','imgurl2'...]}]
示例：
<elp-image-of-self-dialog
          :visible.sync="dialogVisible"
          :image-list="imageList"
          :shadow-type="shadow"
          append-to-body
          :image-url="src"
  />
   export default {
data(){
  return {
    dialogVisible: false,
    shadow: true,
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg',
    imageList:[
      {
        title:'title-01',
        list:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg'
          ]},
          {
        title:'title-02',
        list:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=2adb4cf9945d0ba46adca46f00b99644&imgtype=0&src=http%3A%2F%2Fimage.finance.china.cn%2Fupload%2Fimages%2F2014%2F0410%2F085000%2F0_2323627_580fd395d60d023a4cf8b45c31cd1218.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=4b8f8e2c2686d41a9e2ffcadce1c7721&imgtype=0&src=http%3A%2F%2Fimg3.ph.126.net%2F1KDLXCf_5HxC0KDAxUQZSg%3D%3D%2F2866541162838628463.jpg'
          ]}
    ]
  }
}
}     
复制代码

  • 带工具栏(放大、缩小、旋转、上下切换)的图片组件 ElpImagesDialog：

    引入方式：数组

// 全局
    import {ElpImagesDialog} from 'ele-plus'
    Vue.use(ElpImagesDialog)
    //局部
    import {ElpImagesDialog} from 'ele-plus'
   export default {
       components: {
           ElpImagesDialog
       }
   }
复制代码
接收的属性以下：
  • 一、visible：[Boolean]，默认值false。是否显示 visible.sync="dialogVisible"
  • 二、imageUrl：[String],必填项，
  • 三、shadowType：[Boolean],默认值true（显示遮罩层）。是否显示遮罩层
  • 四、imageStyle：[Object],默认值{height: '800px'}
  • 五、imageList：[Array],必填项，结构可为['imgurl1','imgurl2'...]，也可为[{title:'title1',list:['imgurl1','imgurl2'...]}]
示例：
<elp-images-dialog
        :visible.sync="dialogVisible"
        :image-list="imageList"
        :shadow-type="shadow"
        append-to-body
        :image-url="src"
  />
   export default {
data(){
  return {
    dialogVisible: false,
    shadow: true,
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg',
    imageList:[
      {
        title:'title-01',
        list:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg'
          ]},
          {
        title:'title-02',
        list:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=2adb4cf9945d0ba46adca46f00b99644&imgtype=0&src=http%3A%2F%2Fimage.finance.china.cn%2Fupload%2Fimages%2F2014%2F0410%2F085000%2F0_2323627_580fd395d60d023a4cf8b45c31cd1218.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=4b8f8e2c2686d41a9e2ffcadce1c7721&imgtype=0&src=http%3A%2F%2Fimg3.ph.126.net%2F1KDLXCf_5HxC0KDAxUQZSg%3D%3D%2F2866541162838628463.jpg'
          ]}
    ]
  }
}
}     
复制代码

  • 单个图片组件包 ElpImageDialog：

引入方式: js import {ElpImageDialog} from 'ele-plus' Vue.use(ElpImageDialog) 包含的组件：ElpImageOfSelfDialog、ElpImagesDialogbash

  • 图片列表组件 ElpImageList：

引入方式：app

//全局
     import {ElpImageList} from 'ele-plus'
     Vue.use(ElpImageList)
  //或局部
    import {ElpImageList} from 'ele-plus'
    export default {
        components: {
            ElpImageList
        }
    }
复制代码
接收的属性以下：
  • 一、visible：[Boolean]，必填项，默认false。提供关闭子窗口的开关 visible.sync="dialogVisible"
  • 二、dialogType：[String],默认值'self'。self:不带工具栏，images:带工具栏
  • 三、shadow：[Boolean],默认值true（显示遮罩层）。是否显示遮罩层
  • 四、imageStyle：[Object],默认值{height: '800px'}
  • 五、imageList：[Array],必填项，结构可为[{title:'title1',list:['imgurl1','imgurl2'...]}]
  • 六、imgsStyle：[Object],默认值{width:'250px',height:'170px'}，提供图片列表中的小图片样式
示例：
<template>
<div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="默认" name="first">
      <p>dialogType:'self' 默认值，带有遮罩层的图片切换</p>
      <elp-image-list :visible.sync="tabs[0].visible" :image-list="imgFiles"/>
    </el-tab-pane>
    <el-tab-pane label="图片切换无遮罩层" name="second">
      <p>:shadow="false" 无遮罩层的图片切换(默认值为true)</p>
      <elp-image-list :visible.sync="tabs[1].visible" :image-list="imgFiles" :shadow="false"/>
    </el-tab-pane>
    <el-tab-pane label="带有工具栏" name="third">
      <p>dialogType:'images' 带有工具栏（放大缩小旋转）</p>
      <elp-image-list :visible.sync="tabs[2].visible" :image-list="imgFiles" dialogType='images'/>
    </el-tab-pane>
    <el-tab-pane label="带有工具栏，不带遮罩" name="fourth">
      <p>dialogType:'images' 带有工具栏（放大缩小旋转）不带遮罩</p>
      <elp-image-list :visible.sync="tabs[3].visible" :image-list="imgFiles" dialogType='images'  :shadow="false"/>
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script>
export default {
data(){
  return {
    activeName: 'first',
    tabs:[
      {name:'first',visible:false},
      {name:'second',visible:false},
      {name:'third',visible:false},
      {name:'fourth',visible:false}
    ],
    imgFiles:[
      {
        title:'title-01',
        list:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=5781beb0f17d4f665d4cc20cb803775b&imgtype=0&src=http%3A%2F%2Fpic.k73.com%2Fup%2Fsoft%2F2016%2F0102%2F092635_44907394.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=c9d6906dfc54e9a286c8cf3199072660&imgtype=0&src=http%3A%2F%2Fwww.sx198.com%2Fp%2F84%2Fimage%2F201611%2F1479608859183678447.gif'
          ]},
          {
        title:'title-02',
        list:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=2adb4cf9945d0ba46adca46f00b99644&imgtype=0&src=http%3A%2F%2Fimage.finance.china.cn%2Fupload%2Fimages%2F2014%2F0410%2F085000%2F0_2323627_580fd395d60d023a4cf8b45c31cd1218.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=4b8f8e2c2686d41a9e2ffcadce1c7721&imgtype=0&src=http%3A%2F%2Fimg3.ph.126.net%2F1KDLXCf_5HxC0KDAxUQZSg%3D%3D%2F2866541162838628463.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=8486823d19d99ae586d582985de6fb65&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201305%2F25%2F20130525153450_nHVaH.thumb.700_0.jpeg'
          ]}
    ]
  }
}
}
</script>     
复制代码

  • 支持mouseover时滚轮滚动时图片放大缩小，mouseout时取消事件

在线运行:codepen.io/logmei/pen/…ide

鼠标滚轮指令

  • 一、引入指令
import {MouseScroll} from 'ele-plus'
复制代码
  • 二、局部注册
directives: {
    MouseScroll
  }
复制代码
  • 三、全局注册
Vue.use(MouseScroll)
复制代码
  • 四、指令v-mouseScroll

绑定事件：downWheel（向下滚动），upWheel（向上滚动） 示例:

<div 
    v-mouseScroll 
    @downWheel="downWheel" 
    @upWheel="upWheel"  
    >
    内容
    </div>

复制代码

elp-table、elp-controller-table、elp-filter-operator组件请查看

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程