<template>
|
<div>
|
<Card>
|
<Layout>
|
<Sider
|
hide-trigger
|
style="background: #fff; max-width: 220px; flex: 0 0 220px"
|
>
|
<div class="side-content" :style="{ maxHeight: maxHeight }">
|
<Menu
|
:active-name="currName"
|
theme="light"
|
width="auto"
|
:open-names="[]"
|
@on-select="currName = $event"
|
>
|
<MenuItem name="0"
|
><Icon type="md-ribbon" /><Badge dot :offset="[5, -3]"
|
>更新日志</Badge
|
></MenuItem
|
>
|
<Submenu name="1">
|
<template slot="title">
|
<Icon type="md-ionic" />XBoot通用组件
|
</template>
|
<MenuItem name="1-0">全局Loading加载动画</MenuItem>
|
<MenuItem name="1-1">倒计时按钮</MenuItem>
|
<MenuItem name="1-2">图标选择输入框</MenuItem>
|
<MenuItem name="1-14">扩展图标XIcon</MenuItem>
|
<MenuItem name="1-11">数据字典组件</MenuItem>
|
<MenuItem name="1-12"> 自定义列表选择 </MenuItem>
|
<MenuItem name="1-3">部门级联选择</MenuItem>
|
<MenuItem name="1-4">部门树选择</MenuItem>
|
<MenuItem name="1-5">用户抽屉选择</MenuItem>
|
<MenuItem name="1-13"> 用户搜索+抽屉选择 </MenuItem>
|
<MenuItem name="1-6">图片上传输入框</MenuItem>
|
<MenuItem name="1-7">
|
<Badge dot :offset="[5, -3]">图片上传缩略图</Badge>
|
</MenuItem>
|
<MenuItem name="1-10">
|
<Badge dot :offset="[5, -3]">文件上传/下载</Badge>
|
</MenuItem>
|
<MenuItem name="1-8">身份验证全屏弹框</MenuItem>
|
<MenuItem name="1-9">密码强度提示输入框</MenuItem>
|
</Submenu>
|
<Submenu name="3">
|
<template slot="title">
|
<Icon type="ios-create" />
|
<Badge dot :offset="[5, -3]">编辑器(付费)</Badge>
|
</template>
|
<MenuItem name="3-1">wangEditor 富文本</MenuItem>
|
<MenuItem name="3-3">Monaco 代码编辑器</MenuItem>
|
<MenuItem name="3-2"
|
><Badge :offset="[0, -15]" text="废弃" type="normal"
|
>Quill</Badge
|
></MenuItem
|
>
|
</Submenu>
|
<Submenu name="4">
|
<template slot="title">
|
<Icon type="md-globe" />
|
<Badge dot :offset="[5, -3]">地图组件</Badge>
|
</template>
|
<MenuItem name="4-1">地图选点</MenuItem>
|
</Submenu>
|
<Submenu name="2">
|
<template slot="title">
|
<Icon type="md-git-compare" />工作流组件(付费)
|
</template>
|
<MenuItem name="2-1">工作流程选择发起</MenuItem>
|
<MenuItem name="2-2">通过流程key直接发起</MenuItem>
|
<MenuItem name="2-3">取消撤回申请</MenuItem>
|
</Submenu>
|
<Submenu name="5">
|
<template slot="title">
|
<Icon type="md-albums" /><Badge dot :offset="[5, -3]"
|
>Widget组件</Badge
|
>
|
</template>
|
<MenuItem name="5-1">卡片1</MenuItem>
|
<MenuItem name="5-2">卡片2</MenuItem>
|
<MenuItem name="5-3">卡片3</MenuItem>
|
<MenuItem name="5-4">卡片4</MenuItem>
|
<MenuItem name="5-5">计数组件</MenuItem>
|
</Submenu>
|
</Menu>
|
</div>
|
</Sider>
|
<Content
|
:style="{
|
padding: '0 0 0 24px',
|
minHeight: '280px',
|
background: '#fff',
|
}"
|
>
|
<div class="component-content" :style="{ maxHeight: maxHeight }">
|
<div v-if="currName == '0'">
|
<update />
|
</div>
|
<div v-if="currName == '1-0'">
|
<loading />
|
</div>
|
<div v-if="currName == '1-1'">
|
<countDownButton />
|
</div>
|
<div v-if="currName == '1-2'">
|
<iconChoose />
|
</div>
|
<div v-if="currName == '1-14'">
|
<XIconComponent />
|
</div>
|
<div v-if="currName == '1-11'">
|
<dict />
|
</div>
|
<div v-if="currName == '1-12'">
|
<customList />
|
</div>
|
<div v-if="currName == '1-3'">
|
<departmentChoose />
|
</div>
|
<div v-if="currName == '1-4'">
|
<departmentTreeChoose />
|
</div>
|
<div v-if="currName == '1-5'">
|
<userChoose />
|
</div>
|
<div v-if="currName == '1-13'">
|
<userSelect />
|
</div>
|
<div v-if="currName == '1-6'">
|
<uploadPicInput />
|
</div>
|
<div v-if="currName == '1-7'">
|
<uploadPicThumb />
|
</div>
|
<div v-if="currName == '1-10'">
|
<fileUpload />
|
</div>
|
<div v-if="currName == '1-8'">
|
<checkPassword />
|
</div>
|
<div v-if="currName == '1-9'">
|
<setPassword />
|
</div>
|
|
<div v-if="currName == '3-1'">
|
<editor />
|
</div>
|
<div v-if="currName == '3-3'">
|
<monaco />
|
</div>
|
<div v-if="currName == '3-2'">
|
<quill />
|
</div>
|
|
<div v-if="currName == '4-1'">
|
<Map />
|
</div>
|
|
<div v-if="currName == '2-1'">
|
<processChoose />
|
</div>
|
<div v-if="currName == '2-2'">
|
<processStart />
|
</div>
|
<div v-if="currName == '2-3'">
|
<processCancel />
|
</div>
|
|
<div v-if="currName == '5-1'">
|
<card1 />
|
</div>
|
<div v-if="currName == '5-2'">
|
<card2 />
|
</div>
|
<div v-if="currName == '5-3'">
|
<card3 />
|
</div>
|
<div v-if="currName == '5-4'">
|
<card4 />
|
</div>
|
<div v-if="currName == '5-5'">
|
<countUp />
|
</div>
|
|
</div>
|
</Content>
|
</Layout>
|
</Card>
|
</div>
|
</template>
|
|
<script>
|
import update from "./update";
|
import loading from "./components/loading";
|
import countDownButton from "./components/countDownButton";
|
import iconChoose from "./components/iconChoose";
|
import XIconComponent from "./components/XIconComponent";
|
import dict from "./components/dict";
|
import customList from "./components/customList";
|
import departmentChoose from "./components/departmentChoose";
|
import departmentTreeChoose from "./components/departmentTreeChoose";
|
import userChoose from "./components/userChoose";
|
import userSelect from "./components/userSelect";
|
import uploadPicInput from "./components/uploadPicInput";
|
import uploadPicThumb from "./components/uploadPicThumb";
|
import fileUpload from "./components/fileUpload";
|
import checkPassword from "./components/checkPassword";
|
import setPassword from "./components/setPassword";
|
|
import editor from "./components/editor";
|
import monaco from "./components/monaco";
|
import quill from "./components/quill";
|
|
import Map from "./components/map";
|
|
import processChoose from "./components/processChoose";
|
import processStart from "./components/processStart";
|
import processCancel from "./components/processCancel";
|
|
import card1 from "./components/card1";
|
import card2 from "./components/card2";
|
import card3 from "./components/card3";
|
import card4 from "./components/card4";
|
import countUp from "./components/countUp";
|
|
export default {
|
name: "xboot-components",
|
components: {
|
update,
|
loading,
|
countDownButton,
|
iconChoose,
|
XIconComponent,
|
dict,
|
departmentChoose,
|
userChoose,
|
departmentTreeChoose,
|
uploadPicInput,
|
uploadPicThumb,
|
fileUpload,
|
checkPassword,
|
setPassword,
|
customList,
|
userSelect,
|
editor,
|
monaco,
|
quill,
|
Map,
|
processChoose,
|
processStart,
|
processCancel,
|
card1,
|
card2,
|
card3,
|
card4,
|
countUp
|
},
|
data() {
|
return {
|
maxHeight: 510,
|
currName: "0",
|
};
|
},
|
methods: {
|
init() {
|
let q = this.$route.query;
|
if (q.menu) {
|
this.currName = q.menu;
|
}
|
},
|
},
|
mounted() {
|
this.init();
|
this.maxHeight = Number(document.documentElement.clientHeight - 160) + "px";
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.side-content,
|
.component-content {
|
overflow: auto;
|
}
|
.side-content::-webkit-scrollbar {
|
display: none;
|
}
|
.component-article {
|
font-size: 16px;
|
font-weight: 400;
|
margin: 12px 0;
|
}
|
.component-blue {
|
color: #40a9ff !important;
|
}
|
code {
|
display: inline-block;
|
background: #f7f7f7;
|
margin: 0 3px;
|
padding: 1px 5px;
|
border-radius: 3px;
|
color: #666;
|
border: 1px solid #eee;
|
}
|
</style>
|
