vue-router跳转时打开新页面
let routeUrl = router.resolve({ path: '/', query: {} });
window.open(routeUrl.href, '_blank');elementui树形控件实现单选叶子节点
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree
:data="peopledata"
show-checkbox
node-key="id"
ref="tree"
:filter-node-method="filterNode"
check-on-click-node
@check-change="handleNodeClick"
:props="defaultProps">
</el-tree>data(){
return{
defaultProps: {
children: "children",
label: "name",
value: "id",
},
filterText:'',
peopledata: [],
selectNode:{}
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods:{
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
handleNodeClick(data, checked) {
if (checked) {
this.selectNode={}
const a = this.$refs.tree.getNode(data.id);
if (a.childNodes.length == 0) {
this.$refs.tree.setCheckedKeys([]);
this.$refs.tree.setCheckedNodes([data])
this.selectNode = data
}else{
this.$refs.tree.setCheckedKeys([]);
}
}
},
}实时时间
setInterval(function () {
let Datetime = new Date();
let Y = Datetime.getFullYear() + '-';
let M = (Datetime.getMonth() + 1 < 10 ? '0' + (Datetime.getMonth() + 1) : Datetime.getMonth() + 1) + '-';
let D = (Datetime.getDate() < 10 ? '0' + Datetime.getDate() : +Datetime.getDate()) + ' ';
let H = (Datetime.getHours() < 10 ? '0' + Datetime.getHours() : +Datetime.getHours()) + ':';
let m = (Datetime.getMinutes() < 10 ? '0' + Datetime.getMinutes() : +Datetime.getMinutes()) + ':';
let s = Datetime.getSeconds() < 10 ? '0' + Datetime.getSeconds() : +Datetime.getSeconds();
time.value = Y + M + D + H + m + s;
}, 1000);实时天气
高德天气查询API
官方文档：https://lbs.amap.com/api/webservice/guide/api/weatherinfo/#t1
参数：①key：官网申请；②city：城市编码https://lbs.amap.com/api/webservice/download
③extensions：气象类型，base实况天气，all预报天气；④output：返回格式JSON或XML
axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${userkey}&city=${citycode}&extensions=all`).then((res) => {
console.log(res.data, '天气数据');
});elementui表格标题或内容换行
在需要换行的文字中间加上 \n 换行符
样式添加
:deep(.el-table) {
.cell {
white-space: pre-line; /*保留换行符*/
}
}vue3表格滚动vue3-seamless-scroll
安装
npm install vue3-seamless-scroll --save引入
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';使用
<el-table class="top" :data="tableData">
<el-table-column type="index" width="40px" label="序号" />
<el-table-column prop="renYuanLeiXing" label="人员类型" width="80px" ></el-table-column>
<el-table-column prop="xingMing" label="姓名" width="60px"></el-table-column>
<el-table-column prop="lianXiDianHua" label="手机号码" width="90px"> </el-table-column>
<el-table-column prop="xianrenzhiwuGongzhong" label="工种" ></el-table-column>
<el-table-column prop="sanJiJiaoYuShiJuan" label="三级教育" ></el-table-column>
<el-table-column prop="gangQianJiaoYuShiJuan " label="岗前教育" > </el-table-column>
</el-table>
<div class="bottom" style="height: calc(100% - 30px); overflow: hidden">
<Vue3SeamlessScroll ref="vueSeamlessRef" :list="tableData" :hover="true" :step="2" class="scroll-list-seamless">
<el-table :show-header="true" :cell-style="{ 'text-align': 'center' }" ref="datalist" :row-style="{ height: '16px' }" style="width: 100%" v-loading="loading" :data="tableData">
<el-table-column type="index" width="40px" label="序号" />
<el-table-column prop="renYuanLeiXing" label="人员类型" width="80px" ></el-table-column>
<el-table-column prop="xingMing" label="姓名" width="60px"></el-table-column>
<el-table-column prop="lianXiDianHua" label="手机号码" width="90px"> </el-table-column>
<el-table-column prop="xianrenzhiwuGongzhong" label="工种" ></el-table-column>
<el-table-column prop="sanJiJiaoYuShiJuan" label="三级教育" ></el-table-column>
<el-table-column prop="gangQianJiaoYuShiJuan " label="岗前教育" > </el-table-column>
</el-table>
</Vue3SeamlessScroll>
</div>vue2表格滚动tableScroll
tableScroll(table, speed = 30) {
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
let timer;
const startScroll = () => {
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
clearInterval(timer);
timer = setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, speed);
};
startScroll();
//鼠标移入
divData.onmouseover = () => {
clearInterval(timer);
};
//鼠标移出
divData.onmouseout = () => {
clearInterval(timer);
startScroll();
};
//窗口发生改变
window.onresize = () => {
return (() => {
window.screenHeight = document.body.clientHeight;
document.clientHeight = window.screenHeight;
})();
};
},使用
this.tableScroll(this.$refs.group, 45)文本滚动（自动滚动函数）
const contentRef = ref();
//自动滚动函数
const Autoscroll = (dom:any) => {
const setInter = function () {
if (dom.scrollTop+1 > dom.scrollHeight - dom.clientHeight) {
dom.scrollTop = 0;
} else {
dom.scrollTop++;
}
};
timer.value && clearInterval(timer.value);
timer.value = setInterval(setInter, 100);
dom.addEventListener('mouseover', function () {
timer.value && clearInterval(timer.value);
});
dom.addEventListener('mouseout', function () {
timer.value = setInterval(setInter, 100);
});
};调用
Autoscroll(contentRef.value);echarts数据切换
var option = Chart3.getOption()
var a=[
{
value:1,name:"外部检测",
},{
value:4,name:"内部检测",
}]
option.series[0].data=a
Chart3.setOption(option,true);前端记住密码功能
安装crypto-js
npm install --save crypto-js加密方法(判断记住密码是否勾选，已勾选就加密并存储在cookie，未勾选则清理cookie)
import * as CryptoJS from 'crypto-js';
if (ischecked.value) {
var loginform={
password:state.ruleForm.password,
username:state.ruleForm.username
}
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(loginform),'pigxpigxpigxpigx').toString();
console.log(ciphertext,'加密后');
setCookie(ciphertext, 7); //加密后存储在cookie
} else {
// 清理cookie
clearCookie()
} // 设置cookie
const setCookie=(params:string, days:number)=> {
var date = new Date(); // 获取时间
date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // 保存的天数
// 字符串拼接cookie
window.document.cookie = 'user' + '=' + params + ';path=/;expires=' + date;
}
const clearCookie=()=> {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
console.log('keys', keys);
if (keys) {
for (var i = keys.length; i--;) {
document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString(); //清除当前域名下的
}
}
}解密并回显用户名及密码(登录组件挂载时调用)
// 获取cookie
const getCookie=()=> {
if (document.cookie.length != 0) {
let arr = document.cookie.split('; '); //分割成一个个独立的“key=value”的形式
for (let i = 0; i < arr.length; i++) {
let index = arr[i].indexOf('=');
if (index !== -1) {
if (arr[i].substring(0, index) == 'user') {
var ciphertext = arr[i].substring(index + 1, arr[i].length);
var bytes = CryptoJS.AES.decrypt(ciphertext, 'pigxpigxpigxpigx');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
console.log('解密后', decryptedData);
state.ruleForm.password=decryptedData.password
state.ruleForm.username=decryptedData.username
ischecked.value = true;
}
}
}
}
}input框自动填充后背景颜色改变
场景：input 自动填充账号密码，选择完账号之后输入框的会有背景颜色
:deep(.el-input__inner) {
-webkit-text-fill-color: #ededed !important;
background-color: transparent !important;
transition: background-color 50000s ease-in-out 0s;
}
//或者
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #ededed !important;
}手动上传流文件
function uploadSectionFile(val){
const formData=new FormData()
formData.append('file',val)//val是二进制流
upload(formData).then((res)=>{
//上传成功
})
}
4860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
