精华内容
下载资源
问答
  • 建议先阅读下面的文章:条件渲染 — Vue.js​cn.vuejs.org用vue的时候,如果你开发的页面有很多的局部状态,那么你很大几率会遇到组件重渲染的烦恼。举个例子:这是一个逻辑很复杂的web视频编辑器,用户可以在各个...

    建议先阅读下面的文章:

    条件渲染 — Vue.jscn.vuejs.org
    573ab6712c0ae20b3f127a6f18c7d372.png

    用vue的时候,如果你开发的页面有很多的局部状态,那么你很大几率会遇到组件重渲染的烦恼。

    举个例子:

    5b349b5e13f29760a7c97e9a24ebba69.png

    这是一个逻辑很复杂的web视频编辑器,用户可以在各个编辑项目之间来回切换。当用户进行项目切换的时候,我们一般的做法是,调用这个编辑器组件的fetchData方法,让所有相关数据重新拉取并重新赋值。得益于vue的响应式系统,页面中的各个元素会使用新的data进行渲染。

    但这种渲染只满足了一半的需要。虽然props传递的数据被重新渲染了,但各个子组件的局部状态还保留着。如上图所示,我们将时间轴拉到了4s的位置,这个4s是时间轴组件自己保存的。那么当新的数据进行渲染时,时间轴仍然会处于4s的位置,这显然不符合要求。另外,页面中还会有input框,也会保留着局部状态。这是vue为了性能,重用了我们的相同dom tree中的dom元素。

    这时候,思路有3种:

    • 通过ref拿到各个涉及局部状态的元素,在切换项目时手动重置
    • 在各个涉及局部状态的组件中,watch一个独特的prop,当prop变化时,重置自身的所有局部状态。
    • 在最外层的组件使用key

    这篇文章主要是谈论第三种方法,通过key来达成组件重渲染。

    我们可以在最外层的编辑器框架组件(假如名叫 <Editor>)上,使用 :key 属性来标记我们何时需要组件进行完整的重渲染。对于这个例子,我们使用 projectId 。一旦新的数据回来,projectId 就会改变,改变之后,所有从属于 <Editor>的子组件,都会 destroy并重新 mount。那么就达成了我们清理局部状态的目的,并且从编程思路来说,这时候重渲染<Editor>也是更符合逻辑的。

    代码就不多举例了,开头的那个链接足够清晰。

    展开全文
  • 介绍最近使用Vue方面的东西比较多,也接触了一些管理模板方面的资料,今天要介绍的就是其中一个,Vuestic Admin管理模板包括38以上个定制用户界面组件,界面也很现代化,在demo中就已经包含了中文版本,文末有多图...

    介绍

    最近使用Vue方面的东西比较多,也接触了一些管理模板方面的资料,今天要介绍的就是其中一个,Vuestic Admin管理模板包括38以上个定制用户界面组件,界面也很现代化,在demo中就已经包含了中文版本,文末有多图欣赏,感兴趣的小伙伴可以直接参考demo:


    ab2772f20394bfb1ebcd8999573cc272.png

    Github

    目前在Github上还是非常受欢迎的,Stars数已经多大6.8k,而且在仓库中可以找到中文的介绍,这对于英文不太友好的朋友来说是很不错的:

    https://github.com/epicmaxco/vuestic-admin
    https://github.com/epicmaxco/vuestic-admin/blob/master/README.zh-CN.md
    https://github.com/epicmaxco/vuestic-admin/wiki

    为什么使用Vuestic

    • 高质量的用户界面

    Vuestic实现了最佳用户界面设计思想而制作了管理模板

    • 可定制

    Vuestic包括38个以上简单且可配置的组件以及7大页面

    • 响应式

    Vuestic自适应支持手机、平板与电脑屏幕大小

    • 代码整洁干净

    Vuestic组件跟随Vue的风格指南

    • 多浏览器支持

    Vuestic支持较新的Chrome、FireFox、Safari、Edge、Opera、IE11

    • 国际化

    Vuestic内置了i18n国际化解决方案

    • 免费

    Vuestic代码依据MIT开源协议

    安装使用

    首先确保安装了以下版本的nodejs、npm以及Git环境:

    • Node.js (>=8.9)
    • npm 3+版本 (或许yarn 1.16+版本) 和Git。
    #克隆存储库$ git clone https://github.com/epicmaxco/vuestic-admin.git myproject#进入应用目录与安装依赖$ cd myproject

    之后,如果用npm:

    $ npm install#默认情况下在localhost:8080用热重载$ npm run serve#构建生产$ npm run build#构建生产与查看包分析报表$ npm run build --report

    如果用yarn:

    $ yarn install#默认情况下在localhost:8080$ yarn serve#构建生产$ yarn build#构建生产与查看包分析报表$ yarn build --report

    功能简介

    • 布局及图表
    9b2f17f31884466821642c4ad5e0a199.png
    9d28af2f940c132c23440b6d2ac088e9.png
    99a0999fada3d460dbab650f097c8949.png
    • 表单
    158f4aadd1623911953612458d8d46b7.png
    df387b66de57bd4cc7963855b3ede453.png
    • 所见即所得编辑器
    b073454651fbe930897f0f907cf51399.png
    • 表格
    6cd53f411f52773c2efb18d3e902a09b.png
    40109d6929ab86e926b6b75ca72f67cf.png
    • 数据表格
    48f18f0a5c810a775c16b59e3688bdec.png
    41162b0afc93672ef53fd99fa179df29.png
    9af0033d2d07d8ca5886f99a460fad23.png
    e355f510b00aa31d7410b937ca18c2c0.png
    412e94322f5c581a73c4c92688c14b1a.png
    d509a844960f09962b30e5df2334f226.png
    • 按钮
    fc76182c07e4a1ab6f06afd051fdced8.png
    512b599b5ee05d1768655a048ede90cd.png
    675154d9245954c106435a59a5d190fa.png
    • 卡片
    1dc099acbf2bf1a7f09da16989b0cfee.png
    • 聊天框
    ab0387fb57a7c93849db97f44ce09740.png
    • 标签
    2cd8817a9255b6a4f47dd46c51e57a52.png
    • 面板
    468efd7cd6f6d927699b1ecd17801406.png
    • 色彩
    0842be55c554f0989078a618a6417407.png
    dda3f6b5ca067764080214afdb1353cf.png
    • 颜色面板
    525ff6c65dc05c47d92df6b45037f216.png
    • 上传组件
    e67e07c8e233c38f12d3994792ad3e51.png
    • Grid
    83d40b1b47de872f2fa21467b5813d6c.png
    9d696f4c71e00f04961c345f743857a5.png
    • 图标
    79ea9dbb71e02e418326522705a7dbe0.png
    1bb0e135df7fab5b971f16ed77a348cc.png
    677b5f2de4837d3831465cff2ced6318.png
    • 列表
    389cf794e5f38230bca7905b915b861c.png
    • 模态框
    9bf3dd88f88109b71a0067ae2a2ac42b.png
    • 通知提醒
    a5c35c16bd4ffebbd7a90c9ead9191dc.png
    • 评分组件
    7017ad458da063b3cc75f3df9a1c3c76.png
    • Sliders
    d15c980ca3538a453a9c3778868ff6f1.png
    • Spinners
    11887c65abad4c839a3da495581af3d6.gif
    • Tab
    e0b80535a0f9b986296d1dbbc3cda8a7.png
    • 时间轴
    0913ba1ab5910d07b11df9d656d089c2.png
    473fc714ab4a665aa28e7f6d54bbe788.png
    • 树组件
    7ee1b92c143e83548f82b86cdb2a18c8.png
    • 登陆页面和404
    bd316208bdf130bce47188f1719a76d4.png
    fcdb0d82b6982f466f0d9404c5c81bb2.png

    总结

    Vuestic是一个颜值很高的基于Vue的后端管理界面模板,对于颜值有追求的小伙伴一定不要错过,Enjoy it!

    b18e65132c94c74e07ce04bd37171f84.png
    展开全文
  • vue 时间线组件(时间轴组件) 1.效果 2.代码 <template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"&...

    vue 时间线组件(时间轴组件)

    1.效果
    在这里插入图片描述
    2.代码

    <template>
        <ul class="timeline-wrapper">
            <li class="timeline-item" v-for="t in timelineList" :key="t.id">
            <div class="timeline-box">
                <div class="out-circle">
                    <div class="in-circle"></div>
                </div>
                <div class="long-line"></div>
            </div>
            <div class="timeline-content">
                <div class="timeline-date">{{t.date}}</div>
                <div class="timeline-title">{{ t.title}}</div>
                <div class="timeline-desc">{{ t.content}}</div>
            </div>
        </li>
        </ul>
    
    </template>
    
    <script type="text/babel">
        import Vue from 'vue'
        export default Vue.component('Timeline',{
            name: "Timeline",
            props: {
                timelineList: {
                    type: Array,
                    default: () => {
                        return []
                    }
                }
            }
        })
    </script>
    
    <style scoped lang="scss">
        ul.timeline-wrapper {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    
        /* 时间线 */
        .timeline-item {
            position: relative;
    
            .timeline-box {
                text-align: center;
                position: absolute;
    
                .out-circle {
                    width: 16px;
                    height: 16px;
                    background: rgba(14, 116, 218, 0.1);
                    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    /*opacity: 0.1;*/
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
    
                    .in-circle {
                        width: 8px;
                        height: 8px;
                        margin: 0 auto;
                        background: rgba(14, 116, 218, 1);
                        border-radius: 50%;
                        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    }
                }
    
                .long-line {
                    width: 2px;
                    height: 98px;
                    background: rgba(14, 116, 218, 1);
                    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    opacity: 0.1;
                    margin-left: 8px;
                }
            }
    
            .timeline-content {
                box-sizing: border-box;
                margin-left: 20px;
                height: 106px;
                padding: 0 0 0 20px;
                text-align: left;
                margin-bottom: 30px;
    
                .timeline-title {
                    font-size: 14px;
                    word-break: break-all;
                    margin-bottom: 16px;
                    color: #333;
                    font-weight: 500;
                    /*display: inline;*/
                }
    
                .timeline-date {
                    font-size: 16px;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 16px;
                }
                .timeline-desc {
                    font-size: 14px;
                    color: #999999;
                }
            }
    
        }
    
    
        .timeline-item:last-of-type .timeline-content {
            margin-bottom: 0;
        }
    </style>
    

    3.应用

    // 父组件引用
    <timeline :timeline-list="dongtai"></timeline>
    // 引入组件,记得组件路径要根据自己的来
    import Timeline from "./Timeline";
    // 在data()返回的对象里声明数组
    dongtai:[]
    
    展开全文
  • vue组件 .vue hhqing-vue时间轴 (hzqing-vue-timeline) A Vue component to hzqing-vue-timeline. hzqing-vue-timeline的Vue组件。 安装 (install) npm install -S hzqing-vue-timeline 用法 (usage) main.js:...

    vue组件 .vue

    hhqing-vue时间轴 (hzqing-vue-timeline)

    A Vue component to hzqing-vue-timeline.

    hzqing-vue-timeline的Vue组件。

    安装 (install)

    npm install -S hzqing-vue-timeline

    timelinephone

    用法 (usage)

    main.js:

    main.js:

    import hzqingVueTimeline from 'hzqing-vue-timeline'
    Vue.use(hzqingVueTimeline)

    <hzqing-vue-timeline 
       timelineColor="#5bbcd5"  
       timeContentColor="#fff"
       :dataList="data"
       ></hzqing-vue-timeline>
    data: [
            {
                time: 1522372393000,
                img: 'static/touxiang.jpeg',
                title: 'hzqing.com',
                content: '这是衡钊清的个人博客'
            },
            {
                time: '2018-03-30 14:36:35',
                img: 'static/one.jpeg',
                title: '这是一个简单的vue时间轴插件',
                content: '这是一个简单的vue时间轴插件,使用非常的方便'
            },
            {
                time: 1522372393000,
                img: 'static/three.jpg',
                title: '努力奋斗',
                content: '当你发现你的才华撑不起野心时,就请安静下来学习吧~~~'
            }
        ]

    翻译自: https://vuejsexamples.com/a-vue-component-to-hzqing-vue-timeline/

    vue组件 .vue

    展开全文
  • github地址:https://github.com/SunshineMibai/vue-timeline实现思路及步骤:页面分为四个部分1、左侧时间2、中间圆点3、右侧内容4、虚线部分最外层div,relative布局,方便子元素计算尺寸左侧时间固定宽度,显示时间...
  • github地址:https://github.com/SunshineMibai/vue-timeline实现思路及步骤:页面分为四个部分1、左侧时间2、中间圆点3、右侧内容4、虚线部分最外层div,relative布局,方便子元素计算尺寸左侧时间固定宽度,显示时间...
  • Vue时间轴组件

    千次阅读 2019-02-13 10:34:00
    github地址:https://github.com/SunshineMibai/vue-timeline 实现思路及步骤: 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧...
  • Vue时间轴 vue-light-timeline

    万次阅读 2019-02-18 18:16:54
    轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); &...
  • 轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from ‘vue-light-timeline’; Vue.use(LightTimeline); ...
  • vue.js水平时间轴 Vue水平时间线 (Vue Horizontal Timeline) ... 一个由Vue.js制作的简单水平时间轴组件。 View Demo 查看演示 View Github 查看Github 如何安装 (How to install) npm (npm) ...
  • 一个简单的Vue.js组件,可在Web应用程序上生成响应的,垂直的,可配置的动画时间轴。变更日志:0.1.17(2020年7月20日)添加日期字符串props安装和下载:# Yarn$ yarn add @growthbunker/vuetimeline# NPM$ npm ...
  • 目前做的都是一些数据...项目过程中有遇到这样的一个组件这个组件要求是可以拖动,但是在vue中使用jquery 来操作dom,我在第一遍这样去使用的时候发现页面会很卡。{{item}}import historData from '../historData'...
  • 时间轴组件 by Vue.js

    千次阅读 2019-01-12 08:44:26
    在繁重的业务工作中,如何提升自己的技术能力,而不是变为特定...现有的轮子比如ElementUI、iView中,都没有专门的时间轴组件,于是就萌生了自己封装一个的想法。 说干就干,杜绝拖延症,正好今天周末,就封装了一个...
  • 每一个时间轴块为一个整体,如下图: 将这个整体分为几部分:左边小圆点node、左边时间线line、右边title、右边内容content。 这样一来,可以将这个整体分成左右两部分。 左边部分的小圆点可以用一个div元素设置...
  • vue轻量级弹幕组件 视线时间轴 (vue-light-timeline) ... 移动的第一个轻量级Vue时间轴组件。 View demo 查看演示 Download Source 下载源 安装 (install) yarn add vue-light-timeline if you pref...
  • vue-cute-timeline:一个可爱的Vue.js时间轴组件
  • vue2.0 中制作时间轴拖动组件

    千次阅读 2017-06-15 21:34:00
    目前做的都是一些数据可视化的项目,使用的是vue框架,其中用到了...这个组件要求是可以拖动,但是在vue中使用jquery 来操作dom,我在第一遍这样去使用的时候发现页面会很卡。 <template> <div class="tim...
  • vue-light-timeline:轻量易扩展的 Vue.js 时间轴组件
  • 选择时间,获取对应数据,显示时间轴和时间点2.时间点hover显示对应时间3.整点时间显示4.点击时间轴,选择对应的时间点5.点击时间点,选择对应的时间点6.拖动点,选择对应的时间点7.限制拖动,及点击位置效果图组件...
  • 今天给大家分享一个超不错的Vue滚屏切换组件MVFullPage。mv-full-page 一款基于vue2.x构建的屏幕滑动组件。兼容移动端、PC端(鼠标滚轮滑动),支持局部页面动画。特性PC端鼠标滚轮切换(水平/垂直)移动端触摸滑动(水平...
  • vue自定义组件 简单 简单的时间线 (simple-vue-timeline) A timeline vue component which ... 时间轴Vue组件,利用了公共库的使用: bootstrap vue components, 引导vue组件vue-fontawesome Vue-fontawesome...
  • weex实现时间轴组件

    2018-12-12 17:53:32
    时间轴组件代码 TimeLine.vue : &lt;!-- 时间线 --&gt; &lt;template&gt; &lt;div class="list-cell-item" :style="{height: (timeLineHeight)+'px'}"&gt; &...
  • vue 物流时间轴

    2020-03-12 17:31:13
    son组件 <template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</span> &...

空空如也

空空如也

1 2 3 4
收藏数 63
精华内容 25
关键字:

vue时间轴组件

vue 订阅