vue el-select 根据后台返回值显示_分享一个自己的vue组件：cardtabs

card-tabs

一个基于vue的可视化tabs切换组件，可用于图片/照片展示，可视化业务处理，系统门户等。效果完全基于CSS3动画，扩展性高

github地址：https://github.com/yeheihei/card-tabs

示例

1. 作为图片预览

2. 自定义业务

安装

npm install cardtabs

注册

// 全局注册
import cardTabs from 'cardtabs'
Vue.use(cardTabs)

// 局部注册
import {cardTabs} from 'cardtabs'
components: {
  cardTabs
}

使用

示例代码

"app">"cardTabs" :cards="cards">

"customSlot">
            自定义内容






参数：

参数名	类型	是否必填	默认值	说明
cards	Array	是	[]	对象数组，控制组件展示
height	Number	否	500	组件高度，非实际高度(bug)
showIcon	Boolean	否	true	左右切换按钮是否默认显示

cards：

参数名	类型	是否必填	默认值	说明
slotName	String	否	null	自定义内容的自定义插槽名，和 url 同时有且只能有一个
url	Streing	否	null	作为图片展示是预览 url

插槽：

插槽名	说明
leftIcon	自定义左侧切换按钮
rightIcon	自定义右侧切换按钮
自定义插槽名	根据 cards 数据配置的 slotName 来确定

方法：

方法名	参数	返回值	说明
leftTog	无	无	左切换
rightTog	无	无	右切换
setIndex	index	无	切换到第几个索引

本项目启动

// 安装依赖
npm install

// 启动
npm run serve

// 文档打包
npm run build

// cardtabs 打包
npm run lib