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>