ui-learn-93-ui
状态
学习阶段
下载
npm i vue-ui-learn
引入注册
import UI from 'vue-ui-learn/lib/demo_vue_ui.umd.min,js' import 'vue-ui-learn/lib/demo_vue_ui.css' Vue.use(UI)
使用
按钮
- icon 设置图标
- size 设置大小
- loading设置按钮加载状态
- disabled 设置按钮不可点击
- animated 设置按钮动画效果
- 支持click点击事件
<my-button icon="bug" :loading="isloading" size="huge" @click="router">
跳转按钮
</my-button>
<my-button animated="vertical" style="margin-top:10px">
<div slot="hidden">$10000</div>
<div slot="visible">
<i class="shop icon"></i>不要错过哈
</div>
</my-button>
轮播图
-
curIdx 设置开始选中图片下标
-
list 设置图片列表,数据为数组套对象,
- 对象中应包含:
- src成员设置图片地址,本地图片请引入设置
- alt 设置图片标题
- 对象中应包含:
-
auto 设置自动轮播,值为数值,代表毫秒
-
支持图片点击事件click ,
-
支持轮播切换事件slider,可以获得图片下标及路径标题信息
<my-slider @click="aaaa" :list="list" :curIdx="curIdx" :auto="auto" style="margin-top:20px;width:250px;height:350px"></my-slider>
标题
- level 标题等级 h1-h6
- icon 设置图标
- size 大小
- 默认插槽 以及 sub子标题插槽
<my-headline :level="2" size="small" icon="user">
标题1
<div slot="sub">子标题1</div>
</my-headline>
弹出框
- v-model 决定弹出框显示隐藏
- 支持close关闭事件 commit确认事件
- 插槽
- header 弹出框标题
- content 弹出框内容
- close 关闭文字
- commit 确认文字
<my-dialog v-model="isShow" @close="closed" @commit="commited">
<div slot="header">选择弹出框</div>
<div slot="content">
<h1>选择弹出框内容</h1>
</div>
<!-- <div slot="close"></div>
<div slot="commit"></div> -->
</my-dialog>
分割线
- icon 设置图标
- 支持默认插槽
<my-divider icon="user">
分割线内容
</my-divider>