Vue可移动水平时间轴

最新推荐文章于 2024-06-12 11:02:18 发布
最新推荐文章于 2024-06-12 11:02:18 发布
阅读量5.3k 收藏 8
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frieryumao/article/details/102781516
版权

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">序&#12288;号</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>

/

frieryumao
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue实现可移动水平时间轴
01-19
本文实例为大家分享了Vue实现可移动水平时间轴的具体代码，供大家参考，具体内容如下 里程碑时间轴具体实现 效果图 编辑里程碑效果图 <!-- --> <div style=wi
css 时间轴样式
q1ngqingsky的博客
07-05 2488
51个纯html和css时间轴（包括横向时间轴和纵向时间轴），只有少部分时间轴有用到javascript。 示例和下载代码都在zip文件中。
vue实现横向时间轴，并实现右滑加载数据
weixin_46561899的博客
06-11 870
【代码】vue实现横向时间轴，并实现右滑加载数据。
vue实现横向时间轴
盛典
04-20 5979
最近项目需求一个横向的时间轴看了看elmentUi只有一个纵向的，干脆自己手撸一个 效果图如下： <div class="Timeline"> <h2>操作数据</h2> <div class="timeaxis"> <div v-for="(item,i) in list" :key="i"> <div class="timea
vue 横向 简单实用版本 时间轴------ Timeline
weixin_51794873的博客
04-09 4192
vue 横向 简单实用版本 时间轴------ Timeline 由于之前弄了一个带左右按钮时间轴，里面问题太多， 改版 <template> <div class="hello"> <ul :style="actived"> <!-- <ul :style="{ marginLeft: left + 'px', width: widthUl + 'px' }"> --> <li c..
vue图片时间轴滑动_Vue实现可移动水平时间轴
weixin_39880899的博客
12-22 1631
本文实例为大家分享了Vue实现可移动水平时间轴的具体代码，供大家参考，具体内容如下里程碑时间轴具体实现效果图编辑里程碑效果图编辑里程碑里程碑状态：开始 超期 关闭 {{'阶段名称：'+item.stageName}}{{'阶段目标：'+item.stageTarget}}{{'开始时间：'+item.startTime}}{{'结束时间：'+item.endTime}}{{'验收标准：'+i...
vue 点击滚动时间轴
weixin_44037153的博客
02-08 1028
vue 自定义时间轴，可进行点击，可进行翻滚
Vue2时间轴（横向）
热门推荐
Mr Dear的博客
04-08 1万+
支持初始选中年份和时间轴数据手动传入，自适应均匀排列，每个元素周围分配相同的空间
vue图片时间轴滑动_vue 写的时间区间拖动控件
weixin_42504327的博客
12-31 1384
耗时 *{{rangeTime}} 小时{{idx}}{{rangeMax}}export default {name: 'range',data() {return {rangeMax: 8,rangeMin: 0,rangeTime: 4,rangeSpeed: '50%',}},mounted() {this.changeSpeed();},methods: {changeSpeed: fu...
2套WEB时间轴
02-10
3. Vue.js/React/Angular：现代前端框架提供了组件化的开发模式，可以创建可复用的时间轴组件。 4. Timeline JS/Vis.js/Timeliner等库：这些专门用于创建时间轴的JavaScript库提供了丰富的预设样式和强大的功能，如...
很实用的水平样式时间轴js特效，可以作为公司发展史等，采用横向排版，带滚动条切换
04-17
本案例中的"水平样式时间轴js特效"是一个利用JavaScript实现的视觉元素，常用于展示公司发展历史、项目进度或其他序列事件。这种特效使得信息的呈现更加直观、吸引人，通过横向布局和滚动条切换，为用户提供了良好的...
nubePOS:移动 NubePOS 存储库
06-28
NubePOS的核心特点是其轻量级、可扩展性和易用性，使它成为小型至中型企业理想的POS系统选择。 在"nubePOS: 移动NubePOS存储库"中，我们主要关注的是该项目的源代码存储库。这个存储库是开发者进行协作和贡献代码的...
vue2/3 - 最新详细实现横向时间轴 “上下交错排列“ 展示效果，vue时间线组件，周围的卡片介绍文字，均匀分布交叉排列在时间轴上，vue实现横向时间轴并在周围上下位置放容器和文字（详细示例代码）
最新发布
高级前端工程师
06-12 3915
vue2，vue3，nuxt.js，vue时间轴，vue时间线，横向时间轴交叉显示，vue横向时间轴交错展示卡片信息，横向时间线组件，主轴交叉，纵向时间轴，时间线怎么交叉显示更多容器，上下排列的时间轴，如何实现上下均匀排列的时间线组件，在每个时间节点上放置更多描述信息，vue两列时间轴组件，隔行换边vue实现两列水平时间轴，vue时间线+任务信息显示，实现两列水平时间轴的示例代码，企业发展历程时间线，vue左右两侧时间轴，vue横向时间轴左右布局，vue双列时间轴，实现时间轴效果，时间线左右布局且居中，Vu
Vue学习总结-watch
frieryumao的博客
09-26 320
Vue学习总结-watch watch-监视文本框变化watch-监视路由地址的改变computed-计算属性的使用和3个特点 watch-监视文本框变化 <template> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-mod...
Vue学习总结——入门
frieryumao的博客
09-18 269
MVC:后端开发概念，模块视图 MVVM:前段视图层概念 vue代码和MVVM对应关系 v-cloak,v-text，v-html v-cloak:解决插值表达式闪烁问题，只会替换当前占位符，不会把整个元素内容清空 v-text:默认无闪烁问题；会覆盖元素中原本内容 v-html:以html格式解析数据输出，默认无闪烁问题；会覆盖元素中原本内容 v-bind 书写格式2种： v...
Vue学习总结-组件
frieryumao的博客
09-24 263
Vue学习总结-组件 组件化和模块化的区别组件-组件的创建方式1组件-组件的创建方式2组件-组件的创建方式3组件-组件中的data组件切换-使用v-if和v-else结合flag进行切换组件切换-使用Vue提供的component元素实现组件切换组件切换-应用切换动画和mode方式动画-小球动画flag标识符的作用分析组件传值-父组件向子组件传值和data与props的区别组件传值-子组件通过事件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值