vue2222

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--------!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

上一篇:C# 动态绘制任务栏图标的实现


下一篇:vue3 基础