vue grid 操作

最新推荐文章于 2024-07-11 11:11:53 发布

DemonHunter211

最新推荐文章于 2024-07-11 11:11:53 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/kwame211/article/details/107330683

版权

Vue 专栏收录该内容

74 篇文章 9 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Move Animations</title>
    <style>
      .container {
        position: relative;
        padding: 0;
      }
      .item {
        width: 100%;
        height: 30px;
        background-color: #f3f3f3;
        border: 1px solid #666;
        box-sizing: border-box;
      }
      /* 1. declare transition */
      .fade-move, .fade-enter-active, .fade-leave-active {
        transition: all .5s cubic-bezier(.55,0,.1,1);
      }
      /* 2. declare enter from and leave to state */
      .fade-enter, .fade-leave-to {
        opacity: 0;
        transform: scaleY(0.01) translate(30px, 0);
      }
      /* 3. ensure leaving items are taken out of layout flow so that moving
            animations can be calculated correctly. */
      .fade-leave-active {
        position: absolute;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>
  </head>
  <body>
    <div id="el">
      <button @click="insert">insert at random index</button>
      <button @click="reset">reset</button>
      <button @click="shuffle">shuffle</button>
      <transition-group tag="ul" name="fade" class="container">
        <item v-for="item in items"
          class="item"
          :msg="item"
          :key="item"
          @rm="remove(item)">
        </item>
      </transition-group>
    </div>

    <script>
      var items = [1, 2, 3, 4, 5]
      var id = items.length + 1

      var vm = new Vue({
        el: '#el',
        data: {
          items: items
        },
        components: {
          item: {
            props: ['msg'],
            template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
          }
        },
        methods: {
          insert () {
            var i = Math.round(Math.random() * this.items.length)
            this.items.splice(i, 0, id++)
          },
          reset () {
            this.items = [1, 2, 3, 4, 5]
          },
          shuffle () {
            this.items = _.shuffle(this.items)
          },
          remove (item) {
            var i = this.items.indexOf(item)
            if (i > -1) {
              this.items.splice(i, 1)
            }
          }
        }
      })
    </script>
  </body>
</html>

DemonHunter211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue grid 操作

index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Move Animations</title> <style> .container { position: relative; padding: 0; } .i..
复制链接

扫一扫

专栏目录