qq_40745468的博客

Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至 目前，几乎所有的浏览器都对 CSSGrid 提供了原生的支持。Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行Grid 布局和 flex 布局。

我们会发现，其实域名是**www.xxxx/com**，hr是特定的前缀地址，此时我们可以配置一个base属性，配置为hr。改成history模式非常简单，只需要将路由的mode类型改成history即可。： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器。：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器。此时，我们会发现地址已经变成我们想要的样子了。**目标**配置打包之前的路由模式。

当我们全局注册i18n的时候，每个组件都会拥有一个**$t**的方法，它会根据传入的key，自动的去寻找当前语言的文本，我们可以将左侧菜单变成多语言展示文本。注意：当文本的值为嵌套时，可以通过**$t(key1.key2.key3...)**的方式获取。第三步，在main.js中对挂载 i18n的插件，并设置element为当前的语言。第二步，需要单独一个多语言的实例化文件 src/lang/index.js。这里，针对英文和中文，我们可以提供两个不同的语言包。**目标**实现国际化语言切换。

来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加 style 标签来覆盖原有的 css 样式。element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的，所有的颜色都是基于几个基础颜色。第二步， 放置于**layout/navbar.vue**中。： 实现动态主题的设置。

第四步，放置于**layout/navbar.vue**中。第二步，封装全屏显示的插件··第三步，全局注册该组件。：实现页面的全屏功能。第一步，安装全局插件。

首先，打印功能我们借助一个比较流行的插件。利用vue-print-nb进行打印。完成个人信息和工作信息的打印功能。完成详情到打印的跳转。最终，我们看到的效果。

在点击员工的图片时，显示弹层，并将图片地址转化成二维码。我们尝试将canvas标签放到dialog的弹层中。首先，需要安装生成二维码的插件。将图片地址生成二维码显示。

在 src\views\employees\index.vue 中的 table 上补充一列。此时可能部分图片无法正常显示（原因是图片本身地址有误，或者就是没有设置图片）此时可能部分图片无法正常显示（原因是图片本身地址有误，或者就是没有设置图片）组件使用者如果传递了图片，使用传递的图片。首先需要封装图片组件，然后进行全局注册。通过自定义列，将图片显示在表格中。如果没有传递图片，使用默认图片。通用封装-封装全局图片组件。在业务组件使用封装的组件。我们为什么要封装图片组件。在业务组件中封装组件。

使用自定义行为覆盖默认上传，注意一旦设置自定义上传行为之后，所有的上传操作都需要自己实现，比如数据处理，上传成功之后的后续操作，on-success 钩子函数也不会继续触发。实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作。服务器属于个人的，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥，也就是说拥有秘钥是进行上传的必要条件。