toDolist demo总结

目录

1、规范化创建项目

2、遇到的难题

1、在卡片内分两列显示（elementplus中layout布局）

2、去除router-link的下划线

3、点击多选框改变多选框样式，以及文字添加横线

 4、基于pinia实现多选框的选中，未选中功能（选中checked为true，未选中checked为false）

5、数组去重

6、双击修改

7、初次加载页面按钮高亮

---

1、规范化创建项目

npm install 需要的依赖

npm install element-plus --save
npm install @element-plus/icons-vue
npm i vue-router -S
npm install pinia

在main.ts中导入需要的依赖（按需导入可以缩小项目体积）

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
import ElementPlus from 'element-plus'
import * as Icons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import router from './router'

const pinia=createPinia();
const app=createApp(App);
app.use(pinia)
.use(router)
.use(ElementPlus)
.mount('#app')

Object.keys(Icons).forEach((key) => {
    app.component(key, Icons[key as keyof typeof Icons])
  })

对于路由，需要新建一个router文件夹，然后在该文件夹下新建index.ts，在ts文件中进行路由配置。要export default。路由配置好后再APP.vue中<router-view />就可以根据路由匹配规则展示对应组件。

 对于pinia需要新建一个store文件夹，在该文件夹下新建main.ts，然后配置pinia。

// defineStore定义容器
// 参数1：是对仓库的命名，名称必须具备唯一性；
// 参数2：配置的选项对象，即state、getters、actions
// ，其中state的写法必须是函数，为了避免在服务端交叉请求
// 导致的状态数据污染，而且必须是箭头函数，为了更好的TS类型推导。
import {defineStore} from 'pinia'

export const mainStore=defineStore('main',{
    // pinia取消了vuex中的mutation，Actions既可以同步也可以异步

// store:用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了,
    state:()=>{
        return {
            count: 100,
            price: 250
        }
    },
// getters属性：用来监视或者说是计算状态的变化的，有缓存的功能
    getters:{
        doubleCount():Number{
            return this.count*2;
        },
        doublePrice():Number{
            return this.price*2;
        }
    },
//  actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的
    actions:{
        changeStore():void{
            this.count+=1;
            this.price+=1;
        }
    }
})

2、遇到的难题

1、在卡片内分两列显示（elementplus中layout布局）

el-row和el-col实现，根据el-col中span占比决定占用区域多大。gutter 属性来指定列之间的间距，其默认值为0 。

2、去除router-link的下划线

a{
  text-decoration: none;
}
.router-link{
  text-decoration: none;
}

3、点击多选框改变多选框样式，以及文字添加横线

/* 文字添加横线 */
:deep(.el-checkbox__input.is-checked + .el-checkbox__label){
    text-decoration:line-through;
    color: rgb(72, 71, 70);
     /* background-color: rgb(237, 228, 215); */
}
/* 多选框前面框框样式 */
:deep(.el-checkbox__input.is-checked .el-checkbox__inner ){
    background-color:rgb(187, 222, 235);
    border-color:rgb(123, 123, 91);
}

 4、基于pinia实现多选框的选中，未选中功能（选中checked为true，未选中checked为false）

最最重要的，Pinia的state中保存了我们添加的任务信息。因为涉及到多选框，所以每个任务对象都添加属性checked。当我们在多选择选择某项任务的时候，该任务的checked应该为true，没有被选中应该为false。但是我们必须通过调用action的里的方法去修改该任务的checked的值才可！！！否则当组件切换后，之前的checked状态是会被刷掉，因为不通过action去修改checked的值，本质并没有修改成功！！！

获取多选框中选中的任务：

1、

<el-checkbox-group v-model="checkedList" >

中checkedList保存了每次被选中的项，我们需要const它，不然会无法选中。

2、

<el-checkbox v-for="item in alllist" :key="item.id" :label="item" size="large" 
    class="itemlist" @change="changeItem(item.id)" :checked="item.checked">

中@change就是每次选择发生改变的时候触发，通过传递item.id我们就知道哪个被修改了。后面在changeItem中调用station中的方法，并把item.id作为参数传过去，然后在station方法中根据item.id修改对应任务项的checked为!checked。

3、:checked="item.checked"很重要，动态绑定才能保证页面的check状态根据任务自身状态发生改变。

5、数组去重

 // 重复添加判断去重
            const obj: { [key: string]: boolean; } = {};
            this.donelist = this.donelist.reduce<any []>((item, next) => {
                if (!obj[next.id]) {
                    item.push(next);
                    // 此时设置next.id为true，下次next.id也是true，则
                    // !obj[next.id]就为false，就不会再被添加
                    obj[next.id] = true;
                }
                return item;
            }, []);

6、双击修改

绑定：@dblclick

7、初次加载页面按钮高亮

 <router-link to="/all"> <el-button type="primary" plain class="btn"
 :class="{'active':path==='\/all'}" @click="updatePath()">全部任务</el-button></router-link>

.active {
  background: #5ea0ea;
  border: 1px solid #5ea0ea;
  color: #fff;
}

  const path = ref('');
    // window.location.pathname获取Url,并将Url存入localStorage
    window.localStorage.setItem('path', window.location.pathname);
    // 当点击按钮时就不清除localStorage
    function updatePath(): void{
      window.localStorage.clear();
      // 对path.value重新复制清空
      path.value = window.localStorage.getItem('path')||'0'; 
    }
    // 报不能将类型“string | null”分配给类型“string”。
  // 不能将类型“null”分配给类型“string”
    path.value = window.localStorage.getItem('path')||'0';