ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue2222

2022-02-28 09:04:20  阅读:191  来源: 互联网

标签:use axios vant vue2222 let import reg


element获取表格的每一行数据:点击事件(scopr.row)

cnpm i vant --save 
全局安装Vant:
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

引入axios
cnpm i axios --save
import axios from "axios"
Vue.prototype.$axios=axios

请求头:
axios.interceptors.request.use(config=>{
  config.headers['Authorization']=store.state.token||''
})

3.vuex有一个专门的本地存储的插件
vuex-persist
cnpm i vuex-persist --save
store/index.js
import vuexPersist from "vuex-persist";
plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],

4.vue3引入vant
下载 
cnpm i vant@next --save
全部引入 的方式
在main.js 下
import Vant from "vant";
import "vant/lib/index.css";
注意 在use(router)的后面加上 use (Vant)就可以了
createApp(App).use(store).use(router).use(Vant).mount("#app");


背景图片::style="{backgroundImage:'url('+item.pic+')'  还要设置宽高!!!!

省略号:
   display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;

app.config.globalProperties.regTest = {
  testMobile(mobile) {
    let reg = /^1[356789]\d{9}$/; // 手机号码正则表达式
    return reg.test(mobile);
    //test是正则的方法 返回true或者false
  },
  //这个方法会得到一个验证之后的结果true或者false
  testPass(pass) {
    let reg = /^[a-zA-Z][a-zA-Z_0-9]{5,17}$/; // 6-18位的以字母开头的数字字母下划线的组合
    return reg.test(pass);
  },
  testNick(nick) {
    let reg = /^[\u4e00-\u9fa5]{2,5}$/; // 昵称正则 规定是2-5位的汉字
    return reg.test(nick);
  },
};


actions: {
    getLists(ctx) {
      getList().then((res) => {
        console.log(res);
        ctx.commit("setlist", res.data);
      });
    },
    //用action发送请求保存数据
  },
home:
  store.dispatch("getLists");
    //进入页面请求数据 dispatch 调用 action


 :class="{ sticky: isSticky }"
const scrollPage = (e) => {
      console.log(e.target.scrollTop);
      if (e.target.scrollTop > 150) {
        isSticky.value = true;
      } else {
        isSticky.value = false;
      }
    };
   //吸顶效果、

div设置滚动事件
 @scroll="scrollPage"

    const goTop = () => {
      // document.getElementById("scrollDom").scrollTop = 0;
      let scrolltop = document.getElementById("scrollDom").scrollTop;
      //获取当前滚动条的距离

      let timer = setInterval(() => {
        scrolltop -= 10;
        if (scrolltop <= 0) {
          scrolltop = 0;
          clearInterval(timer);
        }
        document.getElementById("scrollDom").scrollTop = scrolltop;
        //把每次减10的数值赋值给 这个节点的scrolltop
      }, 1);
      // 用计时器让每一毫秒减10 直到减到0的时候就为0 并清除计时器
    };
    //回到顶部效果


小时前几天前
 const transTime = (time) => {
      console.log(new Date(time));
      let oldTime = new Date(time).getTime();
      let newTime = new Date().getTime();
      let val = newTime - oldTime;
      let houresTime = 60 * 60 * 1000;
      let dayTime = 60 * 60 * 1000 * 24;
      console.log(val);
      if (val / dayTime < 1) {
        return Math.floor(val / houresTime) + "小时前";
      } else {
        return Math.floor(val / dayTime) + "天前";
      }
    };

购物车复选框  :value--------!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

标签:use,axios,vant,vue2222,let,import,reg
来源: https://blog.csdn.net/madaidai1204/article/details/123174432

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有