Vue实现可移动水平时间轴

本文实例为大家分享了Vue实现可移动水平时间轴的具体代码,供大家参考,具体内容如下

里程碑时间轴具体实现

效果图

编辑里程碑效果图

<template>
<div class="state_grade">
<!-- <mile-stone :projectId="projectData.proId" :projectName="projectData.proName" :proNum="projectData.proNum"></mile-stone>-->
 <div class="timeLine" style="overflow: hidden;">
 <div style="width: 10%; display: inline-block; margin-left: 5px;">
 <el-button @click="mileStoUpdateVisible = true" type="primary">编辑里程碑</el-button>
 </div>
 <div style="width: 70%;display: inline-block" align="center">
 <div style="width: 20%;display: inline-block; font-size: 14px;">里程碑状态:</div>
 <div style="width: 100px;display: inline-block; font-size: 14px; ">开始 <img class="node_picture" src="../../assets/images/timeLineA.png"></div>

 <div style="width: 100px;display: inline-block; font-size: 14px;">超期 <img class="node_picture" src="../../assets/images/timeLineB.png"> </div>

 <div style="width: 100px;display: inline-block; font-size: 14px;">关闭 <img class="node_picture" src="../../assets/images/timeLineC.png"> </div>

 </div>

 <div class="my_timeline_prev" @click="moveLeft">
 <img src="../../assets/arrow_left_blue.png" class="my_timeline_node"/>
 <!-- <div class="my_timeline_item_line" style="margin-top: -18px;"></div>-->
 <!-- <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">上</div>-->
 </div>
 <div v-if="destroyIncomeStatistics" class="ul_box">
 <ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
 <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">

 <el-tooltip placement="top" effect="light">
  <div slot="content" class="tooltip">
  <el-row>
  <el-col :span="24">{{'阶段名称:'+item.stageName}}</el-col>
  </el-row>
  <el-row>
  <el-col :span="24">{{'阶段目标:'+item.stageTarget}}</el-col>
  </el-row>
  <el-row>
  <el-col :span="24">{{'开始时间:'+item.startTime}}</el-col>
  </el-row>
  <el-row>
  <el-col :span="24">{{'结束时间:'+item.endTime}}</el-col>
  </el-row>
  <el-row>
  <el-col :span="24">{{'验收标准:'+item.acceptStar}}</el-col>
  </el-row>
  <el-row>
  <el-col :span="24">
  <span v-if="item.milepostState==='1'">里程碑状态:打开</span>
  <span v-if="item.milepostState==='2'">里程碑状态:超期</span>
  <span v-if="item.milepostState==='3'">里程碑状态:关闭</span>
  </el-col>
  </el-row>
  </div>
  <!--圈圈节点-->
  <!-- <div class="my_timeline_node" style="backgroundColor: #999; width: 28px;height: 28px;" @click="changeActive(index)" :class="{active: index == timeIndex}"></div>-->
  <div class="my_timeline_node">
  <div style="background-color: #FCFCFC">
  <img class="my_timeline_picture" v-if="item.milepostState==='1'"
  src="../../assets/images/timeLineA.png">
  <img class="my_timeline_picture" v-if="item.milepostState==='2'"
  src="../../assets/images/timeLineB.png">
  <img class="my_timeline_picture" v-if="item.milepostState==='3'"
  src="../../assets/images/timeLineC.png">
  </div>
  </div>
 </el-tooltip>
 <!--线-->
 <div
  :class="[timeLineList.length==index+1?my_timeline_item_line_last:my_timeline_item_line_not_last]"></div>
 <!--标注-->
 <div class="my_timeline_item_content">
  <div>{{item.endTime}}</div>
  <el-tooltip placement="top" effect="light">
  <div slot="content">{{item.endTime}}<br/>{{item.stageName}}</div>
  <div class="detail_info">{{item.stageName}}</div>
  </el-tooltip>
 </div>
 </li>
 </ul>
 </div>
 <div class="my_timeline_next" @click="moveRight">
 <img src="../../assets/arrow_right_blue.png" class="my_timeline_node"/>
 <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">下</div>
 </div>
 </div>
 <el-dialog :title="titleMessage" center :visible="mileStoUpdateVisible" width="50%"
  @open="onMileStoUpdateVisibleOpen()" @close="closeMileStone()">
 <stone-detail :projectId="this.projectId" :proNum="this.projectData.proNum" @closeMileStone="closeMileStone()" ref="stone-detail"
  @refreshMileStoneData="searchMileStone()"></stone-detail>
 </el-dialog>
 </div>
 </div>
