// 固定对话框，当内容超出固定高度时，滚动 <style lang="scss" scoped> ::v-deep .pub-dialog-class { .el-dialog__body{max-height: 60vh;overflow: auto;} .el-form-item { margin-bottom: 15px; input { 180px; height: 36px; border: 1px solid #DCDFE6; color: #7e7878; transition: border-color .2s cubic-bezier(.645,.045,.355,1); border-radius: 4px; outline: none; padding: 0 10px; } } } </style> // 待尝试 this.$nextTick(() => { let container = this.$el.querySelector('.el-table__body-wrapper'); container.scrollTop = container.scrollHeight; })
export function isWechat() {
const ua = window.navigator.userAgent.toLocaleLowerCase()
return !!ua.match(/MicroMessenger/i)
}
/*
键盘弹起处理
ios 键盘弹起，window.innerHeight 不变，body、html 的 clientHeight、offsetHeight 增大，页面整体上移，暂不做特殊处理
android 键盘弹起，window.innerHeight、body、html 的 clientHeight、offsetHeight 均变小，需要将 input 框滚动到可视区
*/
const originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.addEventListener('resize', () => {
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
// android 键盘弹起
if (originHeight > resizeHeight) {
// 将元素滚动到可视区域
const activeElement = document.activeElement
const tagName = activeElement.tagName
if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
activeElement.scrollIntoViewIfNeeded()
}
}
}, false)
1. 父组件滚动时，只需要添加属性overflow: scroll;height: 100vh;
2. 子组件要滚动时，设置overflow: scroll;后还需要确定它的滚动高度，如maxHeight: 580px等等，反正滚动两个条件高度和设置滚动属性，重复3万篇
3. calc 动态高度 当组件无法撑满屏幕时，可以通过calc，如height: calc(100vh - 3.4rem), 这里的3.4rem是已知减去的高度
5.部署rms引发问题思考...
1. 部署文件不生效，首先想到的问题是部署的文件路径对不对，重复3.1万篇...
2. 有没有/需不需要刷新CDN。
3. 代码是否在有错误，打包是否成功。
4. 第一次生效了，其它时间没有生效，很可能是你的文件路径部署错了，不要部署根目录下，如根目录是/c,要部署在具体文件夹下如/c/项目目录。
6.清除sourcetree远程无用的分支
解决方法：
1、进入对应目录下，使用 git remote show origin 命令查看本地仓库追踪远程仓库的状态
2、使用 git remote prune origin 清除所有失效的远程分支或根据提示删除特定失效分支
3、重启 SourceTree 即可。
const itemFunction = function (){console.log("功能保持")} itemFunction.keep = true // 组件方法如: {click:itemFunction }
8. background-repeat: no-repeat; 设置背景时一定要加上这个属性,背景不重复,要不在移动端不同手机会出现怪异的现象
9.grid布局,待更新...
.container { 300px; height: 200px; margin: 20px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555; } .c-red { color: red; } p { background-color: rgba(189, 227, 255, 0.28); padding: 2px 5px; } /*单行*/ .single { 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } /*多行*/ .mutiple { display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/ -webkit-line-clamp: 4; /*行数，超出三行隐藏且多余的用省略号表示...*/ line-clamp: 4; word-break: break-all; overflow: hidden; max- 100%; }
11. 解决安卓手机字体不加粗
// 设置优先级 font-weight: bold !important
12.实现菜单的展开与收起及modal视图
12.1 展开与收起
部分代码如下: // 1. div 部分 <nav id="navbar"> <div class="logo"> <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="user" /> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> <!-- 菜单按钮 --> <button id="toggle" class="toggle"> <!-- 样式 --> <i class="fa fa-bars fa-2x"></i> </button> // 2. 左侧菜单栏,展示的菜单栏,设置为固定,宽度为200px,默认隐藏起来,设置水平偏移-100%,transform: translateX(-100%);也就是隐藏 css部分 :root { --modal-duration: 1s; --primary-color: #30336b; --secondary-color: #be2edd; } nav { background-color: var(--primary-color); border-right: 2px solid rgba(200, 200, 200, 0.1); color: #fff; position: fixed; top: 0; left: 0; 200px; height: 100%; z-index: 100; /* 移动-100%,也就是隐藏掉 */ transform: translateX(-100%); } // 重要,这里的css是紧挨着的,不可以有空格,水平向右偏移200px,也就是左侧菜单栏的宽度 body.show-nav { /* Width of nav */ transform: translateX(200px); } // 3. 调用js实现dom的单击事件 // 3.1 先找到菜单div const toggle = document.getElementById('toggle'); // 菜单按钮 const navbar = document.getElementById('navbar'); // navbar // 3.2 实现单击 function closeNavbar (e) { if (document.body.classList.contains('show-nav') && e.target !== toggle && !toggle.contains(e.target) && e.target !== navbar && !navbar.contains(e.target)) { document.body.classList.toggle('show-nav'); document.body.removeEventListener('click', closeNavbar); }else if (!document.body.classList.contains('show-nav')) { document.body.removeEventListener('click', closeNavbar); } } toggle.addEventListener('click', () => { document.body.classList.toggle('show-nav'); // 可以实现左边菜单关闭与打开 document.body.addEventListener('click', closeNavbar); })
展开
收起
12.2 modal视图(添加删除css,classList)
13.vue-cli从搭建到优化
https://juejin.cn/post/6844903760917954567#heading-14
14. el-tabel 校验
// 关键代码如下： <el-form :model="form" ref="form" :rules="formRules"> <el-table :data="sccForm.tableList" border> <el-table-column label="测试" width="200" align="center"> <template slot-scope="scope"> <el-form-item :prop="'tableList.' + scope.$index + '.test'" :rules="sccFormRule.scc2Pre"> <input v-model="scope.row.scc2Pre" class="input-card"/> </el-form-item> </template> </el-table-column> </el-table> </el-form> // data data () { return { form: { tableList: [] }, formRules: {test: [{ required: true, message: 'test不能为空', trigger: 'blur' }]} } }
15. dialog 对话框中滚动
// 内容滚动 ::v-deep vue专用 ::v-deep .pub-dialog-class { .el-dialog__body{max-height: 60vh;overflow: auto;} // .el-form-item { // margin-bottom: 15px; // input { // 180px; // height: 36px; // border: 1px solid #DCDFE6; // color: #7e7878; // transition: border-color .2s cubic-bezier(.645,.045,.355,1); // border-radius: 4px; // outline: none; // padding: 0 10px; // } // } } this.$nextTick(() => { let container = this.$el.querySelector('.el-table__body-wrapper'); container.scrollTop = container.scrollHeight; })
16. 使用swiper3 及swiper时要注意，使用属性loop:true,不能在dom上使用点击事件，点击的话，会导致第一张滑到最后一张时不能点击
需要在swiper里实现onClick事件
if (this.swiper) {
this.swiper.destroy();
this.swiper = null;
}
this.swiper = new Swiper(this.$refs.swiperDom, {
direction: 'vertical',
speed: 300,
autoplay: 3000,
autoplayDisableOnInteraction: false,
observer: true,
observeParents: true,
onClick: (swiper, event) => {
this.itemClick(this.swiper.realIndex);
},
loop: true
});
// css样式调整
.swiper-pagination-bullet {
margin: 0 13px;
}
17. el-upload 自定义上传，待整理
<el-upload
ref="upload"
:data="uploadData"
:file-list="fileList"
:auto-upload="false"
:action="uploadUrl"
:on-success="upSuccess"
:on-change="handleChange"
:http-request="uploadFileData"
class="upload-demo"
name="excelFile">
uploadData: {
},
uploadUrl () {
return Url地址
},
handleChange (file, fileList) {
this.fileName = file.name
this.size = file.size
this.fileList = fileList.slice(-1)
},
uploadFileAddData (content) {
var formData = new FormData()
formData.append('name', this.name)
formData.append('id', this.is)
formData.append('type', this.upLoad.type)
formData.append('excelFile', content.file)
uploadFileList(formData).then(response => {
if (response.data.responseCode === '000000') {
this.fileList[0] = content.file
this.body = response.data.body
this.fileList = []
this.fileName = ''
} else {
this.$message.error(response.data.responseMsg)
}
})
},
18. encodeURIComponent() 浏览器转码问题要注意
19. vue h5 移动端滚动不流畅，不丝滑，可以试试加上下面的css
overflow: auto;
-webkit-overflow-scrolling: touch;
20. flex布局设置 ellipsis， css如下
.item { display: flex; align-items: center; .item-text { overflow: hidden; flex: 1; white-space: nowrap; text-overflow: ellipsis; } }
21.
22.
23.