本文编写于 831 天前,最后修改于 366 天前,其中某些信息可能已经过时。

npm地址:https://www.npmjs.com/package/moe-uit
目前只有差不多5个组件 < 按钮 , IP输入框, Mac地址输入框, Badge, card卡片>
目前IP输入框, Mac地址输入框还有bug,不支持复制和粘贴

效果

如何安装和使用

快速开始
npm install moe-uit
引入
import MoeUI from 'moe-uit'
Vue.use(MoeUI)

示例

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <div style="display:flex;align-items: end;justify-content: space-around;">
      <h2 style="color:#ffffff;">卡片效果</h2>
      <MoeCard title="Hello World" :width='200'>
      <template slot="summery">
        测试
      </template>
      <template slot="footer">
        <div style="display:flex;justify-content: space-around;">
          <div>点赞</div>
          <div>收藏</div>
        </div>
      </template>
    </MoeCard>
    <MoeCard
      title="Hello World"
      summery="卡片组件"
      imgSrc="https://www.luncode.com/usr/themes/Miracles/images/postbg/8.jpg"
    >
      <template slot="footer">
        <div style="display: flex; justify-content: space-around">
          <div>点赞</div>
          <div>收藏</div>
        </div>
      </template>
    </MoeCard>
    <div>
      <div>
      <h2 style="color:#ffffff;">默认效果</h2>
      <MoeButton @click="test" round>默认</MoeButton>
      <MoeButton @click="test" type="primary">Primary</MoeButton>
      <MoeButton @click="test" type="danger">Danger</MoeButton>
      <MoeButton @click="test" type="waring">Waring</MoeButton>
      <MoeButton @click="test" type="success">Success</MoeButton>
      <MoeButton @click="test" type="moe">MoeUI</MoeButton>
    </div>
    <div>
     <h2 style="color:#ffffff;">圆角效果</h2>
      <MoeButton @click="test" round>默认</MoeButton>
      <MoeButton @click="test" type="primary" round>Primary</MoeButton>
      <MoeButton @click="test" type="danger" round>Danger</MoeButton>
      <MoeButton @click="test" type="waring" round>Waring</MoeButton>
      <MoeButton @click="test" type="success" round>Success</MoeButton>
      <MoeButton @click="test" type="moe" round>MoeUI</MoeButton>
    </div>
     <div>
     <h2 style="color:#ffffff;">禁用效果</h2>
      <MoeButton @click="test" round Disabled>默认</MoeButton>
      <MoeButton @click="test" type="primary" round Disabled>Primary</MoeButton>
      <MoeButton @click="test" type="danger" round Disabled>Danger</MoeButton>
      <MoeButton @click="test" type="waring" round Disabled>Waring</MoeButton>
      <MoeButton @click="test" type="success" round Disabled>Success</MoeButton>
      <MoeButton @click="test" type="moe" round Disabled>MoeUI</MoeButton>
    </div>
    </div>
    </div>
    <div>
      <h1 style="color:#ffffff;">Badge效果</h1>
      <h2><MoeBadge>测试测试</MoeBadge></h2>
      <MoeButton @click="test" type="success" round>Success<MoeBadge>测试测试</MoeBadge></MoeButton>
      <MoeButton @click="test" type="moe" round>MoeUI<MoeBadge>测试测试</MoeBadge></MoeButton>
    </div>
    <div style="display:flex">
      <div>
         <h1 style="color:#ffffff;">IP输入框</h1>
          <MoeIpInput></MoeIpInput>
      </div>
      <div style="margin-left:20px">
        <h1 style="color:#ffffff;">Mac输入框</h1>
          <MoeMacInput></MoeMacInput>
      </div>
    </div>
  </div>
</template>

文档还没来得及写,后面慢慢写吧