uview slider样式改造

 二次封装uview滑动选择器，达到UI效果（给里面的滑块，轨道添加伪类，其中动态进度的伪类必须手动获取dom，添加自定义属性）

<template>
	<view class="container">
		<view class="label">
			快捷打分
		</view>
		<view class="slider">
			<u-slider id="scoreID" v-model="fastScore" step="1" min="70" max="90"></u-slider>
		</view>
	</view>
</template>

<script>
	export default {
		name: "classReview",
		data() {
			return {
				fastScore: 80
			};
		},
		watch: {
			fastScore: {
				handler(val) {
					this.$nextTick(() => {
						console.log(document.querySelector('#scoreID .uni-slider-thumb'), '999')
						document.querySelector('#scoreID .uni-slider-thumb').setAttribute('score', val + '分')
					})

				},
				immediate: true
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;
		width: 100%;
		padding: 0 40rpx;

		.label {}

		.slider {
			width: 100%;

			::v-deep .uni-slider-tap-area {
				position: relative;

				&::before {
					position: absolute;
					content: '70分';
					top: 32rpx;
					left: -16rpx;
					font-size: 28rpx;
				}

				&::after {
					position: absolute;
					content: '90分';
					top: 28rpx;
					right: -16rpx;
					font-size: 28rpx;
				}
			}

			::v-deep .uni-slider-handle-wrapper {
				position: relative;
				z-index: 1;

				&::before {
					position: absolute;
					content: '';
					top: -8rpx;
					left: -16rpx;
					z-index: 2;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					border: 4rpx solid #155BD4;
				}

				&::after {
					position: absolute;
					content: '';
					top: -8rpx;
					right: -16rpx;
					z-index: 0;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					border: 4rpx solid #DCDEE0;
				}
			}

			::v-deep uni-slider .uni-slider-thumb {
				box-sizing: border-box;
				border: 4rpx solid #155BD4;

				&::after {
					font-size: 28rpx;
					position: absolute;
					content: attr(score);
					top: 32rpx;
					right: -50%;
					white-space: nowrap;
				}
			}

		}
	}
</style>

注意点：伪元素的content是动态值时，attr（）内的取值变量必须定义在当前的dom上

                uniapp stop阻止冒泡 必须加上@click.native.stop（题外话）