light-ui-program v1.0.0

light-ui-program

下载

npm install light-ui-program

使用

import UI from 'light-ui-program'
import 'light-ui-program/lib/light-ui-program.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>
  <my-button animated="fade">
    <div slot="hidden">$10000</div>
    <div slot="visible">
      <i class="shop icon"></i>不要错过哈
    </div>
  </my-button>
  <my-button>点个赞再走！</my-button>
  
  <my-button disabled size="mini">小按钮</my-button>
  
  <my-button icon="user" size="mini">小按钮</my-button>
  
  <my-button icon="shop" size="mini">购物车</my-button>
  
  <my-button loading size="huge">大按钮</my-button>
  
  <my-button size="massive">大按钮</my-button>
  
  <my-button @click="btnClick"  icon="wifi" size="massive">我可以点击哦！</my-button>
    

介绍

属性                属性                    是否必填              属性值

定义内容:           slot                     false                
大小:               size                     false            
图标：              icon                     false
禁用状态:           disabled                 false
加载状态:           loading                  false
动画状态:           animated                 false
事件:               click                    false

MySlider 轮播图组件

<div>
  <my-slider style="width:250px;height:350px;"
  :auto="2000"
  :curIdx="curIdx"
  :list="list"
  @click="hClick"
  ></my-slider>
</div>

Myheadline 标题组件

<div>
    <h1>测试my-headline组件</h1>
    <my-headline :level="1" icon="user" size="Huge">
      主标题
      <div slot="sub">
        副标题
      </div>
    </my-headline>
    <br>
    <my-headline :level="2" icon="settings" size="small">
      <div slot="sub">
        默认内容
      </div>
    </my-headline>
    <br>
  </div>

MyDivider 分隔条组件

<div>
    
    <my-divider>默认内容</my-divider>
    
    <my-divider icon="user">用户</my-divider>
    
    <my-divider icon="setting">设置</my-divider>

  </div>

MyDialog 对话框组件

<div>
  <button type="primary" @click="isShow = !isShow">切换显示</button>
  <my-dialog v-model="isShow">
  </my-dialog>
</div>