TypechoJoeTheme

吾爱前端_www.wuaiweb.com

登录
用户名
密码
/
注册
用户名
邮箱

挨踢老王

🏃‍♂️人生之路,难免坎坷,但我执着
网站页面

vue流程图-纯css实现流程图-弹框里使用流程图

2022-01-17
/
0 评论
/
93 阅读
/
正在检测是否收录...
01/17

参考链接》 css+vue实现流程图
vue流程图-纯css实现流程图-弹框里使用流程图.png

1.组件里创建tree.vue
<template>
  <div :ref="treeRefName" :class="treeClassName">
    <div
      v-for="item in convertData"
      :key="item.uuid"
      :class="[
        isChild ? 'process-tree-childNodes-row' : 'process-tree-roots',
        isChild && item.isLong ? 'long-with-line' : '',
      ]"
      :style="isChild ? {} : rootStyle"
    >
      <div class="line" v-if="item.isLong"></div>

      <span class="process-tree-node" :class="isLeaftNode(item)">{{
        item.name
      }}</span>

      <div
        class="process-tree-childNodes"
        v-if="item.children"
        :class="item.children.length > 1 ? 'multiply-node' : 'single-node'"
      >
        <processTree :data="item.children || []" :isChild="true" />
      </div>
    </div>
  </div>
</template>

<script>
import uuidv4 from "uuid";
export default {
  name: "processTree",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isChild: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      convertData: this.convert(this.data),
      rootStyle: {},
    };
  },
  watch: {
    data() {
      this.convertData = this.convert(this.data);
    },
  },
  computed: {
    treeRefName() {
      return this.isChild ? "childTree" : "baseTree";
    },
    treeClassName() {
      return this.isChild ? "" : "process-tree";
    },
  },
  methods: {
    initDomWidth() {
      let leafs = document.getElementsByClassName("leaf-node");
      leafs = Array.from(leafs);
      leafs = leafs.map((i) => {
        let total = this.getOffset(i, "offsetLeft");
        return total;
      });

      this.rootStyle = { width: Math.max(...leafs) * 1.5 + "px" };
    },
    getOffset(obj, offsetDir) {
      var realNum = obj[offsetDir];
      var positionParent = obj.offsetParent; //获取上一级定位元素对象

      while (positionParent != null) {
        realNum += positionParent[offsetDir];
        positionParent = positionParent.offsetParent;
      }
      return realNum;
    },
    convert(arr) {
      return arr.map((item) => {
        item.uuid = uuidv4();
        if (item.children && item.children.length > 0) {
          item.children = this.convert(item.children);
        }
        return item;
      });
    },
    isLeaftNode(data) {
      return data.children && data.children.length > 0 ? "" : "leaf-node";
    },
  },
};
</script>

<style scoped>
.process-tree {
  padding: 10px;
  /* overflow: scroll; */
  padding-bottom: 27px;
  width: 100%;
  padding-right: 0;
  font-size: 0;
  line-height: 0;
}
.process-tree-roots {
  width: 250%;
  margin-bottom: 20px;
}
.single-node::before {
  content: "";
  display: block;
  position: absolute;
  width: 23px;
  height: 3px;
  background: rgba(203, 221, 238, 1);
  left: -23px;
  top: 50%;
}
.multiply-node::before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 100%;
  background: rgba(203, 221, 238, 1);
  left: -23px;
  top: 0;
}

.process-tree-node {
  position: relative;
  padding: 6px 10px;
  background: rgba(203, 221, 238, 1);
  border-radius: 2px;
  color: #333;
  display: inline-block;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8em;
  vertical-align: middle;
  min-height: 20px;
}
.process-tree-node::after {
  content: "13";
  display: block;
  width: 20px;
  height: 3px;
  background: rgba(203, 221, 238, 1);
  position: absolute;
  left: 100%;
  top: 50%;
}
.leaf-node::after {
  display: none;
}

