1.0.1 • Published 12 months ago
nier-yorha-ui v1.0.1
尼尔机械纪元UI组件库
!!!注意:本组件库仅适用Vue3项目,并不适用Vue2!!!
项目演示地址http://114.116.47.23:3000/#/login
UserName:2B
Password:AllToBeNice
安装
请在终端中输入
npm i nier-yorha-ui
main.js
import YoRHa from 'nier-yorha-ui'
import 'nier-yorha-ui/style.css'
const app = createApp(App)
app.use(YoRHa)
使用
按钮
小按钮
<yorha-small-button @click="demo">Demo</yorha-small-button>
普通按钮
<yorha-button @click="demo">Demo</yorha-button>
按钮组
<yorha-button-group type="checkBox" :buttons="btns" @click="demo"></yorha-button-group>
参数
type:checkBox,radio;可以将按钮组设置为checkBox或者radio
buttons:传入的按钮列表对象,请使用以下格式
btns = {
'Type one': true, // 表示初始被选定
'Type two': false, // 表示初始不被选定
'Type three': false,
}
响应事件
v-on:click
若type设置为checkBox,对于函数的第一个参数为选定的数组。
若type设置为radio,对于函数的第一个参数为btns中对应的键值
顶栏按钮与按钮组
顶栏按钮
并不推荐单独使用
<yorha-tab-button :is-active="isActive" @click="demo">Demo</yorha-tab-button>
参数
is-active:表示按钮是否被选中 顶栏按钮组
推荐与路由结合使用实现切换效果
<yorha-tab>
<router-link v-for="(path, name) in tabs"
:to="path"
custom
v-slot="{isActive, navigate}">
<yorha-tab-button :is-active="isActive" @click="navigate">{{name}}</yorha-tab-button>
</router-link>
</yorha-tab>
分割栏
<yorha-hr></yorha-hr>
数据显示
树形控件
<yorha-tree :tree-data="treeData" :auto-read="true" @select="selectHandler"></yorha-tree>
let treeData = ref([
{
title: '完成项目需求分析',
id: '1',
tag: true,
children: [
{title: '调研需求', id: '11', tag: false},
{title: '编写文档', id: '12', tag: true},
]
},
{
title: '完成项目搭建',
id: '2',
tag: true,
children: [
{title: '前端搭建', id: '21', tag: true},
{
title: '后端搭建', id: '22', tag: true, children: [
{title: '项目测试', id: '221', tag: true}
]
},
]
},
{
title: '项目上线',
id: '3',
tag: true,
},
])
function selectHandler(id) {
console.log(treeData.value)
}
参数: treeData:用于显示的树形控件数据,请务必使用多维数组格式 :auto-read:为true时,当单击某个列表项,其tag属性将自动完成,此时请使用v-model:tree-data @select:单击某个列表项时刻的响应事件
容器盒子
注意:容器盒子都是块元素
图片盒子
<yorha-image-box width="100px" height="100px">
<img src="http://114.116.47.23:8848/6O.jpg" width="93" height="93">
</yorha-image-box>
参数
width与height为整个容器的尺寸,内部子元素的尺寸为width&height-3px
普通盒子
<yorha-normal-box width="550px" height="300px" :title="title">
<div>demo</div>
</yorha-normal-box>
参数
width与height为整个容器的尺寸
title:盒子容器的标题
列表盒子
<yorha-list-box></yorha-list-box>
其本质与普通盒子没有区别,知识较适合与树形列表一同配合使用
弹出层组件
小加载
import {YorhaSmallLoading} from "nier-yorha-ui"; // 引入
let loading = new YorhaSmallLoading('Please wait...') // 打开
loading.close() // 关闭
大加载
import {YorhaBigLoading} from "nier-yorha-ui";
let msg = [['demo', 'one'], ['demo2', 'two']]
let l = new YorhaBigLoading(msg, false)
参数
msg传入并显示的信息,要求格式为双层数组
false表示自动关闭取消,若为true,该组件将在信息显示完毕一秒后关闭
若为false则需要手动关闭
l.open() // 打开
setTimeout(() => {
l.close() // 关闭
}, 3000)
对话框
import {YorhaDialog} from "nier-yorha-ui";
// ask(对话框标题, 对话框内容)
YorhaDialog.ask('DANGER', question).then(() => {
console.log('confirm') // 点击确定的处理逻辑
}).catch(() => {
console.log('cancel') // 点击取消的处理逻辑
})
大对话框
import {YorhaDialog} from "nier-yorha-ui";
// 每一步显示的内容
let steps = [
'If you want to play this game',
'You need to select your gamer type first',
'Now select'
]
// 最终需要选择的按钮
let btns = {
'Type one': true,
'Type two': false,
'Type three': false,
}
// answer表示选择的按钮的值
YorhaBigDialog.ask('POD042', steps, true, btns).then(answer => {
console.log(answer) // 点击某个按钮之后的处理逻辑
})