代碼倉庫

版本詳細說明，請查看doc下面的版本文件

最新版本 v0.2.4

安裝

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,ElpImageOfSelfDialog,ElpImagesDialog,ElpImageList} 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) 復制代碼

組件使用說明

彈出框：elp-dialog

增加了滑出效果

使用與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> 復制代碼

搜索框

該組件包括：輸入框和搜索按鈕；支持回車鍵刪除完內容之后查詢、存在內容回車查詢、點擊搜索按鈕進行查詢，增加防抖

示例

<elp-search v-model="value"></elp-search> 復制代碼

按鍵獲取焦點指令

• 1、引入指令

import {ShortCut} from 'ele-plus' 復制代碼

• 2、局部注冊

directives: {ShortCut} 復制代碼

• 3、全局注冊

Vue.use(ShortCut) 復制代碼

• 4、指令v-shortCut

綁定到父元素即可

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

接收值說明

1、self（value接收值為id的值或id的數組）

用于指定固定元素獲取焦點

• 字符串：

//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> 復制代碼

2、其他修飾符(主要用于固定列，并需要使用上下鍵獲取上下行的相同位置元素焦點)

• 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的使用方法一致,只是增加了防抖

圖片組件(不依賴于elementUI，使用原生img)

在線運行

• 不帶工具欄，支持上下切換的圖片組件 ElpImageOfSelfDialog：

引入方式：

// 全局import {ElpImageOfSelfDialog} from 'ele-plus'Vue.use(ElpImageOfSelfDialog)//局部import {ElpImageOfSelfDialog} from 'ele-plus' export default {components: {ElpImageOfSelfDialog} } 復制代碼

接收的屬性如下：

• 1、visible：[Boolean]，默認值false。是否顯示 visible.sync="dialogVisible"
• 2、imageUrl：[String],必填項，
• 3、shadowType：[Boolean],默認值true（顯示遮罩層）。是否顯示遮罩層
• 4、imageStyle：[Object],默認值{height: '800px'}
• 5、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}} 復制代碼

接收的屬性如下：

• 1、visible：[Boolean]，默認值false。是否顯示 visible.sync="dialogVisible"
• 2、imageUrl：[String],必填項，
• 3、shadowType：[Boolean],默認值true（顯示遮罩層）。是否顯示遮罩層
• 4、imageStyle：[Object],默認值{height: '800px'}
• 5、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、ElpImagesDialog

• 圖片列表組件 ElpImageList：

引入方式：

//全局import {ElpImageList} from 'ele-plus'Vue.use(ElpImageList)//或局部import {ElpImageList} from 'ele-plus'export default {components: {ElpImageList}} 復制代碼

接收的屬性如下：

• 1、visible：[Boolean]，必填項，默認false。提供關閉子窗口的開關 visible.sync="dialogVisible"
• 2、dialogType：[String],默認值'self'。self:不帶工具欄，images:帶工具欄
• 3、shadow：[Boolean],默認值true（顯示遮罩層）。是否顯示遮罩層
• 4、imageStyle：[Object],默認值{height: '800px'}
• 5、imageList：[Array],必填項，結構可為[{title:'title1',list:['imgurl1','imgurl2'...]}]
• 6、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> 復制代碼

轉載于:https://juejin.im/post/5d56088a6fb9a06af471bd24

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ele-plus包的安装和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。