vuemini-button v0.1.5

vuemini

安装包

npm install vuemini-button

引入

import UI from 'vuemini-button'
import 'vuemini-button/lib/vuemini-button.css'
Vue.use(UI)

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

使用方法

按钮的尺寸 默认为 Medium

<button class="mini ui button">Mini</button>
<button class="tiny ui button">Tiny</button>
<button class="small ui button">Small</button>
<button class="medium ui button">Medium</button>
<button class="large ui button">Large</button>
<button class="big ui button">Big</button>
<button class="huge ui button">Huge</button>
<button class="massive ui button">Massive</button>

按钮的icon图标

<my-button icon="user">User</my-button>

按钮的禁用

<my-button disabled>我是不能按的按钮</my-button>

按钮的loading状态

<my-button loading>加载中</my-button>

按钮的click事件

<my-button @click="handleClick">点击事件</my-button>

轮播图的使用

// style: 展示图片的大小
// atuo: 自动轮播的频率
// list: 数据列表
// curidx: 从第几张图片开始播放
// click: 点击回调事件
 <my-slider
      style="width:250px;height:350px;"
      :auto="2000"
      :list="list"
      :curidx="curidx"
      @click="handleClick">
</my-slider>

标题的使用

// level: 标题等级 1-6一次减少
// icon : 标题中的字体图标
// slot="sub": 具名插槽
<my-headline :level="2" icon="wifi">
      标题内容
      <div slot="sub">
        子标题内容
      </div>
</my-headline>