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-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
tdesign-vue是TDesign 適配桌面端的組件庫，適合在 vue 2 技術(shù)棧項(xiàng)目中使用，這篇文章主要介紹了vue項(xiàng)目中使用TDesign?,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時(shí)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-12-12
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡(jiǎn)潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
使用vue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)，實(shí)現(xiàn)效果是input未輸入值時(shí)，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了Vue3如何配置多級(jí)代理問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對(duì)中文文件名的支持不完善,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue+Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03