本文编写于 716 天前,最后修改于 251 天前,其中某些信息可能已经过时。
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>
文档还没来得及写,后面慢慢写吧