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