.process-tree-childNodes {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 43px;
  top: -0.5px;
}
.process-tree-childNodes > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.multiply-node .process-tree-childNodes-row::before {
  content: "12";
  display: block;
  position: absolute;
  width: 20px;
  height: 3px;
  background: rgba(203, 221, 238, 1);
  left: -20px;
  top: 50%;
  font-size: 14px;
}
.multiply-node .process-tree-childNodes-row:first-child::after,
.multiply-node .process-tree-childNodes-row:last-child::after {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 50%;
  background: #fff;
  left: -23px;
}
.multiply-node .long-with-line:first-child::after,
.multiply-node .long-with-line:last-child::after {
  left: -166px;
}
.multiply-node .process-tree-childNodes-row:first-child::after {
  top: 0px;
}
.multiply-node .process-tree-childNodes-row:last-child::after {
  bottom: -4px;
}

.process-tree-childNodes-row {
  position: relative;
  margin-bottom: 10px;
}
.process-tree-childNodes-row:last-child {
  margin-bottom: 0;
}

.long-with-line {
  margin-left: 142px;
}
.line {
  position: absolute;
  width: 142px;
  height: 3px;
  background-color: rgba(203, 221, 238, 1);
  top: 50%;
  left: -161px;
}
</style>
2.组件里创建treefa.vue
<template>
  <div class="tree-wrap">
    <ProcessTree ref="tree" :data="treeData" />
  </div>
</template>

