描述
1、涉及Blu组件：Collapse（折叠面板），progress-bar（进度条），steps（步骤器），b-aside（侧边模态框），tag（标签），tabs（标签页），timeline（时间线），alert (提示框)
2、补充下拉菜单的使用记录：Dropdown
问题记录
案例
<template>
<div>
<collapse accordion>
<collapse-item title="客户信息" :actived="collapseActived === '0'">
<customer></customer>
</collapse-item>
<collapse-item title="协议进度" :actived="collapseActived === '1'">
<agreement></agreement>
</collapse-item>
<collapse-item title="审批流程" :actived="collapseActived === '2'">
<timeline></timeline>
</collapse-item>
</collapse>
</div>
</template>
<script>
import customer from '../components/blu-user-info'
import agreement from '../components/blu-agreement'
import timeline from '../components/blu-timeline'
export default {
name: 'BluDetail',
data() {
return {
collapseActived: '2'
}
},
components: {
customer,
agreement,
timeline
},
created() {},
mounted() {},
computed: {},
watch: {},
methods:{}
}
</script>
customer.vue
内容为上一章中的Form表单元素列举项。
agreement.vue
<template>
<div>
<progress-bar :percent="barPercent" type="primary" :showinfo="true" :size="'large'" :format="percentFormat"></progress-bar>
<steps :current="stepCurrent" :type="stepsType" prev-text="上一步" next-text="下一步" show-footer
:on-prev="handlePrev" :on-next="handleNext">
<step title="协议前" description="静夜思">
<p>1.床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
<a class="button is-primary is-link" @click="handleMore">更多详情</a>
</step>
<step title="协议中" description="春晓">
<p>2.春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
<tooltip content="查看内容来源及其相关信息" :placement="tPlacement" :disabled="false" :always="false">
<button class="button" @click="handleDetail">查看来源</button>
</tooltip>
</step>
<step title="协议完成" description="春夜喜雨">
<p>3.好雨知时节，当春乃发生。随风潜入夜，润物细无声</p>
</step>
</steps>
<!-- 侧边模态框 -->
<b-aside :is-show="isShow"
:title="asideInfo.title"
:show-cancel="false"
:backdrop-closable="false"
:width="400"
:on-ok="handleOk"
:on-cancel="handleCancel"
show-header
show-footer
cancel-text="取消"
ok-text="确定"
show-ok
@close="isShow=false">
<tag type="warning" size="large">{{ asideInfo.author }}</tag>
<tag type="success" rounded>{{ asideInfo.dynasty }}</tag>
<p v-for="(item, index) in asideInfo.poetry" :key="index" class="row-p">
{{ item }}
</p>
</b-aside>
</div>
</template>
<script>
export default {
name: 'BluAgreement',
data() {
return {
stepCurrent: 1,
barPercent: 30,
isShow: false,
asideInfo: {
title: '静夜思',
author: '李白',
dynasty: '唐',
poetry: ['床前明月光，','疑是地上霜。','举头望明月，','低头思故乡。']
},
stepsType: 'pills', // line
tTrigger: 'hover', // click focus
tPlacement: 'right', //top left right bottom topLeft topRight leftTop leftBottom bottomLeft rightTop rightBottom
ratePercent: {
0: 33,
1: 68,
2: 100
}
}
},
components: {
},
created() {
this.barPercent = this.ratePercent[this.stepCurrent];
},
mounted() {},
computed: {},
watch: {},
methods:{
handlePrev(val) {
console.log('上一步==', val);
this.barPercent = this.ratePercent[val];
},
handleNext(val) {
console.log('下一步==', val);
this.barPercent = this.ratePercent[val];
},
handleMore() {
this.isShow = true
},
handleOk() {
console.log('侧边模态框确定==');
},
handleCancel() {
console.log('侧边模态框取消==');
},
handleDetail() {
this.$notify.open({
content: '暂无来源信息',
icon: 'info-circle',
placement: 'top-center',
});
},
percentFormat(val) {
return `当前进度 ${val}%`;
},
}
}
</script>
<style lang="less" scoped>
.row-p{
width: 100%;
font-size: 20px;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
timeline.vue
<template>
<div>
<div class="column">
<tabs type="boxed">
<tab-item label="当前进度">
<div class="tabs-box-one">
<timeline>
<timeline-item date="2分钟前" icon="twitter" type="primary">
<p>审核人员：徐长卿 正在处理中…</p>
</timeline-item>
<timeline-item date="2022-03-04 11:25:15" type="primary">
<p>XXXX签报已通过初筛流程，进入初核阶段。</p>
</timeline-item>
<timeline-item date="2022-01-02 11:25:15" type="success">
<p>签报前期工作完成，发起审批流程，发起人：大熊，进入审批流程。</p>
</timeline-item>
</timeline>
</div>
</tab-item>
<tab-item label="待审核项">
<alert>
当前系统操作人员未达到应有的审核资格级别。
</alert>
<alert>
如有问题，请联系管理员
</alert>
</tab-item>
<tab-item label="已审核项">
<alert>
已审核数据准备中…
</alert>
</tab-item>
<tab-item label="审核异常项">
<alert>
异常项数据准备中…
</alert>
</tab-item>
</tabs>
</div>
</div>
</template>
<script>
export default {
name: 'BluTimeline',
data() {
return {
}
},
components: {
},
created() {},
mounted() {},
computed: {},
watch: {},
methods:{}
}
</script>
<style lang="less" scoped>
.tabs-box-one{
width: 100%;
padding: 10px;
box-sizing: border-box;
}
/deep/.tabs .tab-list{
margin: 0;
}
</style>
补充下拉菜单的使用记录
<template>
<div class="header-layout">
<dropdown trigger="hover">
<div class="dropdown-name">
<span>欢迎你，黑暗之神</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</div>
<div slot="content">
<menus>
<menu-item icon="user">会员管理</menu-item>
<menu-item icon="ticket">工单管理</menu-item>
<menu-item icon="lock">修改密码</menu-item>
<div class="divider"></div>
<menu-item icon="">退出</menu-item>
</menus>
</div>
</dropdown>
</div>
</template>
<script>
export default {
name: 'BluHeader',
data() {
return {
}
},
components: {
},
created() {},
mounted() {},
computed: {},
watch: {},
methods:{}
}
</script>
<style scoped>
.header-layout{
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.dropdown-name{
display: flex;
justify-content: center;
align-items: center;
}
</style>
