vue纯css实现动态鱼骨图组件，附图片示例

先看示例图片吧

可以指定鱼骨根数和鱼翅的数量，具体看代码就行，默认4根鱼骨5个鱼翅

<template><div class="fishbone"><div class="content"><el-row type="flex" class="top-bone"><div class="item-bone" v-for="(item, index) in arrList" :key="index"><ul class="item-bone-children" v-if="index % 2 == 0"><div v-if="index % 2 == 0" class="textTop">{{ text }}</div><li v-for="(ele, i) in item.left" class="children-item" :key="i"><div v-if="ele.title" class="title"> {{ ele.title }}</div><div class="text" v-else>{{ ele.label }}</div></li></ul><ul class="item-bone-children item-bone-children-right" v-if="index % 2 == 0"><li v-for="(ele, i) in item.right" class="children-item-right" :key="i"><div v-if="ele.title" class="title"> {{ ele.title }}</div><div class="text" v-else>{{ ele.label }}</div></li></ul></div></el-row><div class="center-line"><div class="textCenter">{{ text }}</div></div><el-row type="flex" class="bottom-bone"><div class="item-bone" v-for="(item, index) in arrList" :key="index"><ul class="item-bone-children" v-if="index % 2 != 0"><div v-if="index % 2 != 0" class="textBottom">{{ text }}</div><li v-for="(ele, i) in item.left" :key="i" class="children-item1"><div v-if="ele.title" class="title">{{ ele.title }}</div><div class="text" v-else>{{ ele.label }}</div></li></ul><ul class="item-bone-children item-bone-children-right" v-if="index % 2 != 0"><li v-for="(ele, i) in item.right" :key="i" class="children-item2"><div v-if="ele.title" class="title">{{ ele.title }}</div><div class="text" v-else>{{ ele.label }}</div></li></ul></div></el-row></div></div>
</template>
<script>export default {data() {return {text: '字',strip_num: 4, //根数wing_num: 5, //翅数arrList: [],};},mounted() {let arr = [];let gObj = {label: '',left: [],right: [],};let cObj = {label: '请输入文字',};let wing_num = parseInt(this.wing_num) ?? 2;let strip_num = parseInt(this.strip_num) ?? 5;for (let index = 0; index < wing_num; index++) {gObj.left.push(cObj);gObj.right.push(cObj);}for (let index = 0; index < strip_num; index++) {arr.push(gObj);}this.arrList = arr;},methods: {},};
</script>
<style lang="scss" scoped>.fishbone {min-height: 300px;height: 100%;position: relative;$bnoe-color: #002766;max-width: 650px;.textCenter {position: absolute;top: -12px;width: 25px;height: 25px;line-height: 25px;text-align: center;background: green;font-weight: bold;right: -29px;}.textBottom {position: absolute;bottom: -28px;width: 25px;height: 25px;line-height: 25px;text-align: center;background: green;font-weight: bold;right: -25px;transform: skewx(45deg);}.textTop {position: absolute;top: -28px;width: 25px;height: 25px;line-height: 25px;text-align: center;background: green;font-weight: bold;right: -25px;transform: skewx(-45deg);}.leftIcon {border: 6px solid transparent;border-right: 6px solid black;}.rightIcon {border: 6px solid transparent;border-left: 6px solid black;}.content {width: 100%;height: 100%;/* position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); */}.center-line {/* position: absolute;left: 0;top: 50%;transform: translateY(50%); */position: relative;width: 100%;height: 1px;background-color: $bnoe-color;&:after {position: absolute;right: -6px;bottom: -5px;content: ' ';border: 5px solid transparent;border-left: 5px solid black !important;}}.top-bone,.bottom-bone {/* position: absolute;height: 50%;width: 100%;padding-right: 100px;left: 0; */.item-bone {position: relative;display: flex;margin: 0 5px;//float: left;//min-width: 150px;// width: 150px;//margin: 0 10px;}.item-bone-children-right {border: none !important;margin: 0 !important;padding: 0;}.bottom-children-item-right {position: relative;&:not(:last-child) {border-bottom: 1px solid $bnoe-color;&:after {position: absolute;left: -5px;bottom: -5px;content: ' ';border: 5px solid transparent;border-right: 5px solid black !important;transform: skewx(-45deg);}}}.children-item-right {position: relative;&:not(:last-child) {border-bottom: 1px solid $bnoe-color;&:after {position: absolute;left: -5px;bottom: -5px;content: ' ';border: 5px solid transparent;border-right: 5px solid black !important;transform: skewx(-45deg);}}}.children-item {position: relative;&:not(:last-child) {border-bottom: 1px solid $bnoe-color;&:after {position: absolute;right: -5px;bottom: -5px;content: ' ';border: 5px solid transparent;border-left: 5px solid black;transform: skewx(-45deg);}}}.item-bone-children {position: relative;height: 100%;border-right: 2px solid $bnoe-color;transform: skewX(45deg);margin: 0 10px;list-style-type: none;padding: 0;padding-right: 5px;.text {text-align: right;padding-right: 20px;transform: skewx(-45deg);font-size: 13px;width: 100%;line-height: 30px;white-space: nowrap;color: #434343;}.title {text-align: center;transform: skewX(-45deg);font-size: 16px;font-weight: bolder;line-height: 35px;color: #002766;}}}.bottom-bone {bottom: 0;.item-bone-children {position: relative;transform: skewX(-45deg);.text {transform: skewX(45deg);}.title {transform: skewX(45deg);}.children-item1 {position: relative;&:not(:last-child) {border-bottom: 1px solid $bnoe-color;&:after {position: absolute;right: -5px;bottom: -5px;content: ' ';border: 5px solid transparent;border-left: 5px solid black !important;transform: skewx(45deg);}}}.children-item2 {position: relative;&:not(:last-child) {border-bottom: 1px solid $bnoe-color;&:after {position: absolute;left: -7px;bottom: -5px;content: ' ';border: 5px solid transparent;border-right: 5px solid black !important;transform: skewx(45deg);}}}}}}
</style>

vue纯css实现动态鱼骨图组件，附图片示例相关推荐

before css 旋转_单标签！纯CSS实现动态晴阴雨雪
引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <div c ...
vue纯手写思维导图，拒绝插件(cv即用)
vue纯手写思维导图,拒绝插件(cv即用) 已完成功能点:折叠.放大.缩小.移动后续增加功能点:添加.删除先看结果: 有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找 ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
纯CSS实现动态晴阴雨雪
1 引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <!-- ...
单标签实现纯CSS实现动态晴阴雨雪
1 引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <!-- ...
css单标签,单标签！纯CSS实现动态晴阴雨雪
封面.jpg 1 引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 效果预览.gif 再看 ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...
html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...

vue纯css实现动态鱼骨图组件，附图片示例

vue纯css实现动态鱼骨图组件，附图片示例相关推荐

最新文章

热门文章