标签：vue console val blu timeline components 组件 return

描述

1、涉及Blu组件：Collapse（折叠面板），progress-bar（进度条），steps（步骤器），b-aside（侧边模态框），tag（标签），tabs（标签页），timeline（时间线），alert (提示框)

问题记录

案例

<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>

标签：vue,console,val,blu,timeline,components,组件,return
来源： https://www.cnblogs.com/min77/p/16527268.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。