<script>
import ProcessTree from "../components/tree.vue";
export default {
  props: {
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.$refs.tree.initDomWidth();
  },
  watch: {
    treeData() {
      this.$nextTick(this.$refs.tree.initDomWidth);
    },
  },
  directives: {
    dragabled: {
      bind(el, binding, vnode, oldVnode) {
        if (!binding) return;
        el.onmousedown = (e) => {
          // 鼠标按下,计算当前元素距离可视区的距离
          let disX = e.clientX;
          let disY = e.clientY;
          el.style.cursor = "move";

          document.onmousemove = function (e) {
            e.preventDefault(); // 移动时禁用默认事件

            // 通过事件委托,计算移动的距离
            const left = e.clientX - disX;
            disX = e.clientX;
            el.scrollLeft += -left;

            const top = e.clientY - disY;
            disY = e.clientY;
            el.scrollTop += -top;
          };

          document.onmouseup = function (e) {
            el.style.cursor = "auto";
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  components: {
    ProcessTree,
  },
};
</script>

<style scoped>
.tree-wrap {
  /* position: absolute;
  overflow: hidden; */
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0; */
}
.tree-wrap > div {
  width: calc(100% + 17px);
  height: calc(100% + 17px);
}
</style>
3.页面弹框使用案例
<template>
  <div class="tree-wrap">
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <Treefa ref="tree" :treeData="treeData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treefa from "../components/treefa.vue";
export default {
  components: {
    Treefa,
  },

  data() {
    return {
      dialogVisible: false,
      treeData: [
        {
          name: "节点1",
          children: [
            {
              name: "节点2",
              children: [{ name: "节点3", children: [{ name: "节点3" },{ name: "节点3" }] }],
            },
          ],
        },
        {
          name: "节点1",
          children: [
            { name: "节点5" },
            { name: "节点5", isLong: true },
            {
              name: "节点26",
              children: [
                { name: "节点3" },
                { name: "节点3" },
                {
                  name: "节点33",
                  children: [
                    { name: "节点3" },
                    { name: "节点3" },
                    { name: "节点3" },
                  ],
                },
              ],
            },
            { name: "节点3", children: [{ name: "节点3" }, { name: "节点3" }] },
            { name: "节点4", children: [{ name: "节点3" }] },
            { name: "节点5", isLong: true },
          ],
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  watch: {},
};
</script>

<style scoped>
</style>
朗读
赞(1)
版权属于:

吾爱前端_www.wuaiweb.com

本文链接:

https://www.wuaiweb.com/archives/215.html(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. Shaco
    2021-10-11

    {!{data:image/webp;base64,UklGRnATAABXRUJQVlA4WAoAAAAwAAAAAQMAKwEASUNDUBgCAAAAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEhXDwAAAfCAbZsat/n/bclQDjMz9H1fh8vsYqjcMFMpzEeyoWLAr/uGyoxhdOi145Bpw8zMzOTqWM/9zEozI+1ILygiIMq2VbXZwNQmVi8vhXtPfyDg+598//H9x/cf3398//H9x/cf3398//H9x/cf33/+SxXffxqkNfD6STEMI93bp5PBUnZ+L58cA1JuXw+fWQZJc+M9e9qcoTnLu79Z9WDXm+SsYR7+WXfPIx8u9vIvPyQX84IKHn6usxzz3uc9/Bw3l5w1yss/66P/BFzi6V3/AbhE2Tne+yVKBMuajkwP8soJGsah7qYvMd0bZzSbYWvMX+INL5zZMMFSzV/ifC3vmzfwFdPKlEkZYFHGfV43tc4DQZNGzQebpnjc3IfvlzSzVt2fg1Z520yBqTXTvFl1L+CbycsmDSZWzv0WDGtmYPawAxAwrS7UtWTadMxDPeuCs6qZReOSyKFHXUi0WZR5471oJuKMShI3Q2d5z2STVZXIl5QXq9EWtK0Quk476THTX/S+OhWs/NRTpi2WlQINXQF2NvWQeQnLirsEUv8644p3fE6948DG8kJtHQCmZnu0mPmHg/Uwi040EGztPDB2sTZ1bbCEq+GulfhZI+H2ojjvCT2i+yHD2PRdMPhrSo/yOo3IzTSWjsRekeegfFWPWGPw0o7QjIyMR9wFHXFADJJhcRYY3EKD+Ns/bxgRU+50N0ETHArJUkyucIoRitUdhocMU+myi+BR3EWskhq+6683vLrZMJvcA9V3wzD4TZbVsfBYPVNBZ55rUyLOt3N5/Yweb9dAkUwYBj/Ks7sFmJ2iLVSZwJlxx4d8T+QulQbNXXvDONfGLXD7HBgN82+XaPlMxo379IR8wdP0aF+LWzlC3jHsjR+s7hp+fo/x5KIyLX8CLH9fSxh1jB7tH4eWTEczZruKG06GkbCnhknbxYlTo68mQ5xolx6dDuaLLHx3EcyAcXDxccnGlwDjG2oH5efSMqEKxxzOl0Pdhg71Venm/8iYoxskbidHUx6lBkX4crQ+IvulcQDojPbL/7qcIqq1stGCruRoG++pFvHLWe6AaTAEliiz0k5XQrV20jjVPTowjv4VxygzX77hBhiIRYkadFBGmnrIMIzd0YDS84nnKTFsl5V8vpb+0xCvrkYU+Z5rqkhToSWiQETj6T1YFltYSaaBXRn3aR1qLPV3Aq8pUokUlKYqwkuOzxBy2kRr0UvcnOs+GIMeZaoScqSpZxSRpm5ifOTwxP9OSg9r1t2fA7al6T2/QNfPNVUNW0tTBzC2ODuNs/Bol+U3aN0L+h+RK3qFcaiUGeRKU89WkL5yh+EY7+AUHx/+FAWKlayb2MzQ/pwM/d7ITEVkS1NTpe/kr0BcxLlpu5OUqSaNjBiR0/38AvT6DAlVsbapVCMcNxumr1NT81dytLmVRTvdgjQp3cxJqgSk28umMhj/N2em5ymcSad6mrPUZERO77IaO90LCapVZi/jZ+nGz3JsaVO7reTTX2uGjRWex+s4CeAAGaBcbQYxDkvnbcaVGOeF/tXOtnnmCs26Jk1SRz6kXm3qwSh6TDZxcHJzBxZgk7dI8bDFcnIF7WYC9PYLCtYHFK4j1QgQTnNoAXZW4zybJeWTuk3MZUayihX6krFPvicHhmIphxVgkzVUvKR1ANj8qWbTnHX15aIq0pKRK9/6VYyBTizAHizN7hVgdVPN/m8EcPOI0+0FywqkDIwh+XRmrHViAbY8y+tfB6eDVp9TCkaKMF9h90PGoe4CJaWKUAysr+O8AmypLnGwPFunGchYJczINYZhrBGNAg3zA2OmQzKaCrAlWz8PJ69GsxYkP2Lnku14lXGtpHxKCFg3KvCWzKQCbOkVQH3qE9pMHejlYmIpbjfuuKyGN3eikbduVD2emR1ZgC3xHANetzqFCq/6H8RZeRJchIJRoWl+A1lPIemaW7ZuVJsXj1ABtgp1yIIatNDlIATEel8Vx1Twj9wlGBV+3GD2fyaXQjdA3Kq2AImclqlGJSqAmi8Uq9NBiDvEEX+R2blUFHcCSjROH8bFe6WyDJqglcoMIeVPVarRHyrRX5ODEMI1n32Fbldqq8Nd51gFPpHJt9ACi1Tuvj9JGaZMPWJDjHMVNDoIIXQZA6u11YJowTgYUOfHTYnK1I8NcGPlU5gFeUWgK09Yn4FzXJ+DEIKjAjAkuohhFOMXNch3lFVhiTwuWtL4KLJdwKOjDZWqy0y8gw4HIWQ8MdfDkEgQt10fpEj7DILKPipXHj5BRu+J9MzBhlmxePkTeAdtDkIIphGwTAj7Ga8rQhEQ6UyRRTq8uFTuvU+hJ7YVV602KzX5DjMgCCHc2EkwJDYKoCTY93dVWmi2Ad5iObyA9VeYpvhPCAou6c7p8R3OShrO+2CoJVnnQ8bVeFWoAuMwXY5KdC+4c1Q+CXwS1+tzK6Shd1B95/jXHeKpaogZE/lhWk9Tp42GQl27yntrfaMwC6FeA7gVUugOEIPX3DskMvZKWRpjbmtVnwk/wXOqyEW2MrZK8KSmQROtUD4CMY9bJeXuMFtv6cb4Q0pkjGRr0rO4a4yeKjVSV6jqUOG8AdYeKCcDYfF2kAte4FZKrTuAUEBvGSNP7Fl+I3C8nhWWMsNOmlVQSHUlna0imFrngSZyuk5ovJ17kop3qKC/f9lejsUNTsCgWG9B6h9UcVX+KlRlrljuywBb07DrFF4hHVO3VocZiVrLMcZT1GTh0QgMR9xlvsD3RRRrpimgqSgqdnMgOZwlMt6uLn8wumktuQxpS/OO4QxKDtNFTf3Do1CZZPFXyLlfHgLj7eoykjFGfykjTyCBsytoivEG6h8UfBRDdV4QeQXYHddVu+uOQrxdXdozZmgtsIl4TJ7Vyabz3UvJnFSxoTIgHCf6Cs0U7zrV49xPMQ5rLXMZLWXOA5Mz7KGVpCjZUAkXYF8v+gp2IF5dyjFytZZ/MQbLtPsrw0xsoItBiqItNQDWUwlimENEnbZA+WppLX0YX4oy3OxOm2TeaYtI+YnfVOoFI1LEvBjJFbwO3mQsCCiROT5JkrqLaSpZAlNBm9Kyc+gVnIBC3aq7CiJuFSBeHFAifwyxibwINSq284toK9n7/mJWeXqXQa5gEwT0zKR410IpHMXSMwkR1/qRfjpR7bYqeomxWoCDGP2XjkAqsyyrgVQ09/8ScBTLz2D9VTLcd0R84KsajOhiiV/CLUDUe3ZAxLMr/EIG7Xvk/y8Q5UfTAmwyiuVnklD/nF/9xloD9Uuw1g6gNn/eJoIWAc+ul+mLUM5uC9HbtB5HsWzj5/M4Ktr5KlUKtcQ8Q8MtAI4Fu0g5p4t4dnW4KdEvPYKxOapjn1G81DoWn61T4AjUch8VskdjTcIQm2mjsAkW2afn1ol4dtVZLm81uATVTlE82WkUr8kvL1g6aD33tIOP2qWx9qEuyeRYxRYYb6dnF2pzLdoWtxhbY6wZrNp7FeUy0TvZZhTL3DbXnLzyuhEhnW1sE6riBqO0qfADCYTb69mFjmdqnMU34ry7BZPIbL0SG82xyyiW5Tot0+7nw9zrXV97Gg1oI7WxxMutF5oJP5Biy2fXaFGeutcFf4P+bZY094ISwmcF3piwIcIrJ/ODEoHqWWjDMJs0Fi5nfo7ER9TbY7tnFwm/i/LUfVNRJHtRL6apKYKGjk6grxJuE0BM4oi0XN6SCwRNT4BFxVLICkMw8vY9B+CNV5zPLBp+sF/HERHuG1atm0ya5ch7PMRM1md1Fq6Mjk6im6s+b18vzhx3FKn2cMM2P+YtsiKlY+/no6bF/mKrtU8TqOKn/GvQ8IMN++2eTOCSZf/D6ztIX61tJqzAN/fmodMf4ggKZX8fpGl8+o+/LQrtOWeYS6eWjoxg/nhls0lnEwzLu3jXoOEHW3ZbFZxT2ypZtu+9IwZ5P5dkRdBybUKAm/RWmxdeQQhPuSmDn4yJbP5MO+X4ixBBiXiNxXbtticvQa2zrbuYKn5D2mdnC2HltwAkPT4rWyyhj1/OZ9L8T+20BegLNawA/vq5pD1G2bfbmmG9d+dtiCz/0WrSRF9YLtSbptWpReray2I48M3bJS2NGKWyZbn/FUY6xHrpNezca73JI6mOgEfcNNJ/Wx+0RJKeFHusaB5+7+vQTbOc2xNa9Nvc+R9XA9udIf9I7jA0l17D3n02lgiyGoKFFvVJtCs/szA759Gi6em2usGpn3NO+SplZJuGD1crcgfPblF5sh1aaDvInQ8Lu4YNpLKk/p0FWHj7AmLihhjTKzRa3EYSn9cVV5/6fIfAMAdo7xmGwFjkW7S5Pja5S+cUF5fpWlz9Ci7ikNXAEdp7CGmEPyObaGp6hfUkRJ6RaN5T+10g4OoyXYsrT76r1K8f7xDt3Y5qc7sWFGBj//BDg8hnuW1WPilP5oISybBwyeWlBXQtrnz9RueycT6riXO094tH6Hz649UYyzY+GyImHvqABDNGbzR4ig33l341iD5PfVFGSsozztLeCbxwzslky0qi/GnUxNQqhVt+fyhvM8VT7WlfcpS1+Jxo2t6oS1zF3AI01DB71GOFLRk5gGMhur45ym39Sw6zFt/1SPSNaC5GaRRnJbUoqfOTXH8cd7fxbFeuup3zIgpLOrQvOdBafPoz0bfJG397JvJ82rciMyxz5KXk5fNCZ03FOy9n6d81nWotntM5erY5R6HeLsWQkM6Pf61AINql6LsWz9MJ0UBx/ijc6kV7HRaYqeu1TcB9pj6b2aAC0UT689G42ZtPyzkggjPZmy5QG84OK+0+D15L5eglJkfphi+V2H1S2lGTXFj9+8h2T5YJBAIxQZ413z9BD1zkPbdST2OhaN74RZ4cEZY5ck+ZlNLv8RJ8wx4iKjxQmreNc38HkSU213FE7e+vN70zEg5IDw2v7tayBZ39v8mI2tNOc5x2o8NiDp7GcGIJl3nwdi65WZLmdM+dPcIiJe4HA//hKnPPv8iuU386qOEs/iZ92yfP3uoiL7Edx5IO9VClJOKUJdr2r5sVcY0HA88ZhpGhSV3U5UgEd+3VtV8l3OYOc5sLxnl9iraOWHmDBC2oD3vV5+3ruUDvbPWgVjkXi7f95WTk2N2lUDbo+sanJQXLBjzxdGvjyXssiDgOdQ945an+yHWm85qAh57KjEvbctkcHnuKf/i9r0M3I/7ixafb6gbDuj6P/RTf/+T7j+8/vv/4/uP7j+8/vv/4/uP7j+8/vv/4/uP7j+8//x8N338CAFZQOCDSAQAAUDUAnQEqAgMsAT9xuNlltK8rpyAIApAuCWlu4XdhG0AJ7APfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJwoAAP7/rR4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==}!}

  2. 被代码耽误的主播
    2020-12-13
  3. 121
    2020-11-19

    {!{data:image/webp;base64,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}!}

标签云