css+vue实现流程图

【css+vue实现流程图】的更多相关文章

主要用css+flex布局实现样式部分,vue实现组件逻辑.首先看下效果吧: 当空间不够时还可以使用拖拽功能接下来说明下实现思路 1.首先是实现单个节点样式,这个很简单不谈了,节点后都跟有一小段连接线,只有叶子节点没有连接线.使用伪元素after实现连接线,子节点添加额外样式来取消连接线. 2.然后是父子节点之间的连接线,因为有两种情况(a.只有一个子节点的:b.有多个子节点),所以要分情况实现 2.1子节点公共样式process-tree-childNodes设置为inline-block:…

记录近期面试题，面试总结 (从css - vue 全面面试题)

记录近期换工作时遇到的面试题和面试题答案 css 部分盒模型问题:说一下 css 的盒模型盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高怪异盒模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高问题:css 如何设置两种模型 /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; 问题:有没有遇到过边距重叠,…

css+vue实现添加购物车效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style>…

animate.css VUE 使用

1.安装 npm i animate.css --save 2.引用 main.jsimport 'animate.css' 3.使用 <img v-show="welcomeindex ==0" class="animate__animated animate__backInUp" :src="Main.imgserve+'/project/projectinfo01.png'" alt="">…

vue中使用animate.css动画库

1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use(animated) 3.在vue文件中使用: <div class="ty">  <div class="box anima…

Vue项目零碎知识（全局js,css配置，element-UI,bs使用， img动态配置，js数组）

全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/assets/css/global.css') //上面两种都可以实现全局样式的导入,但是第二种容错率较好,更健壮,比较常用,第一种对环境要求比较高全局js样式,也是首先要在静态assets文件中写好,然后再main.js中进行配置 // main.js //配置全局settings.js imp…

vue中使用transition和animate.css动画效果

一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'animate.css' Vue.use(animate); 3.使用动画 <div class="rotateIn" style="animation-duration:2s;animation-delay:1s;animation-iteration-count:1;an…

vue 项目如何使用animate.css

Animate.css是一款酷炫丰富的跨浏览器动画库,它在GitHub上的star数至今已有5.3万+. 在vue项目中我们可以借助于animate.css,用十分简单的代码来实现一个个炫酷的效果!(可以装B了) 一 .安装在命令行中执行: 使用npm或者cnpm安装 npm install animate.css --save 或 cnpm install animate.css --save 使用yarn安装 yarn add animate.css 二.引入在main.js全局引入 i…

day 87 Vue学习六之axios、vuex、脚手架中组件传值

本节目录一 axios的使用二 vuex的使用三组件传值四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,promise是es6里面的用法. axios能做的事情:官网地址从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JS…

day 84 Vue学习六之axios、vuex、脚手架中组件传值

Vue学习六之axios.vuex.脚手架中组件传值本节目录一 axios的使用二 vuex的使用三组件传值四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,promise是es6里面的用法. axios能做的事情:官网地址从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和…