vue 在vue项目中使用less

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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的三种跳转方式

1.  router-link 

1. 不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
2.带参数
<router-link :to="{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
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参  $route.query.id
// script 取参  this.$route.query.id

2.  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语法起作用

<style scoped>
  .login-submit-button {
    background: #FFA626;
    border-radius: 4px;
    color: white;
  }
  .login-input-checkbox >>> .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #FFA626;
    border-color: #FFA626;
  }
</style>

使用深度选择器，使用 >>> 操作符，将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/ 操作符取而代之——这是一个 >>> 的别名

代码如下：

<style scoped lang="less">
  .login-submit-button {
    background: #FFA626;
    border-radius: 4px;
    color: white;
  }
  /deep/.login-input-checkbox .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #FFA626;
    border-color: #FFA626;
  }
</style>

vue 用纯js监听滚动条到底部 实现上拉加载

在移动端网页项目中，基本都会有列表页的上拉加载功能。在这篇文章中，我结合vue的生命周期用纯js写了一个监听滚动条的函数。

怎样用纯js判断滚动条是否到底部

先了解几个重点要素：

  1. 获取滚动条到顶部的位置：document.documentElement.scrollTop、document.body.scrollTop

  2. 获取当前窗口内容可视区：document.documentElement.clientHeight、document.body.clientHeight

  3. 获取滚动条的总高度：document.documentElement.scrollHeight、document.body.scrollHeight

  4. 触发监听的函数：window.onscroll = function()｛...｝

  5. 判断到底部的等式：滚动条到顶部的位置 + 当前窗口内容可视区 == 滚动条的总高度

主要代码

  1. 监听的函数

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(); 
} 
} 
},

 

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

以上是 vue 在vue项目中使用less 的全部内容， 来源链接： utcz.com/z/377783.html

回到顶部