lcy_button v0.0.3

01-pro

使用

 import UI from 'lcy_button'
 import 'lcy_button/lib/lcy_button.css'
 Vue.use(UI)

组件 MyButton 按钮

    <my-button animated="vertical">
      <div slot="hidden">$10000</div>
      <div slot="visible">
        <i class="shop icon"></i>不要错过哈
      </div>
    </my-button>

    <br />

    <my-button animated="fade">
      <div slot="hidden">$10000</div>
      <div slot="visible">
        <i class="shop icon"></i>不要错过哈
      </div>
    </my-button>

    <br />

    <!-- 使用组件 -->
    <my-button></my-button>
    <hr />
    <my-button size="mini" disabled>刮大风了！</my-button>
    <hr />
    <my-button size="big" icon="sign language">停电了！</my-button>
    <hr />
    <my-button size="large" icon="book" disabled loading>我服了！！</my-button>
    <hr />
    <my-button size="massive" icon="bug" disabled>又停电了！</my-button>
    <hr />
    <my-button size="large" icon="coffee">终于来电了！！</my-button>
    <hr />
    <my-button size="massive" icon="cloud" @click="hclick()">可不要再停了呀！</my-button>
    <hr />
    <my-button loading></my-button>

组件 MyDivider 分隔条

  <div>
    <h1>测试divider组件</h1>
    <my-divider icon="user">用户内容1</my-divider>
    <br />
    <br />
    <my-divider icon="setting">用户内容2</my-divider>
     <br />
    <br />
    <my-divider>用户内容3</my-divider>
  </div>

组件 MySlider 轮播图

  <my-slider
      @click="hClick"
      @slideChange="change"
      style="width:200px;height:300px"
      :auto="2000"
      :curIdx="curIdx"
      :list="list"
    >
  </my-slider>

组件 MyHeadline 标题

  <my-headline :level="3">level3</my-headline>

  <my-headline :level="1" icon="setting" size="huge">标题1--huge</my-headline>

  <my-headline :level="1" icon="user" size="tiny">标题1--tiny</my-headline>

  <my-headline :level="2" icon="coffee" size="huge">
    标题888888
    <div slot="sub">子标题666666</div>
  </my-headline>

组件 MyDialog 对话框

  <button @click="isShow=!isShow">切换显示和隐藏</button>
  <my-dialog v-model="isShow" title="初春小雨" content="我是内容" @no="hno" @yes="hyes">
    <div slot="body">
      <h4>唐：韩愈</h4>
      <p>天街小雨润如酥，</p>
      <p>草色遥看近却无。</p>
      <p>最是一年春好处，</p>
      <p>绝胜烟柳满皇都。</p>
    </div>
  </my-dialog>