解决方法：
|
1 2 3 4 5 6 7 8 |
onAll: function () { // 修复stickyHeader表头不跟随表体水平滚动的问题 if (params.stickyHeader) { var fixedTableBody = $(target).parents('div.fixed-table-body').on('scroll', function () { $(fixedTableBody).find('.sticky-header-container.fix-sticky.fixed-table-container').css('transform', 'translateX(-' + this.scrollLeft + 'px)') }) } } |
可以看出导致页面模糊的原因是因为，mian设置了overflow:hidden; 同时second-verify-box设置了transform属性。
但是同样拥有同样设置的login-wrap却没有出现这个问题，暂时将这个现象记录下来。
如果有人知道具体原因的，可以评论告知[……]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/** * 设置bootstrat-table * @param params */ function setBootstrapTable (target, params) { // 默认设置表格内容居中 params.columns && params.columns.forEach(function (item) { if (!item.align) { item.align = 'center' } }) // 默认表格配置 var defaultParams = { data: params.data || '', // 默认数据为空 showColumns: params.showColumns ? params.showColumns : false, // 默认关闭可隐藏列 search: params.search ? params.search : false, // 默认关闭搜索 searchAlign: params.searchAlign ? params.searchAlign : 'left', // 默认搜索框靠左 searchOnEnterKey: params.searchOnEnterKey ? params.searchOnEnterKey : false, // 默认关闭回车搜索 searchText: params.searchText ? params.searchText : '', // 搜索框默认填充内容，默认为空 showToggle: params.showToggle ? params.showToggle : false, // 默认关闭切换展示方式按钮 showExport: params.showExport ? params.showExport : false, // 是否打开下载， 默认关闭 exportDataType: params.exportDataType ? params.exportDataType : 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all exportTypes: params.exportTypes ? params.exportTypes : ['csv','excel'], // 下载类型， support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv','excel'] formatSearch: function () { // 搜索框默认提示 return params.formatSearch ? params.formatSearch : '在当前表格中搜索' }, formatNoMatches: function () { // 默认无数据展示内容 return params.formatNoMatches || '暂无数据' }, formatLoadingMessage: function () { // 默认loading内容 return params.formatLoadingMessage || '努力加载中...' }, formatColumns: function () { // 隐藏或显示列按钮的title, 默认为'显示或隐藏列' return params.formatColumns ? params.formatColumns : '显示或隐藏列' }, columns: params.columns || [] // 默认表头内容为空 } // 将params中在默认表格配置中没有的属性，添加到默认表格配置中 for (var key in params) { if (!defaultParams.hasOwnProperty(key)) { defaultParams[key] = params[key] } } if (params.fixedHeader) { var clientHeight = $(target)[0].offsetParent.clientHeight var offsetTop = $(target)[0].offsetTop var tableHeight = clientHeight - offsetTop defaultParams.height = tableHeight } // bootstrap-table表格渲染方法调用 $(target).bootstrapTable(defaultParams) } |
README.md
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
#### 表格组件，基于bootstrap-table --- ##### 使用方法 > html部分 ```html <table data-toggle="table" class="table table-bordered table-hover" id="your_table_id"> <thead class="thead-light"></thead> <tbody> <tr> <td>数据一</td> <td>数据二</td> </tr> </tbody> </table> ``` > javascript部分 ```javascript setBootstrapTable('#your_table_id', { data: data, // 表格数据，若是动态渲染的数据，则为必填项 formatNoMatches: '没有数据', // 配置没有数据显示的文字，默认为'暂无数据' formatLoadingMessage: 'loading...', // 配置loading文字，默认为'努力加载中...' height: 500, // 设置表格高度从而来固定表头 fixedHeader: true, // 自动计算表格在当前视图中，去除上方元素后可用的高度，开启这个配置则覆盖默认的height属性 search: false, // 搜索，默认关闭 searchAlign: 'left', // 默认搜索框靠左 searchOnEnterKey: false, // 默认关闭回车搜索 searchText: '', // 搜索框默认填充内容，默认为空 showColumns: false, // 默认关闭可隐藏列 showToggle: true, // 默认关闭切换展示方式按钮 showExport: false, // 是否打开下载， 默认关闭 exportDataType: 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'], // 下载类型， support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv', 'excel'] formatColumns: '显示或隐藏列',// 隐藏或显示列按钮的title, 默认为'显示或隐藏列' formatSearch: '在当前表格中搜索', // 搜索框内容，默认为'在当前表格中搜索' onAll: function (name, args) { // 所有事件触发 // name: 触发的事件名称 // args: 触发事件的数据 }, columns: [ // 在这里进行表头设置 { title: '表头一', width: '100%', // 自定义宽度 sortable: true, // 是否排序 align: 'left', // 'left','center','right' 默认居中 showColumns: true, // 是否开启可隐藏列，默认开启 formatter: function (data) { // 格式化数据 // 例如： return data + '%' 则为数据返回添加上%， // 如果数据需要%但是又要排序，则在此设置排序后的格式 } } ] }) ``` > 更多配置项请查看 [官方文档][https://bootstrap-table.com/docs/api/table-options/] |
|
1 2 3 4 5 6 7 |
.border-radius-0 { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-appearance: button; } |
正常的移动端上下滑动，松开手指页面还会速度递减的再滑动一段距离，但是有时候会出现手指松开滑动就停止的情况，导致页面出现卡顿的现象。
出现的原因大多数是因为加了：
|
1 |
overflow: auto; |
可以在添加了overflow: auto;的元素上再添加下面的[……]
在使用prerender-spa-plugin做前端预渲染的时候，安装puppeteer的时候因为下载Chromium 失败报错，有如下解决方法：
1.使用Chromium 国内源
|
1 2 |
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors npm i puppeteer |
2.使用淘宝的cnpm 安装
[cray[……]
示例项目地址: https://github.com/skillnull/lottie-web-caption-animation
首先是安装AE，具体怎么安装就不赘述了，随便一搜就有很多教程。
安装完AE以后，装一个AE的插件bodymovin, githu[……]
一、组件库的价值
[……]
背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个[……]
配置当前的用户名邮箱可以当前项目配置或者全局配置。
仅当前项目配置：
|
1 2 |
git config user.name 'your-user-name' git config user.email 'your-user-email' |
全局配置：
|
1 2 |
git config --global user.name 'your-user-name' git config --global user.email 'your-user-email' |
新建shell脚本 change-email-nam[……]