大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML<transition-group>实例分析

这篇文章主要讲解了“HTML 实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML 实例分析”吧!

你所需要的网站建设服务,我们均能行业靠前的水平为你提供.标准是产品质量的保证,主要从事成都网站设计、成都做网站、企业网站建设、移动网站建设、网页设计、品牌网站建设、网页制作、做网站、建网站。创新互联建站拥有实力坚强的技术研发团队及素养的视觉设计专才。

样式同前

ul.item {

  list-style-type: disc;

  margin-block-start: 0;

  margin-block-end: 0;

  margin-inline-start: 0;

  margin-inline-end: 0;

  padding-inline-start: 0;

}

.item li {

  height: 50px;

  line-height: 50px;

  border: 1px solid #aaaaaa;

  width: 200px;

  padding: 0 10px;

  display: flex;

  align-items: center;

}

先把DOM渲染出来

new Vue({

  el: "#drag",

  data: {

    draggingItem: null,

    lastItem: null,

    items: Array.from({ length: 5 }, (_item, index) => ({

      key: index + 1 + "",

      name: "Item" + (index + 1),

    })),

  },

});

模板是异常的简单

 

  •     {{item.name}}

     

  • 然后可以在加name了。

     

    当然也要加上配套的样式

    .flip-list-move {

      transition: transform 0.3s;

    }

    下面就是给子元素加上事件了

  •   @dragstart="dragstart(item)" @dragover="dragover(item)">

      {{item.name}}

  • 就两个事件

    dragstart: function (item) {

        this.draggingItem = item;

    },

    dragover: function (item) {

        if (item !== this.draggingItem && this.lastItem !== item) {

          const fromIndex = this.items.indexOf(this.draggingItem);

          const toIndex = this.items.indexOf(item);

          const temp = this.items[fromIndex];

          this.items[fromIndex] = this.items[toIndex];

          this.items[toIndex] = temp;

          this.items = […this.items];

        }

        this.lastItem = item;

    }

    这里我和之前的写法略作了改动,判断拖动元素和拖入元素不是同一个,还判断了拖入元素和上次拖入元素也不是同一个,不然会发生不停抖动的情况,因为拖动的时候发生了元素移动,导致反复触发dragover事件。

    注意最后这里的this.items = […this.items],因为上面是直接在索引上修改数组元素的,而Vue2的响应式对数组在索引上的修改察觉不到,所以重新给this.items赋值,不过好在有key的加持,Vue只会针对修改的部分进行更新,无须担心性能问题。

    整个的解决方案把所有HTML、CSS代码都算入也就不满80行,让我切切实实感受到了的威力——大杀器也,如果在Vue应用中有列表型元素的动画需求,第一考虑的就该是它。

    感谢各位的阅读,以上就是“HTML 实例分析”的内容了,经过本文的学习后,相信大家对HTML 实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


    文章标题:HTML<transition-group>实例分析
    网页网址:http://dzwzjz.com/article/pjsdog.html
    在线咨询
    服务热线
    服务热线:028-86922220
    TOP