网站颜色配色,wordpress install.php 乱码,福田区网站建设,制作网站的顺序前言
图例不只能够帮助我们在查看地图的时候更加方便容易地分辨不同颜色代表的要素#xff0c;本文要介绍的图例组件还可以按需求过滤掉不用显示的要素#xff0c;使地图的更能清晰的显示我们需要显示的内容
技术核心
说到过滤要素#xff0c;第一时间想到的就是滑块组件…前言
图例不只能够帮助我们在查看地图的时候更加方便容易地分辨不同颜色代表的要素本文要介绍的图例组件还可以按需求过滤掉不用显示的要素使地图的更能清晰的显示我们需要显示的内容
技术核心
说到过滤要素第一时间想到的就是滑块组件这里我们选择了Element-plus的Slider 滑块组件主要功能就是根据滑块背景的不同颜色滑动滑块过滤掉滑块范围以外背景颜色的要素。这里遇到一个大麻烦本来以为很容易解决的后面发现没有这么容易完成就是滑块的背景颜色添加这里想了好几种方式最后还是只能使用原生js通过操作dom实现背景颜色的添加和上下两个滑块遮罩的添加将要过滤的颜色范围遮盖掉。核心代码如下
watchEffect(() {let [min, max] sliderValue.value//为了添加滑块的遮罩达到想要的效果重点nextTick(() {let runway document.getElementsByClassName(sliderLegend)?.[0]?.querySelectorAll(.el-slider__runway)[0]if (!runway.querySelector(.maxBar)) {let div document.createElement(div)div.setAttribute(class, maxBar maskBar)runway.appendChild(div)}if (!runway.querySelector(.minBar)) {let div document.createElement(div)div.setAttribute(class, minBar maskBar)runway.appendChild(div)}let maxMaskBar document.querySelector(.maxBar)let minMaskBar document.querySelector(.minBar)if (maxMaskBar) {maxMaskBar.style.height new BigNumber(100).minus(max).toNumber() %}if (minMaskBar) {minMaskBar.style.height min %}})
})完整代码
/**
* sliderLegend.vue 可以拖动滑块过滤的图例
* Author ZhangJun
* Date 2024/1/19 9:36
**/
templateel-card classslider-block absolute right-10 bottom-10v-ifgrades.valuesgrades.values.length0stylez-index: 1000;el-space directionvertical :size20el-text sizelarge typeinfo{{ grades.desc }}{{ grades.unit }}/el-textdiv stylewidth: 60px;text-align: left;el-slider reflegendRefclasssliderLegendv-modelsliderValuechangeonChange:rangetruevertical:marksmarksv-bindoptions //div/el-space/el-card
/templatescript setup
import { ref, defineProps, computed, reactive, watchEffect, nextTick } from vue
import BigNumber from bignumber.jsconst props defineProps({gradesValues: { type: Array, default: () ([]) },//分级的value数值gradesColors: { type: Array, default: () ([]) },//分级的color数值需要与gradesValues一一对应
})const emits defineEmits([update:modeValue])let legendRef ref()//当前滑块的值
let sliderValue ref([0, 100])//间隔数值
let interval ref()//为了获取真实数据和百分比之间的映射关系
let percentage2ValueDic {}
let valueDic2Percentage {}/*** Description 生成滑块的背景颜色* Param colors 备选颜色集合* Author ZhangJun* Date 2024-01-19 01:43:56* return void**/
let generationLinearGradient computed(() {let { colors } gradeslet interval new BigNumber(1).div(colors?.length)let temp colors.map((color, index) {let percentage interval.times(index).times(100).toFixed(0) %let rgba rgba(${color[0]},${color[1]},${color[2]},${color.length 3 ? color[3] / 255 : 1})if (index 0) {return [rgba]} else {return [percentage, rgba]}})return linear-gradient(to top,${temp.flat()})
})//刻度值
const marks computed(() {//清空percentage2ValueDic {}valueDic2Percentage {}let { values, unit } gradesinterval.value new BigNumber(1).div(values?.length - 1)let marks {}values.forEach((value, index) {let percentageVal interval.value.times(index).times(100).toFixed(0)marks { ...marks, [percentageVal]: ${value} }//做映射使用percentage2ValueDic { ...percentage2ValueDic, [percentageVal]: value }valueDic2Percentage { ...valueDic2Percentage, [value]: percentageVal }})return marks
})//分级数据
let grades reactive({values: props.gradesValues,colors: props.gradesColors,unit: undefined,desc: ,
})//默认的配置参数
let options computed(() {let { values } gradeslet height (values?.length - 1) * 40height height 300 ? 300 : heightreturn {min: 0,max: 100,height: ${height}px,step: interval.value.times(100).toFixed(0),showTooltip: false,}
})/*** Description 初始化当前control* Param gradesData 分级参数* Author ZhangJun* Date 2024-01-22 09:38:17* return void**/
function initControl(gradesData) {sliderValue.value [0, 100]grades Object.assign(grades, gradesData)
}/*** Description 获取数组里面最接近这个值的数* Param arr 数组* Param target 目标值* Author ZhangJun* Date 2024-01-19 07:19:21* return void**/
function getClosestNumber(arr [], target) {let minDistance Math.abs(target - arr[0])let [closestNumber] arrfor (let i 1; i arr.length; i) {let distance Math.abs(target - arr[i])if (distance minDistance) {minDistance distanceclosestNumber arr[i]}}return closestNumber
}/*** Description 滑块数值改变* Param e 事件回调参数* Author ZhangJun* Date 2024-01-22 09:38:59* return void**/
function onChange(e) {let [min, max] elet arr Object.keys(percentage2ValueDic)min getClosestNumber(arr, min)max getClosestNumber(arr, max)emits(update:modeValue, [percentage2ValueDic[min], percentage2ValueDic[max]])
}watchEffect(() {let [min, max] sliderValue.value//为了添加滑块的遮罩达到想要的效果重点nextTick(() {let runway document.getElementsByClassName(sliderLegend)?.[0]?.querySelectorAll(.el-slider__runway)[0]if (!runway.querySelector(.maxBar)) {let div document.createElement(div)div.setAttribute(class, maxBar maskBar)runway.appendChild(div)}if (!runway.querySelector(.minBar)) {let div document.createElement(div)div.setAttribute(class, minBar maskBar)runway.appendChild(div)}let maxMaskBar document.querySelector(.maxBar)let minMaskBar document.querySelector(.minBar)if (maxMaskBar) {maxMaskBar.style.height new BigNumber(100).minus(max).toNumber() %}if (minMaskBar) {minMaskBar.style.height min %}})
})defineExpose({ initControl })/scriptstyle scoped langscss
::v-deep .el-slider__runway {background: v-bind(generationLinearGradient);.maskBar {width: 100%;height: auto;background: lightgrey;position: absolute;border-radius: 6px;}.maxBar {top: -3px;}.minBar {bottom: -3px;}
}::v-deep .el-slider__bar {background: transparent;
}
/style效果 过滤后的效果 本来原理很简单主要时间还是花费到了slider的背景颜色上还要添加一个上下滑动的遮罩才能将要过滤掉的颜色范围遮掉 本文为学习笔记仅供参考
