【Vant的Rem适配方案】
Rem适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值.
PostCSS 配置
1.在根目录下新建一个postcss.config.js
2.下载
npm install postcss-pxtorem --save-dev
3.在postcss.config.js中粘贴以下代码片段
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
//这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
propList: ['*']
}
}
}
设置基准值lib-flexinle
1.下载
npm i -S amfe-flexible
2.在main.js中引入
import 'amfe-flexible'
这样就完成适配了*
更多适配问题参考：https://www.cnblogs.com/lyzg/p/4877277.html
https://www.cnblogs.com/lyzg/p/5058356.html
库：https://github.com/amfe/lib-flexible
在vue项目中使用less
1.安装 less 和 less-loader。
命令: npm install less less-loader --save-dev
上述存在版本问题
npm i less@3 less-loader@5 --save-dev
2.打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面
添加一段：{test: /\.less$/,loader: "style-loader!css-loader!less-loader" }
3.代码中的 style 标签中 加上 lang=”less” 属性即可使用,或者通过@import引入.less文件
vue-router的三种跳转方式
- router-link
1. 不带参数
"{name:'home'}">
"{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
2.带参数
"{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
"{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
- this.$router.push() (函数里面调用)
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
3. this.$router.replace() (用法同上,push)
4. this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
ps : 区别
this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
vue修改vant自带的样式
今天用vue写页面时，发现使用vant的有些UI组件，修改CSS样式无效。
解决办法：
1.对于css语法起作用
使用深度选择器，使用 >>> 操作符，将scoped样式中的选择器”深入”，即影
响子组件
上述代码将会编译成：
.login-input-checkbox[data-v-ef68022e] .van-checkbox__icon--checked .van-icon {
color: #fff;
background-color: #FFA626;
border-color: #FFA626;
}
而不是错误的：
.login-input-checkbox .van-checkbox__icon--checked .van-icon[data-v-ef68022e] {
color: #fff;
background-color: #FFA626;
border-color: #FFA626;
}
2.对于scss，less这类的预处理器
使用 /deep/ 操作符取而代之——这是一个 >>> 的别名
代码如下：
vue 用纯js监听滚动条到底部 实现上拉加载
在移动端网页项目中，基本都会有列表页的上拉加载功能。在这篇文章中，我结合vue的生命周期用纯js写了一个监听滚动条的函数。
怎样用纯js判断滚动条是否到底部
先了解几个重点要素：
- 获取滚动条到顶部的位置：
document.documentElement.scrollTop、document.body.scrollTop - 获取当前窗口内容可视区：
document.documentElement.clientHeight、document.body.clientHeight - 获取滚动条的总高度：
document.documentElement.scrollHeight、document.body.scrollHeight - 触发监听的函数：
window.onscroll = function()｛...｝ - 判断到底部的等式：滚动条到顶部的位置 + 当前窗口内容可视区 == 滚动条的总高度
主要代码
- 监听的函数
aa
为窗口添加滚动条事件其实非常的简单，
window.onscroll=function(){};
注意在获取滚动条距离的时候
谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
这样才能兼容各个浏览器！
created() {
let that = this;
window.onscroll = function(e){
var e =e || window.event;
// scrollTop 滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// windowHeight 可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// scrollHeight 滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 滚动条到底部的条件
if(Math.abs(scrollTop + windowHeight - scrollHeight) < 100){
// 加载数据 that.loadMore();
}
}
},
undefined
2.data
VUE3
setUp函数
- 使用Composition API 的入口
- 在beforeCreate之前调用
- 在setup中没有this
- 返回对象中的属性刻在模板中使用
import { ref, getCurrentInstance } from 'vue'
import { loginUser, rules } from '../utils/loginValidators'
// import { loginUser } from '@/utils/loginValidators.ts'
export default {
name: "LoginRegister",
components: {},
setup(){
// @ts-ignore
const { ctx } = getCurrentInstance();
const signUpMode = ref(true);
// 触发登录方法
const handlerLogin = (formName) => {
console.log(formName, ctx);
ctx.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
};
return { signUpMode, loginUser, rules, handlerLogin };
}
}
解读Composition API：https://baijiahao.baidu.com/s?id=1661851149274618678&wfr=spider&for=pc
Original: https://www.cnblogs.com/jiangxiaobo/p/14084856.html
Author: jiangxiaobo
Title: vue
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/552150/
转载文章受原作者版权保护。转载请注明原作者出处！