vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖
更新時(shí)間：2023年10月24日 17:23:02 作者：修復(fù)BUG中
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
最終實(shí)現(xiàn)的效果
總體的思路
定義一個(gè)變量，通過循環(huán)該變量來渲染流程圖。然后將該流程圖文件封裝成一個(gè)組件，父組件只需要按照要求格式定義好變量結(jié)構(gòu)和值，然后傳值給子組件。
父組件傳值變量結(jié)構(gòu)
如下所示：
process: [
{
num: 1, // 區(qū)塊個(gè)數(shù)
list: [
{
class_name: 'blue', // 區(qū)塊背景及文字顏色
label: '應(yīng)用名稱', // 區(qū)塊名稱
width: '8%', // 區(qū)塊寬度
clear: 'before' // 是否清楚偽類 偽類類型：before/after
}
]
},
{
num: 1,
list: [
{
class_name: 'blue',
label: '1.服務(wù)器、域名',
width: '8%',
clear: 'before',
id: 'point-server',
}
]
}
]
如上process為要定義的變量，該變量為對(duì)象類型，每一個(gè)值為對(duì)應(yīng)圖1的一行，一行多個(gè)值的話，需要在list增加多個(gè)數(shù)據(jù)。
process變量結(jié)構(gòu)含義
process: [
{
num: // 代表當(dāng)前區(qū)塊數(shù)量，及一行要展示小方塊的數(shù)量
list: [
{ // 定義區(qū)塊內(nèi)容
class_name: // 代表區(qū)塊的樣式-可選，目前可選值：blue\grey，
label: //區(qū)塊名稱
width: // 區(qū)塊寬度-可選，
clear: // 是否清除當(dāng)前組件偽類，區(qū)塊上下線條為偽類實(shí)現(xiàn)，清除對(duì)應(yīng)偽類，該線條就不展示了-可選，目前可選值：before\after
id: // 點(diǎn)擊區(qū)塊跳轉(zhuǎn)到頁面相應(yīng)位置，id為該錨點(diǎn)的ID-可選
}
]
}
]
具體實(shí)現(xiàn)的代碼
如下所示：
<template>
<div class="process">
<div class="process_box">
<el-row
v-for="(row, index) in process"
:key="index" class="process_list"
:ref="(row.num != 1 ? 'ref_' + getRandom() : null)"
>
<div
v-if="(row.num != 1)"
:class="[(row.num != 1 ? 'row_line' : ''), row.unset_border]"
>
</div>
<div
v-for="(item, key) in row.list"
:key="key" :style="{width: item.width}"
:class="[
item.class_name,
'box_li',
(item.clear == 'before' ? 'clear_before' : (item.clear == 'after' ? 'clear_after' : ''))
]"
>
{{item.label}}
</div>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "Process",
data() {
return {
process: [
{
num: 1, // 區(qū)塊個(gè)數(shù)
list: [
{
class_name: 'blue', // 區(qū)塊背景及文字顏色
label: '應(yīng)用名稱', // 區(qū)塊名稱
width: '8%', // 區(qū)塊寬度
clear: 'before' // 是否清楚偽類 偽類類型：before/after
}
]
},
{
num: 1,
list: [
{
class_name: 'blue',
label: '1.服務(wù)器、域名',
width: '8%',
clear: 'before',
id: 'point-server',
}
]
},
{
num: 1,
list: [
{
class_name: 'blue',
label: '2.圖片存儲(chǔ)',
width: '8%',
clear: 'before',
id: 'point-file'
}
]
},
{
num: 2,
unset_border: 'unset_bottom',
list: [
{
class_name: 'blue',
label: '3.提供包名',
width: '8%',
id: 'point-package'
},
{
class_name: 'blue',
label: '4.制作Logo',
width: '8%',
id: 'point-logo'
}
]
},
{
num: 7,
list: [
{
class_name: 'blue',
label: '5.蘋果開發(fā)者賬號(hào)',
width: '8%',
id: 'point-ios'
},
{
class_name: 'blue',
label: '6.谷歌登錄、支付',
width: '8%',
id: 'point-google'
},
{
class_name: 'blue',
label: '7.Fb登錄、支付',
width: '8%',
id: 'point-facebook'
},
{
class_name: 'blue',
label: '8.騰訊企業(yè)郵箱',
width: '8%',
id: 'point-email'
},
{
class_name: 'blue',
label: '9.推送',
width: '8%',
id: 'point-push'
},
{
class_name: 'blue',
label: '10.啟動(dòng)圖',
width: '8%',
id: 'point-start-photo'
},
{
class_name: 'blue',
label: '11.蘋果稅務(wù)信息',
width: '8%',
id: 'point-tax'
},
]
},
{
num: 1,
list: [
{
class_name: 'blue',
label: 'APP資料已補(bǔ)齊',
width: '8%',
clear: 'after'
}
]
},
{
num: 1,
list: [
{
class_name: 'blue',
label: '測(cè)試',
width: '8%',
clear: 'after'
}
]
},
{
num: 1,
list: [
{
class_name: 'blue',
label: '上線',
width: '8%',
clear: 'after',
}
]
}
]
}
},
mounted() {
let _this = this;
this.$nextTick(() => {
for (let ref in _this.$refs) {
if (_this.$refs[ref][0].$el.children == undefined) {
continue;
}
let _children = _this.$refs[ref][0].$el.children;
let widthArr = [];
let leftArr = [];
let lineObj;
let width;
let left;
for (let child in _children) {
if (typeof _children[child] != 'object') {
continue;
}
if (_children[child].className.indexOf('row_line') != -1) {
lineObj = _children[child];
continue;
}
widthArr.push(_children[child].clientWidth);
leftArr.push(_children[child].offsetLeft);
}
let firstWidth = widthArr.shift();
let endWidth = widthArr.pop();
let firstLeft = leftArr.shift();
let endLeft = leftArr.pop();
width = (lineObj.clientWidth -((firstWidth + endWidth) / 2 + (lineObj.clientWidth - endLeft - endWidth) + firstLeft)) / lineObj.clientWidth;
left = (firstLeft + firstWidth / 2 + 1) / lineObj.clientWidth;
lineObj.style.width = width * 100 + '%';
lineObj.style.left = left * 100 + '%';
}
});
},
methods: {
getRandom() { // 隨機(jī)生成6位數(shù)，保持ref的唯一性
let number = parseInt(Math.random() * 1000000);
return number;
},
jumpId(id) {
this.$emit('jump', id)
}
}
}
</script>
<style scoped>
.process {
background-color: #ffffff;
box-shadow: 1px 1px 5px #F4F5F9;
padding: 30px;
margin: 30px;
}
.process_box {
width: 100%;
height: auto;
}
.process_list {
width: 100%;
display: flex;
justify-content: space-between;
}
.box_li {
height: 30px;
line-height: 30px;
font-size: 12px;
border-radius: 3px;
color: #999999;
border: 1px solid #999999;
cursor: pointer;
text-align: center;
text-decoration: none;
position: relative;
margin: 30px 0;
}
.row_line {
width: 100%;
height: 90px;
position: absolute;
border-top: 1px solid #b5b5b5;
border-bottom: 1px solid #b5b5b5;
}
.unset_bottom {
border-bottom: 0 !important;
}
.clear_before {
margin-top: 0 !important;
}
.clear_before:before {
content: '';
height: 0 !important;
background-color: unset !important;
}
.clear_after {
margin-bottom: 0 !important;
}
.clear_after:after {
content: '';
height: 0 !important;
background-color: unset !important;
}
.box_li:after {
content: '';
display: block;
height: 30px;
width: 0.1px;
position: absolute;
bottom: -31px;
background-color: #b5b5b5;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.box_li:before {
content: '';
display: block;
height: 30px;
width: 0.1px;
position: absolute;
top: -31px;
background-color: #b5b5b5;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.blue {
color: #fff!important;
background-color: #00a3ff !important;
border: 1px solid #00a3ff!important;
}
.grey {
background-color: #f2f2f2 !important;
border: 1px solid #f2f2f2 !important;
}
</style>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3發(fā)送post請(qǐng)求出現(xiàn)400?Bad?Request報(bào)錯(cuò)的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3發(fā)送post請(qǐng)求出現(xiàn)400?Bad?Request報(bào)錯(cuò)的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式
這篇文章主要介紹了vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue-cli@3.0 使用及配置說明,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue使用Less與Scss實(shí)現(xiàn)主題切換方法詳細(xì)講解
目前，在眾多的后臺(tái)管理系統(tǒng)中，換膚功能已是一個(gè)很常見的功能。用戶可以根據(jù)自己的喜好，設(shè)置頁面的主題，從而實(shí)現(xiàn)個(gè)性化定制。目前，我所了解到的換膚方式，也是我目前所掌握的兩種換膚方式，想同大家一起分享2023-02-02
今天小編就為大家分享一篇關(guān)于vue項(xiàng)目打包之后背景樣式丟失的解決方案，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue動(dòng)態(tài)添加表單的實(shí)現(xiàn)方法
在Vue.js應(yīng)用中,動(dòng)態(tài)表單是一個(gè)常見的需求,尤其是當(dāng)表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動(dòng)態(tài)變化時(shí),本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,并通過多個(gè)示例展示具體的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
本文介紹了使用vue-cli搭建的項(xiàng)目在開發(fā)時(shí)配置跨域，上線后不做任何任何修改，接口也可以訪問，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01