DataV 自定义边框样式 轮播表hover效果 数字翻牌器

• 整体代码

<div>
    <dv-border-box-9 :color="['#1b3883', '#1b3882']">
        <div class="flexbox">
            <div>
                <el-progress type="circle" :percentage="45" :width="100" :stroke-width="15"
                    :color="colors"></el-progress>
            </div>
            <div class="m-t-20">
                <p class="t_center f-z-18 f-c-f">当月资产变动</p>
                <dv-digital-flop :config="assetChangeCount" style="width:200px;height:50px;" />
            </div>
        </div>
    </dv-border-box-9>
    
    <div class="m-t-10"></div> // 增加上边距
    
    <div @mousemove="move">
        <div class="table" @mouseleave="leave">
            <dv-scroll-board :config="currentChangeAssets" style="width:350px;height:170px"
                @click="goCompanyDetails" @mouseover="over" class="warningInfo" />
            <p v-if="showChangeHover" class="dv-text"
                :style="{ top: dvText.keyY, left: dvText.keyX }">
                {{ dvText.name }}
            </p>
        </div>
    </div>
</div>

• dv-border-box-9标签中：
• :color="['#1b3883', '#1b3882']" 自定义边框颜色，组件默认为渐变色（所以有两个）想要单色的话输入同一种颜色即可
• 
• el-progress使用ele进度条组件：
• type="circle" 定义圆形还是条形
• :percentage="45" 绑定进度条要显示的数值
• :width="100" 定义进度条的占位大小（即长和宽）
• :stroke-width="15" 定义进度条宽度
• :color="colors" 定义不同进度数值对应不同颜色显示

colors: [
    { color: '#AEBFDF', percentage: 20 },
    { color: '#95ABD4', percentage: 40 },
    { color: '#7C97C9', percentage: 60 },
    { color: '#6282BF', percentage: 80 },
    { color: '#496EB4', percentage: 100 }
],

• dv-digital-flop标签为数字翻牌器

 assetChangeCount: {
    number: [45564],
    content: '{nt}家',
    style: {
        fontSize: 30,
        fill: 'rgb(9, 71, 228)'
    }
},

• dv-scroll-board标签中：
• :config="currentChangeAssets" 用来绑定要展示的数据

currentChangeAssets: {
    header: ['公司名称', '变动金额', '到期日期'], // 表头信息
    data: [
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
        ['1公司', '***', '2023-12-31'],
    ],
    align: ['center'], // 对其方式
    // index: true, // 是否显示索引
    headerHeight: 30, // 设置表头高度
    headerBGC: 'rgb(27, 56, 131, 0.7)', // 表头背景颜色
    oddRowBGC: 'rgb(0, 0, 0, 0)', // 奇数颜色（透明）
    evenRowBGC: 'rgb(0, 0, 0, 0)' // 偶数颜色（透明）
},

• style="width:600px;height:320px" 定义轮播表的宽高

• data中定义

data () {
    return {
        dvText: {
                    name: '',
                    keyY: '',
                    keyX: '',
                },
        showChangeHover: false, // 定义预警信息hover是否显示
    }
}

• methods中定义
• @mousemove="move" 鼠标移入

move(e) {
    //将获取的值x轴、y轴的值给悬浮框 用来定位到单元格上.
    //-1200 -500凭自己感觉调 因为每个表格在页面的位置都不一样
    this.dvText.keyX = e.pageX - 680 + 'px' // e.pageX - 所选的数值跟页面的相对位置有关系 就是hover之后显示信息的位置
    this.dvText.keyY = e.pageY - 235 + 'px' // 
},

• @mouseleave="leave" 鼠标移出

leave() {
    //隐藏单元格
    this.showChangeHover = false
},

• @mouseover="over" 鼠标移入

over(v) {
    this.showChangeHover = true
    //v.ceil拿到单元格数据
    this.dvText.name = v.ceil
    //没有值则直接隐藏悬浮框 不然如果设置padding会有背景
    if (this.dvText.name === undefined) {
        this.showChangeHover = false
    }
},

• 定义鼠标移入手势

.warningInfo {
    cursor: pointer;
}