</template>

<script>
 import API from '../../api/api_project';
 import StoneDetail from "../../components/project-info/stonedetail"
 import MemberDetail from "../../components/project-info/memberdetail.vue"
 export default {
 name: 'project-detail',
 components:{
 MemberDetail,
 StoneDetail,
 },
 data() {
 return {
 destroyIncomeStatistics:true,
 loading: false,
 titleMessage: '',
 mileStoUpdateVisible: false,
 my_timeline_item_line_last: "my_timeline_item_line_last",
 my_timeline_item_line_not_last: "my_timeline_item_line_not_last",

 menuTree:[],
 timeLineList: [],
 page:{
  total:0,
  pageNum: 0,
  pageSize: 10,
 },
 model: {
  select: "",
  searchConent: "",
  projectId: "",
  proName:"",
 },
 projectData:{
  proId: '',
  proNum: '',
  proName: '',
  hwDept: '',
  hwPo: '',
  busineMode: '1',
  buildProDate: '',
  startDate: '',
  expEndDate: '',
  hwPoDate: '',
  hwPoEndDate:'',
  realEndDate: '',
  proManageId:'',
  proQa:'',
  hwPm:'',
  proEstNum: '0',
  proState:'1'
 },
 proPeoId:'',
 projectId:'',
 proPeoUpdateVisible:false,
 projectMember: [],
 }
 },
 mounted(){
 this.projectId=this.$route.params.projectId

 this.searchMileStone()
 this.sortDataArray(this.timeLineList)
 //到数据库获取projectId对应的信息列表存入projectData
 API.getProjectInfo(this.projectId).then((data)=>{
 this.projectData=data.data;
 this.projectData.busineMode = this.projectData.busineMode.toString();
 this.projectData.proState = this.projectData.proState.toString();
 })
 this.search();
 },
 methods: {
 searchMileStone() {
 console.log('项目id:'+this.projectId)
 let params={
  proId:this.projectId,
 };
 API.getMileStoneList(params).then(data => {
  let result = data.data
  if (result && result.list) {
  if(this.timeLineList.length>0){
  this.timeLineList.splice(0,this.timeLineList.length);
  }
  for(var i=0;i<result.list.length;i++){
  this.timeLineList.splice(i, 1, result.list[i])
  }
  this.sortDataArray(this.timeLineList)
  }

 },({msg})=>{
  this.$message.error(msg);
 });
console.log('刷新里程碑列表')
console.log(this.timeLineList)
 },

 closeMileStone() {
 this.mileStoUpdateVisible = false;
 // this.projectId = '';
 },
 onMileStoUpdateVisibleOpen() {
 this.titleMessage = this.projectData.proNum + '项目里程碑';
 this.$nextTick(() => {
  let form = this.$refs["stone-detail"];
  form.initPage();
 });
 },
 changeActive(index) {
 this.timeIndex = index;
 },
 moveLeft() {
 let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
 let listNum = 0;

 if (Math.abs(marginLeft) > 10) {
  this.$refs.mytimeline.style.marginLeft = marginLeft + 120 + 'px';
 }
 },
 moveRight() {
 let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
 if (marginLeft <= 10 && (marginLeft >= -(this.timeLineList.length * 120))) {
  this.$refs.mytimeline.style.marginLeft = marginLeft - 120 + 'px';
 }
 },
//对数组根据日期进行排序
 sortDataArray(dataArray) {
 return dataArray.sort(function (a, b) {
  return Date.parse(a.endTime.replace(/-/g, "/")) - Date.parse(b.endTime.replace(/-/g, "/"));
 })
 },

 sortByKey(array,key){
 return array.sort(function(a,b){
  var y = a[key];
  var x = b[key];
  return((x<y)?-1:((x>y)?1:0));
 })

 },
 handleCurrentChange(val) {
 this.page.pageNum = val ;
 this.search();
 },
 handleSizeChange(val) {
 this.page.pageSize = val;
 this.search();
 },
 handleSearch(){
 this.page.pageNum= 0;
 this.search();
 },
 }
</script>

 .content {
 height: 100px;
 }

 .my_timeline_next {
 float: left;
 display: inline-block;
 background-color: #FCFCFC;
 cursor: pointer;
 }

 .my_timeline_prev {
 width: 50px;
 float: left;
 margin-top: 110px;
 }

 .my_timeline_next {
 width: 34px;
 margin-top: 80px;
 }

 .el-col-24 {
 margin-left: 10px;
 padding-bottom: 5px;
 }

 .el-col-12 {
 margin-left: 10px;
 }

 .tooltip {

 }

 .ul_box {
 width: 80%;
 height: 120px;
 display: inline-block;
 float: left;
 margin-top: 50px;
 overflow: hidden;
 }

 .my_timeline_item {
 display: inline-block;
 width: 150px;
 }

 .my_timeline_node {
 background-color: #FCFCFC;
 box-sizing: border-box;
 border-radius: 50%;
 cursor: pointer;
 width: 40px;
 height: 40px;
 }

 .node_picture {
 //margin-top: 20px;
 height: 25px;
 width: 25px;
 margin-left: 5px;
 margin-bottom: -7px;
 }

 .my_timeline_picture {
 margin-top: 13px;
 height: 25px;
 width: 25px;
 }

 .my_timeline_node.active {
 background-color: #fff !important;
 border: 6px solid #f68720;
 }

 .my_timeline_item_line_last {
 width: 100%;
 height: 10px;
 margin: -14px 0 0 28px;
 border-left: none;
 }

 .my_timeline_item_line_not_last {
 width: 100%;
 height: 10px;
 margin: -14px 0 0 25px;
 border-top: 2px solid #E4E7ED;
 border-left: none;
 }

 .my_timeline_item_content {
 margin: 10px 0 0 -10px;
 width: 90%; /*根据自己项目进行定义宽度*/
 font-size: 14px;
 }

 .detail_info {
 width: 80%;
 height: 250px;
 padding-bottom: 50px;
 overflow: hidden; /*设置超出的部分进行影藏*/
 text-overflow: ellipsis; /*设置超出部分使用省略号*/
 white-space: nowrap; /*设置为单行*/
 font-size: 14px;
 }
 .state_grade.process_wrap{
 border-color: #e4ebf0;
 margin-top: 150px;
 border-radius: 2px;
 padding-bottom: 10px;
 }

 .fall-back {
 float:right;
 margin-right: 20px;
 margin-bottom:50px;
 }
 .state_grade{
 border: 1px solid #e6e6e6;
 background: #FCFCFC;
 padding: 10px;
 //position: relative;
 /*height: 90px;*/
 height: 250px;
 margin-bottom: 15px;
 /*margin-top: 15px;*/
 }
 .title_top{
 height: 33px;
 }
 .obj_tit_wrap{
 border-bottom: 1px solid #e6e6e6;
 padding-bottom: 3px;
 font-size: 14px;
 }

 .obj_tit_mile{
 width: 150px;
 height: 35px;
 }

 .tit_deco{
 color: #9a9a9a;
 font-size: 14px;
 }
 .add_contain{
 display:inline-block;
 padding-bottom: 10px;
 padding-top: 20px;
 }
 .project_content_warp{
 background: #fdfdfd;
 margin-bottom: 15px;
 }
 .project_job_add{
 padding-left: 30px;
 background: #FCFCFC;
 border-bottom: 1px solid #E5E5E5;
 line-height: 10px;
 margin-bottom: 15px;
 font-size: 14px;
 }
 .project_info_span{
 display:inline-block;
 padding-left: 10px;
 }

 .el-col-8{
 height: 50px;
 }
</style>

编辑里程碑

stonedetail.vue

<template>

 <div>
 <el-row>
 <el-col :span="23">
 <div style="margin-top: 10px">
 <el-tag effect="dark" style="font-size: 16px;width: 110px;text-align: center">里程碑</el-tag>
 </div>
 </el-col>
 <el-col :span="1">
 <img src="../../assets/images/add.png" style="width: 30px;height: 30px;margin-top: 10px" @click="addItems()"/>
 </el-col>
 </el-row>
 <hr/>

 <el-row style="text-align: center">
 <el-col :span="3">
 <el-tag style="width: 100%;font-size: 14px">序 号</el-tag>
 </el-col>
 <el-col :span="8">
 <el-tag style="width: 100%;font-size: 14px">阶段名称</el-tag>
 </el-col>
 <el-col :span="7">
 <el-tag style="width: 100%;font-size: 14px">起始时间</el-tag>
 </el-col>
 <el-col :span="5">
 <el-tag style="width: 100%;font-size: 14px">结束时间</el-tag>
 </el-col>
 </el-row>

 <el-form label-width="100px" align="left" ref="form" style="text-align: left;" :model="model">
 <div v-for="(item, index) in model.timeLineList" :key="index">
 <el-row>
 <el-col :span="3">
 <input style="text-align: center" class="el-input__inner" type="text" v-model="index" disabled="true">
 </el-col>
 <el-col :span="8">
 <input placeholder="请输入阶段名称" style="text-align: center" class="el-input__inner" type="text"
  v-model="item.stageName">
 </el-col>
 <el-col :span="6">
 <el-date-picker
 style="width: 100%"
 type="date"
 :editable="false"
 v-model="item.startTime"
 placeholder="请选择起始时间"
 format="yyyy-MM-dd"
 value-format="yyyy-MM-dd"
 >
 </el-date-picker>

 </el-col>
 <el-col :span="6">
 <el-date-picker
 style="width: 100%"
 type="date"
 :editable="false"
 v-model="item.endTime"
 placeholder="请选择结束时间"
 format="yyyy-MM-dd"
 value-format="yyyy-MM-dd"
 >
 </el-date-picker>
 </el-col>
 </el-row>

 <el-row>
 <el-col :span="3">
 <input placeholder="阶段目标" style="text-align: center;" class="el-input__inner" type="text" disabled="true">
 </el-col>
 <el-col :span="20">
 <el-input v-model="item.stageTarget" placeholder="请输入阶段目标"></el-input>
 <!-- <textarea placeholder="请输入阶段目标" v-model="item.stageTarget" style="height: 30px;" class="el-input__inner" type="text"></textarea>-->
 </el-col>
 </el-row>

 <el-row>
 <el-col :span="3">
 <input placeholder="验收标准" style="text-align: center;" class="el-input__inner" type="text" disabled="true">
 </el-col>
 <el-col :span="20">
 <el-input v-model="item.acceptStar" placeholder="请输入验收标准"></el-input>
 </el-col>
 </el-row>

 <el-row>
 <el-col :span="3">
 <input placeholder="里程碑状态" style="text-align: center;" class="el-input__inner" type="text" disabled="true">
 </el-col>
 <el-col :span="20">
 <template>
 <el-select v-model="item.milepostState" placeholder="请选择">
 <el-option
  v-for="item in milepostStateList"
  :key="item.ref_id"
  :label="item.ref_value"
  :value="item.ref_id">
 </el-option>
 </el-select>
 </template>
 </el-col>

 <el-col :span="1">
 <img src="../../assets/images/delete.png" style="width: 30px;height: 30px" @click="deleteItems(index)"/>
 </el-col>
 </el-row>
 </div>
 </el-form>
 <div style="text-align: center;margin-top: 30px">
 <el-button type="primary" @click="submit()">确认修改</el-button>
 </div>
 </div>

</template>

<script>
 import API from '../../api/api_project';

 export default {
 name: "stoneDetail",
 props: ['projectId', 'proNum'],
 watch: {
 'proId': {
 // projectId,所以每次都能监听到变化
 immediate: true,
 handler: function (val) {
  if (!val) return;
  this.onProjectIdChange(val);
 }
 }
 },
 data() {
 return {
 proId:'',
 milepostStateList: [{
  ref_id: "1",
  ref_value: '打开',
  ref_key: '1'
 }, {
  ref_id: "2",
  ref_value: '超期',
  ref_key: '2'
 }, {
  ref_id: "3",
  ref_value: '关闭',
  ref_key: '3'
 }],
 deleteList: [],
 model: {
  timeLineList: [],
 },

 }
 },
 methods: {
 /**
 * 提交修改的信息
 */
 submit: function () {
 this.$refs.form.validate((valid) => {
  if (!valid) {
  this.$message.error('请填写正确信息');
  return;
  }

  console.log('编辑里程碑结果:')
  console.log(this.model.timeLineList)

  let proMileposts = this.model.timeLineList

  API.updatetMileStone(proMileposts).then(data => {
  if (data.code == 200) {
  this.$message.success("修改成功");
  this.refreshMileStoneData();
  this.close();
  } else {
  this.$message.error(data.msg);
  // this.close();
  }
  })

 });
 },
 close() {
 this.$emit("closeMileStone");
 this.proId=''
 this.model.timeLineList.splice(0,this.model.timeLineList.length)
 },
 refreshMileStoneData() {
 this.$emit("refreshMileStoneData");

 },
 addItems() {
 this.model.timeLineList.push({
  milepostId:'',
  proId: this.proId,
  stageName: '',
  startTime: this.addDate(),
  endTime: this.addDate(),
  stageTarget: '',
  acceptStar: '',
  deliverableName: '',
  milepostState: '1',
 });

 },
 addDate() {
 var date = new Date();
 var seperator1 = "-";
 var year = date.getFullYear();
 var month = date.getMonth() + 1;
 var strDate = date.getDate();
 if (month >= 1 && month <= 9) {
  month = "0" + month;
 }
 if (strDate >= 0 && strDate <= 9) {
  strDate = "0" + strDate;
 }
 var currentdate = year + seperator1 + month + seperator1 + strDate;
 return currentdate;
 },
 deleteItems(index) {
 this.$confirm('确认删除该记录吗?', '提示', {
  confirmButtonClass: 'el-button--warning'
 }).then(() => {
  if(this.model.timeLineList[index].milepostId)
  {
  API.deleteMileStone(this.model.timeLineList[index].milepostId).then(data=>{
  if(data.code===200)
  {
  this.$message.success("删除成功");
  this.model.timeLineList.splice(index, 1);
  this.refreshMileStoneData();
  }else {
  this.$message.error(data.msg);
  }
  })
  }
  else{
  this.model.timeLineList.splice(index, 1);
  }

 }).catch(() => {});

 },
 onProjectIdChange(id) {
 this.model.timeLineList.splice(0,this.model.timeLineList.length)
 // if (id) {
  let params={
  proId:id,
  };
  API.getMileStoneList(params).then(data => {
  let result = data.data
  if (result && result.list) {
  for(var i=0;i<result.list.length;i++){
  this.model.timeLineList.splice(i, 1, result.list[i])
  }
  }
  }, ({msg}) => {
  this.$message.error(msg);
  });
 // }
 console.log('dailog打开里程碑列表')
 console.log(this.model.timeLineList)
 },
 initPage() {
  this.proId=this.projectId;
 if (this.proId) {
  this.onProjectIdChange(this.proId);
 }

 }
 },
 }
</script>

<style scoped>

</style>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • angularjs实现时间轴效果的示例代码

    一 引入包 引入angular-timeline包. 下载地址:angular-timeline.zip 在index.html中引入 <link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/an

  • TimergliderJS 一个基于jQuery的时间轴插件

    Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

  • js实现时间轴自动排列效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>timeline</title> <script src="http://7xnlea.com2.z0.glb.qiniucdn.com/jquery.min.js"></script> &l

  • D3.js 实现带伸缩时间轴拓扑图的示例代码

    效果图: 基于d3-v5, 依赖dagre-d3, 直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi

  • Vue实现可移动水平时间轴

    本文实例为大家分享了Vue实现可移动水平时间轴的具体代码,供大家参考,具体内容如下 里程碑时间轴具体实现 效果图 编辑里程碑效果图 <template> <div class="state_grade"> <!-- <mile-stone :projectId="projectData.proId" :projectName="projectData.proName" :proNum="project

  • vue实现两列水平时间轴的示例代码

    目录 一.实现组件timelineH.vue 二.调用组件 本文主要介绍了vue实现两列水平时间轴的示例代码,分享给大家,具体如下: 先上图,主要实现两列水平时间轴,查看了很多人实现的,水平只有一列,并且elementUI的时间轴只有竖着的,不支持横向,最后只能含泪自己实现了,没想到还可以,只是如果数据很多翻页还没实现,有实现过这种的掘友可以艾特我一下. 一.实现组件timelineH.vue timelineH.vue中的H代表横,起名字烦恼,哈哈. <template> <ul cl

  • jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

    jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件.jquery.timelinr可以制作水平和垂直时间轴效果,并且可以进行自动播放.你可以通过参数来控制每次时间轴切换的动画效果. 推荐阅读:之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ,它的界面展示效果很不错. 效果展示       源码下载 使用方法 使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件. <script src="js/jquery-1.x.

  • 基于jQuery和CSS3制作响应式水平时间轴附源码下载

    我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴. 效果展示     源码下载 HTML 我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日

  • 微信小程序实现水平时间轴

    本文实例为大家分享了微信小程序实现水平时间轴的具体代码,供大家参考,具体内容如下 1.wxml部分代码如下: <view class="wehx-line-box">     <view class="weui-flex__item wehx-line-item" wx:for="{{axis}}" wx:key="*this">         <view class='line-name'&g

  • Vue如何实现简单的时间轴与时间进度条

    目录 前言 1.封装时间尺度组件 2.在vue页面使用时间尺度 3.组件init方法内 通过起止时间算出中间的所有时间尺度 总结 前言 项目需要按天播放地图等值线图功能,所以需要一个时间进度条,网上找了一下发现没有自己需要的样子,于是只能简单的写一个. 1.封装时间尺度组件 <!-- 时间尺度 --> <template> <div class="time"> <div class="time_menu" v-show=&q

  • Vue时间轴 vue-light-timeline的用法说明

    轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); <template> <light-timeline :items='items'></light-timeline> </tem

  • Vue.js实现时间轴功能

    本文实例为大家分享了Vue.js实现时间轴功能的具体代码,供大家参考,具体内容如下 GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key

  • vue+swiper实现时间轴效果

    本文实例为大家分享了vue+swiper实现时间轴效果的具体代码,供大家参考,具体内容如下 效果: 首先引入,有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save <template> <div class="hello" style="height:100%;width:100%;position:relative;"> <div class="s

  • vue实现物流时间轴效果

    本文实例为大家分享了vue实现物流时间轴效果的具体代码,供大家参考,具体内容如下 son组件(物流时间轴组件) <template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</spa

随机推荐