# funny-demo-vue2

**Repository Path**: hdw0504/funny-demo-vue2

## Basic Information

- **Project Name**: funny-demo-vue2
- **Description**: 用原生html+css+vue2写一些小demo
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-07-19
- **Last Updated**: 2022-09-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

# funny-demo (vue2)

线上地址：<https://hdw0504.github.io/funny-demo-vue2/dist>

基于 vue2 的个人小 demo

用于熟悉 css 以及对 vue2 更深入掌握

### 项目一 myComponents

---

个人组件（参考 element 和 antd 的 UI 交互）

都是由 原生 html 标签 + css 封装而成。根据之后的 demo 陆续封装~

按钮状态增加了 <font color=#E6A23C>**waiting**</font> 和 <font color=#F56C6C>**loading**</font>

<font color=#E6A23C>**waiting**</font> 则是用了 css 伪类和动画制作而成

<font color=#F56C6C>**loading**</font> 暂时是用图片+旋转（可优化）

button 按钮和 input 输入框都有各自默认、hover 及 active 样式

![myComponents.png](https://gitee.com/hdw0504/funny-demo-vue2/raw/master/src/assets/README/myComponents.png)

### 项目二 todoList

---

一个小小的待办事项列表

使用 transition-group 给列表的**增加、删除、修改状态**加上过渡动画

使用 animation 左进右出（添加删除操作）

使用 vue 的 draggable 属性及其方法实现列表拖拽换位及动画

拖拽加入限制，列表的状态顺序无法打乱（执行中>去执行>已完成）

![myComponents.png](https://gitee.com/hdw0504/funny-demo-vue2/raw/master/src/assets/README/todoList.png)

项目思路有很多种 （为了解决 transition-group bug 使用第三种）

~~1.设置执行中 去执行 已完成三种 list 根据操作来进行增删~~

~~2.主要围绕着状态及创建和完成时间来**排序**（Array.sort()）~~

3.一个 list 存储，改变状态并修改其位置...

遇到的天坑 **transition-group**
在使用唯一 key 绑定而不是使用 index 绑定的情况下

发现同时修改列表多个参数的时候 transition-group 是不会动的

在此项目解决办法 （\$nextTick）

```
// 去执行
    toDoing(inx) {
      // transition-group 旧逻辑存在未知bug
      // 解决办法：先修改位置 等位置移动的动画结束后 再修改值
      const cur = this.list.splice(inx, 1)[0];
      this.list.unshift(cur);
      this.$nextTick(() => {
        this.list[0].status = 0;
        // 如果已经存在正在执行的
        if (this.list.length >= 2 && !this.list[1].status) this.list[1].status = 1;
      });
    }
```

### 项目三 jumpBall

---

纯 css 和一个 div 模拟小球弹跳

**radial-gradient** 渐变 给小球上色

**animation** 动画 赋予小球弹跳能力

**cubic-bezier ** 贝塞尔曲线 设置关键帧速度

...

未完待续...