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教程