js easyui 标签页_Vue记账项目 标签页 + 标签编辑页

1、使用MVC

如何在一个ts文件里映入js文件

创建model.js

如果使用export default导出

则这么导入

如果使用export {model}导出

则这么导入

析构简化

改成ts文件

把文件js后缀改成ts，将没有写：类型的错误都更改好，发现该类型在其他文件时，那么就把该类型放到全局共用的地方custom.d.ts(自定义的类型）

Record是一个默认就有的类型，因此需要重命名成RecordItem

在根目录下创建custom.d.ts使得该类型在所有文件里都可以使用

强制声明后则可简化

简化

2、标签页

HTML

CSS

标签添加功能

标签删除功能

新建路由，点击跳转功能

如何知道编辑的标签是哪一个标签，最好是标签有一个id，暂时用name充当id

如何获取后面那个id

通过vue-router

一般路由信息放route里，和路由器有关的放router里面

这样得知可通过这种办法获取id

添加标签跳转至编辑页面

为了保证svg标签完全对称，我们可以把right的svg上传到iconfont，然后进行旋转

封装通用组件Notes

将Notes组件进行重命名FormItem.vue，将类重命名成FormItem

删除标签按钮

将button改成一个通用组件，新建Button.vue，将之前的button HTML和CSS照搬

CSS部分

添加功能，展示标签的name

通过url获取到tag，再将tag放到data上

如果要对标签进行修改，通过监听updateTag来获取数据，再将数据存入data，通过tagListModel里面的update接口

删除功能

给button添加点击事件

给icon添加回退

添加id的原则

1、id不能重复

2、给了id后不能修改

创建CreateId.ts

删除后自动返回