23-%E5%B8%83%E5%B1%80%E7%BC%A9%E7%95%A5%E5%9B%BE%E9%9B%86%E6%88%90.md

## 目标 1. 实现通用的标题组件 2. 将布局缩略图集成抽屉中 ## 开发 打开setting-drawer下的index.vue的文件中。 添加如下代码： ```vue

导航模式

``` 我们在base-layout中进行双向绑定布局的变化 ```vue ``` ### 优化checklayout的样式 当我们hover的时候，应该会有一个小手这样会更好一些，所以我们在checkbox-layout中加一个类`cursor-pointer`使得我们在hover的时候触发效果 ### 封装通用标题组件 我们的标题部分在我们的抽屉中是复用程度比较高的，所以我们将这一部分封装成一个组件方便我们后续使用。 我们封装一个setting-container的组件用于放我们的组件内容。 ```vue

{{ title }}

``` 在setting-drawer/index.vue中引入。 ```vue ``` ### 优化布局缩略图提示功能 当我们的鼠标移动到我们的布局缩略图上的时候，我们可以给一个友好的提示，那么我们来实现一下这个功能。 在layout-drawer中(只写了部分修改和添加的代码) ```vue

{{ typeof title === 'function' ? title?.() : title }} ``` 测试是否正常使用。 当我们点击切换布局的时候发现不生效了是因为我们的click事件继承到了tooltip上，所以我们需要将事件拿到我们的n-el中去： ```vue

```