ui-200 v0.0.4

ui-200

下载

npm i ui-200

使用

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

组件

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

MyButton

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

    <my-button animated="fade" >
      <div slot="hidden">$10000</div>
      <div slot="visible">不要！！！！</div>
    </my-button>
    <br>
    <br>
    <my-button disabled>点赞再走吧!</my-button>
    <br>
    <br>
    <my-button icon="user">带图标的按钮</my-button>
    <br>
    <br>
    <my-button icon="bug">带图标的按钮</my-button>
    <br>
    <br>
    <MyButton icon="bug" size="mini">mini小按钮</MyButton>
    <br>
    <br>
    <my-button loading size="huge">loading大按钮</my-button>
    <br>
    <br>
    <my-button size="massive">哈哈哈大按钮</my-button>
    <br>
    <br>
    <my-button disabled size="massive" icon="warning circle">warning circle</my-button>
    <br>

divider

分隔条组件

<my-divider icon="user">hahha</my-divider>
      <br>
      <br>
      <br>
<my-divider icon="rss">杨老板</my-divider>

slider

轮播图组件

<template>
  <div class="slider">
    <!-- <img alt="Vue logo" src="../assets/Aatrox.png"> -->
    <my-slider style="width:400px;height:500px;"
    :list="list"   // 图片地址
    :auto="2000"   // 自动轮播时间间隔
    :curIdx="curIdx"// 图片的下标
    @click="hClick"> // 点击的是第几张图片
    </my-slider>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Slider',
  data () {
    return {
      curIdx: 0,
      list: [{ url: require('../assets/Aatrox.png'), alt: '1.肖申克的救赎' },
        { url: require('../assets/Alistar.png'), alt: '2.阿甘正传' },
        { url: require('../assets/Anivia.png'), alt: '3.幸福来敲门' },
        { url: require('../assets/Annie.png'), alt: '4.这个杀手不太冷' },
        { url: require('../assets/ari.png'), alt: '5.机器人总动员' },
        { url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584438531340&di=0c69fbc0d55171aa8a1d2d107c3f7c87&imgtype=0&src=http%3A%2F%2Fimg21.mtime.cn%2Fpi%2F2011%2F01%2F12%2F134106.88324738_1000X1000.jpg', alt: '5.机器人总动员' }]
    }
  },
  methods: {
    slider () {
      console.log('该变量')
    },
    hClick (idx) {
      console.log('点击了第' + idx)
    }
  }
}

headline

类似于h1、h2 、h3、 h4的标签组件

<my-headline :level="1" icon="user" size="mini">
      标题
      <div slot="sub">子标题</div>
</my-headline>

dialog

弹窗组件

<h1>测试my-dialog</h1>
    <button type="primary" @click="isShow = !isShow">切换显示</button>
    <my-dialog
    v-model="isShow"
    title="hehe" // 标题信息
    >
    <div slot="body">
      <p>这里我的是内容</p>

    </div>
    </my-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  data () {
    return {
      isShow: false // 弹出框是否显示
    }
  }
}
</script>