Wondering what’s next for npm?Check out our public roadmap! »

ui-learn-93-ui

0.0.3 • Public • Published

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>

Keywords

none

Install

npm i ui-learn-93-ui

DownloadsWeekly Downloads

10

Version

0.0.3

License

none

Unpacked Size

2.53 MB

Total Files

35

Last publish

Collaborators

  • avatar