ui-97 v0.0.2

ui-97

下载

npm i ui-97

使用

import UI from 'ui-97'
import 'ui-97/lib/ui-97.css'
Vue.use(UI)

组件

-按钮
-轮播图
-分隔条
-标题
-对话框

MxButton 按钮样式组件

<mx-button>你笑的真好看~</mx-button>
    <br>
    <mx-button></mx-button>
    <br>
    <mx-button :size="size">mini大小的按钮</mx-button>
    <br>
    <mx-button size="huge">huge大小的按钮</mx-button>
    <hr>
    <button @click="hChangeSize">改变大小</button>
    <br>
    <mx-button  icon="user">icon为user的按钮</mx-button>
    <br>
    <mx-button  icon="history">icon为history的按钮</mx-button>
    <br>
    <mx-button size="massive" icon="warning circle">warning circle</mx-button>
    <hr>
    <mx-button size="massive">嘿嘿嘿大按钮</mx-button>
    <br>
    <br>
    <mx-button disabled size="massive" icon="warnning circle">warning circle</mx-button>
    <br>
    <br>

    <br>
    <mx-button disabled size="massive" icon="wifi">信息好得很</mx-button>
    <br>
    <mx-button icon="history" loading>icon为history的loading按钮</mx-button>
    <br>
    <mx-button animated>
    <div slot="hidden">$10000</div>
    <div slot="visible"><i class="shop icon"></i>不要错过喽</div>
    </mx-button>
    <mx-button animated="fade">
      <div slot="hidden">$10000</div>
      <div slot="visible"><i class="shop icon"></i>不要错过喽</div>
    </mx-button>

MxSlider 轮播图组件

<mx-slider style="width:250px;height:350px;"
    :list="list"
    :auto="2000"
    :curIdx="curIdx"
    @sliderChange='hSlider'
    @click="hClick">
    </mx-slider>

MxDialog 弹框组件

<mx-dialog v-model="isShow" title="江湖排行榜">
      <div slot="body"><p>第一名：小李飞刀</p></div>
    </mx-dialog>