新建标签页面
路由设计
有三个组件，一个是TagPage标签页面、一个是TagCreate创建标签、最后是TagEdit设置标签。
查看设计稿，发现布局与之前的结账界面类似，使用封装好的mainLayout组件。
初始化效果如下：
添加一些CSS效果后：
一些CSS细节：为了让emoji的部分严格展示12行，用到了一个技巧——设置好行高让高度等于行高的12倍即可。此外为了美观还规定了滚动条不可见。
选取tag
封装EmojiSelect组件
新建标签页面中的表单只有两个数据，使用一个对象就可以解决。
回到新建标签的界面，
用reactive声明一下表单数据，内含一个对象包括标签名——name、emoji图标——sign 默认为空字符串
用v-model与input标签关联，可以实现标签名的输入改写
但是下面的emoji列表是自定义的一个组件并非默认的input所以无法直接使用v-model。这里需要先写好这个自定义组件叫做EmojiSelcet组件。 引入我们之前爬好的emoji列表。 创建一个表，他会展示tab标题会显示哪些标签
每一类的第一项为标题，后面是内容 使用ref记录表的选中的那一项（默认是第一项），定一个变量选择类直接选到表的选中项的第一项也就是类名。
在导航栏遍历，拿到每一项的第一项就是类名
每个类应该展示的emoji字符也需要遍历，遍历的内容是第一项是否为类名，如果是则添加进li里面。
效果图
添加事件监听
点击时把selected的值切换
在包含类名的span中就需要传一个index，将点击之后新的index赋值给refSelected。
因为是计算出来的属性，可以用computed
由于使用了ref，展示时要用
{{emojis.value}}
再给选中的tab一个高亮效果
添加需求：想把用户选中的emoji展示在tab上方
点击emoji的时候把emoji传给formData的sign即可。
绑定给input一个v-model={formData.sign}在EmojiSelect组件中，接受一个props，里面是modelValue。
在包含emoji的li中添加一个点击事件，传一个item，
v-model的绑定事件，将新的item传给v-model。
用户选中后可以显示。
