文章目录
vue3的一些知识点
来新公司将近快一个月了，简简单单的总结下这一月干了什么，学习了什么
首先给我比较大的感觉就是公司的人员力量比较强，基本都是阿里百度字节出来的
第二个就是技术的话算是比较新的，前端的技术栈是Vue3+Ts+Vite这一套
先简单说下我目前遇到的v3的一些知识 ， 然后在讲下我近期做的一些小需求
1 v3跳转路由
import {useRouter} from ‘vue-router’
const route = useRouter()
跳转路由 并且传递参数
route.push({ path:'/A';query:{param:A} })
在A页面获取参数
获取参数
let param = route.query.param
2 父子通信
a 父传子
子通过props接收
const props = defineProps({
data:{
type:Array,
default:[]
}
})
使用数据 props.data
b 子传父
在子组件中调用defineEmits并定义要发射给父组件的方法
const emits = defineEmits(['add1', 'decre1'])
在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数
emits('add1', num.value)
在父组件中通过@add1去调用子组件传递的方法和参数
3 wantch 监听
watch监听某个属性的变化，一旦发生变化，就会触发对应的回调函数执行，在里面进行一些具体的操作，从而达到事件监听的效果。里面有三个参数，
第一个参数是：选择要监听的属性。
第二个参数是：设置的回调函数。即监听到变化时应该执行的函数
第三个参数是：可以设置deep (深度监听) 其值为true和false。还可以设置immediate (是否以当前值执行回调函数) 其值为true和false。
1.监听ref定义的一个响应式数据
import { watch, ref } from 'vue'
setup() {
let mes = ref('会好的')
watch(mes, (new, old) => {
console.log('变化----',new, old)
}
}
2.监听ref定义的多个响应式数据
setup() {
let mes = ref('会好的')
let mess = ref('我是谁')
//第二种情况 监听ref定义的多个响应式数据
watch([mes,mess], (new, old) => {
console.log('变化----', new, old)
}
}
3.监听reactive定义的属性，会将deep：true强制开启
setup() {
let rea=reactive({
name:'我是谁',
obj:{
salary:20
}
})
//第三种情况 监听reactive定义的属性
watch(rea,(new,old)=>{
console.log('rea变化了',new,old)
})
}
4.监听reactive定义的属性（基本数据）
setup() {
let rea=reactive({
name:'我是谁',
obj:{
salary:20
}
})
//第四种情况 监听reactive定义的属性（基本数据）
watch(()=>rea.name,(new,old)=>{
console.log('名称变化===',new,old)
})
}
5.监听reactive定义的 引用数据 (需要自己开启 deep:true深度监听)
setup() {
let rea=reactive({
name:'我是谁',
obj:{
salary:20
}
})
//第五种情况 监听reactive定义的 （引用数据）
watch([()=>rea.name,()=>rea.obj],(new,old)=>{
console.log('监听reactive定义的某一些属性---',new,old)
},{deep:true})
}
4 toRefs于toRef
首先附上链接 https://juejin.cn/post/7210314492412739644
总结下 其实就是相当于将值从对象解构出来并且取出来的值具有响应式
二者 区别 toRef()只能处理一个属性,但是toRefs(源对象),却可以一次性批量处理
5 一些功能
展开收起图标
实现思路：
请求后台数据 默认截取四个数据进行展示 当 数据的长度大于4时 v-show …三个点
点击展开请求接口 展示所有数据
展开收起文字
https://www.cnblogs.com/niejunchan/p/15078198.html
循环echarts
这也是第一次 对 大量的echarts数据进行遍历
监听了父组件传来的 显示数据 当数据发生变化 执行回调 将数据push到 series中
watch(
() => props.showHotspotViewData,
() => {
series.value = [];
props.showHotspotViewData.forEach((item) => {
series.value.push({
name: item.eventName,
type: 'line',
lineStyle: {},
areaStyle: {},
emphasis: {
focus: 'series',
},
data: item.hotTrend,
});
});
dataYear.value = props.showHotspotViewData[0].hotDate;
initChart();
}
);
奇偶样式的书写
帅气的时间图
源码
<template>
<div class="time-line">
<div class="time-line-item li" v-for="item in props.data" :key="item.index">
<div class="line"></div>
<div class="circle circle-orange circle-red"></div>
<div class="desc desc-orange desc-red">
<span class="date">{{ item.gmtCreate.split("T")[0] }}</span>
<span class="content">{{ item.title }}</span>
<span class="relation">相关新闻 <span>22</span> 篇</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
data: {
type: Array,
default: [],
},
});
</script>
<style lang="scss" scoped>
.time-line {
width: 100%;
position: relative;
height: 100%;
left: 50%;
transform: translateX(-50%);
overflow-x: auto;
overflow-y: hidden;
display: flex;
justify-content: center;
align-items: center;
.time-line-item {
width: 100%;
min-width: 3rem;
// height: 110%;
float: left;
position: relative;
&:nth-child(odd) {
.desc {
width: 50%;
text-align: left;
position: absolute;
top: 0;
right: 0;
background: url("@/assets/images/desc-normal.png") no-repeat;
background-size: 100% 100%;
}
.desc-orange {
background: url("@/assets/images/desc-orange.png") no-repeat;
background-size: 100% 100%;
}
.desc-red {
background: url("@/assets/images/desc-red.png") no-repeat;
background-size: 100% 100%;
}
}
&:nth-child(even) {
.desc {
width: 50%;
text-align: left;
position: absolute;
bottom: 0;
right: 0;
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url("@/assets/images/desc-normal.png") no-repeat;
background-size: 100% 100%;
transform: rotateX(180deg);
}
}
.desc-orange {
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url("@/assets/images/desc-orange.png") no-repeat;
background-size: 100% 100%;
transform: rotateX(180deg);
}
}
.desc-red {
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url("@/assets/images/desc-red.png") no-repeat;
background-size: 100% 100%;
transform: rotateX(180deg);
}
}
}
.desc {
padding: 0.2rem 0.2rem;
cursor: pointer;
.date {
font-size: 0.2rem;
font-weight: 600;
background: linear-gradient(175.27deg, #ffffff 9.17%, #1bbaff 96.18%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.content {
width: 150%;
font-size: 0.18rem;
overflow: hidden;
text-overflow: ellipsis;
margin: 0.1rem auto;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.relation {
width: auto;
font-size: 0.16rem;
line-height: 0.3rem;
// padding: 0.05rem 0.1rem;
text-align: center;
color: #1bbaff;
background: url("@/assets/images/relationNum.png") no-repeat;
background-size: 100% 100%;
display: inline-block;
span {
font-size: 0.18rem;
font-weight: bold;
}
}
}
.line {
border-bottom: 1px dashed #2075c2;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.circle {
width: 0.2rem;
height: 0.2rem;
border-radius: 0.2rem;
background: url("@/assets/images/circle-normal.png") no-repeat;
background-size: 100% 100%;
margin: auto;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.circle-orange {
width: 0.32rem;
height: 0.32rem;
border-radius: 0.32rem;
background: url("@/assets/images/circle-orange.png") no-repeat;
background-size: 100% 100%;
}
.circle-red {
width: 0.32rem;
height: 0.32rem;
border-radius: 0.32rem;
background: url("@/assets/images/circle-red.png") no-repeat;
background-size: 100% 100%;
}
}
}
</style>
desc-normal.png
circle-normal.png
关键字的高亮
效果
思想 利用数组的 split 和 join方法
1 将 字符串以 关键词 格式分割成数组
2 将 数组以 关键词 格式还原成字符串
源码
<div id="content">
长河浸月千仞孤鸿渡弹指点晕开残风无数棋盘纵横交错几回命人途倾盖如故谁人识曲误衣袂拂弦 弦动晦朔荣枯
</div>
<input type="text" id="text" placeholder="请输入关键字" />
<input type="button" id="button" value="确定" />
<script>
// 获取标签
var content = document.getElementById("content");
// 获取标签中的文本内容
var contents = content.innerHTML;
// 获取输入框
var text = document.getElementById("text");
// 获取button
var button = document.getElementById("button");
// 给button绑定点击事件
button.onclick = function ()
{
// 获取输入框中的内容
var value = text.value;
// 将内容 以关键词的形式 分割成数组 '长河浸月千仞孤鸿渡弹指点晕开残风无数棋盘纵横交错几回命人途倾盖如故谁人识曲误衣袂拂弦 弦动晦朔荣枯'.split('人')
// ['长河浸月千仞孤鸿渡弹指点晕开残风无数棋盘纵横交错几回命', '途倾盖如故谁', '识曲误衣袂拂弦 弦动晦朔荣枯']
var values = contents.split(value);
// 将数组 以 关键词的形式 组合成字符串 ['长河浸月千仞孤鸿渡弹指点晕开残风无数棋盘纵横交错几回命', '途倾盖如故谁', '识曲误衣袂拂弦 弦动晦朔荣枯'].join('ren')
// '长河浸月千仞孤鸿渡弹指点晕开残风无数棋盘纵横交错几回命ren途倾盖如故谁ren识曲误衣袂拂弦 弦动晦朔荣枯'
content.innerHTML = values.join('<span style="color:red;">' + value + '</span>');
};
正则替换
const reg = new RegExp('哈', 'g');
document.write('哈111哈111哈111哈哈哈111'.replace(reg, "<span style='color:red'>嘻嘻</span>"));
效果
递归获取数据
递归去获取数据 根据id 取 label
<!--
* @Author: zhangchao zhang_chao96@163.com
* @Date: 2023-04-06 16:12:18
* @LastEditors: zhangchao zhang_chao96@163.com
* @LastEditTime: 2023-04-06 16:24:15
* @FilePath: \code\ilabel_frontend\src\views\labelDefine\labelManage\getData.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script>
const obj = {
id: 0,
label: '根',
children: [
{
id: 101,
label: '一级1',
},
{
id: 102,
label: '一级2',
children: [
{
id: 1001,
label: '二级1'
},
{
id: 1002,
label: '二级2',
children: [
{
id: 10021,
label: '三级1'
},
{
id: 10022,
label: '三级2'
}
]
}
]
}
]
}
/**
* @param flag:条件值
* @param obj:数据源
* @param isGetLabel 是否获取label 调用时,传false 根据label获取id
* @return 对应id的label值
**/
function getLabel (flag, obj, isGetLabel = true)
{
let result = [],
root = []
//将根数据获取出来
root.push({
id: obj.id,
label: obj.label
})
//将children中的数据处理出来和root合并为result
if (!!obj.children && obj.children.length > 0) {
result = root.concat(getChild(obj.children))
}
//针对result筛选出目标值
if (isGetLabel) {
console.log(result.filter(item => (item.id == flag))[0].label)
return result.filter(item => (item.id == flag))[0].label
} else {
console.log(result.filter(item => (item.label == flag))[0].id)
return result.filter(item => (item.label == flag))[0].id
}
}
function getChild (array)
{
let childrenResult = []
if (array.length > 0) {
array.map(item =>
{
childrenResult.push({
id: item.id,
label: item.label
})
//如果item的children有值，则再次补全数据
if (!!item.children && item.children.length > 0) {
childrenResult = childrenResult.concat(getChild(item.children))
}
})
}
return childrenResult
}
getLabel(10021, obj)
</script>
6 响应式的空框架
地图方面的简单理解
坐标系 3857 4326
坐标系详解
https://blog.csdn.net/qq_36410795/article/details/106429109
学习文档
http://linwei.xyz/ol3-primer/ch03/03-07.html
3857 4326坐标系之间的转换
openlayers 地图默认使用 3857坐标系（墨卡托坐标系） <===> 我们常用的 4326坐标系（WGS84坐标系）
附 转换链接
https://blog.csdn.net/qq_39404437/article/details/123372993
如何加载百度地图 高德地图（包括离线的百度地图）
直接使用的模板
有时候在框架中使用需要引用一堆东西
import { Map, View } from 'ol';
import * as ol from 'ol';
import TileGrid from 'ol/tilegrid/TileGrid';
import TileImage from 'ol/source/TileImage';
import Tile from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
// import Point from 'ol/geom/Point';
// import VectorSource from 'ol/source/Vector';
// import Feature from 'ol/Feature';
// import VectorLayer from 'ol/layer/Vector';
import Circle from 'ol/style/Circle';
// import Icon from 'ol/style/Icon';
// import Style from 'ol/style/Style';
// import Text from 'ol/style/Text';
import Fill from 'ol/style/Fill';
// import CircleStyle from 'ol/style/CircleStyle';
// import { Circle as CircleStyle } from 'ol/style';
// import Stroke from 'ol/style/Stroke';
// import TileLayer from 'ol/layer/Tile';
// import XYZ from 'ol/source/XYZ'; //xyz
import { Icon, Style } from 'ol/style';
import 'ol/ol.css';
加载在线的高德地图
<template>
<div id="map"></div>
</template>
<script>
// 引入依赖
// import proj from 'ol'
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ' //xyz
export default {
name: 'HelloWorld',
props: {
msg: String
},
// 挂载
mounted() {
this.initMap()
},
methods: {
// 初始化底图map
initMap() {
// 初始化地图
const map = new Map({
layers: [
new TileLayer({
visible: true,
source: new XYZ({
visible: true,
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
})
})
],
target: 'map',
view: new View({
center: [12914838.35,4814529.9],
zoom: 8,
maxZoom: 18,
projection: 'EPSG:3857',
constrainResolution: true, // 设置缩放级别为整数
smoothResolutionConstraint: false, // 关闭无级缩放地图
}),
});
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* map容器撑开 */
#map {
width: 100%;
height: 100%;
}
</style>
加载在线的百度地图
<!--
* @Date: 2023-03-29 17:17:06
* @LastEditors: zhangchao zhang_chao96@163.com
* @LastEditTime: 2023-03-30 08:22:57
* @FilePath: /vue3练习/vue3/src/text.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"
type="text/css" />
<style>
.map {
height: 800px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<meta charset="UTF-8" />
<title>openlay加载百度地图</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions,
});
var baidu_source = new ol.source.TileImage({
projection: "EPSG:3857",
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord)
{
if (!tileCoord) {
return "";
}
var z = tileCoord[0];
var x = tileCoord[1];
var y = -tileCoord[2] - 1;
if (x < 0) {
x = "M" + -x;
}
if (y < 0) {
y = "M" + -y;
}
return (
"http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
x +
"&y=" +
y +
"&z=" +
z +
"&styles=pl&udt=20151021&scaler=1&p=1"
);
},
});
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
title: "百度地图",
source: baidu_source,
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([118.386, 31.366]),
zoom: 3,
}),
});
</script>
</body>
</html>
967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
