实用的组件——手写原生的调整字体组件

component系列——调整字体

先放效果图：

组件是用vue写的哦，字体分为0,1,2,3档：

<template>
    <div class="component-set-font-size">
	    <div class="range-box">
	    	<div class="bar" ref="barBox">
	    		<span class="top1" :class="{'active': !size}">A</span>
	    		<span class="top2" :class="{'active': size === 1}">A</span>
	    		<span class="top3" :class="{'active': size === 2}">A</span>
	    		<span class="top4" :class="{'active': size === 3}">A</span>
	    		<div ref="moveBar" class="move-box" :class="`type${size}`">
	    			<div></div>
	    		</div>
	    		<span class="text1" :class="{'active': !size}">标准</span>
	    		<span class="text2" :class="{'active': size === 1}">中</span>
	    		<span class="text3" :class="{'active': size === 2}">大</span>
	    		<span class="text4" :class="{'active': size === 3}">超大</span>
	    	</div>
	    </div>
    </div>
</template>

<script>
import {setFontSize} from '../../js/common/setting'
/**
 * 设置字体组件
 */
export default {
	name: 'set-font-size',
	data: function() {
		return {
			size: this.initSize
		};
	},
	props: {
		initSize: {
			type: Number,
			default: 0
		}
	},
	methos: {},
	mounted (){
		const vm = this
		/**
		 * [$moveBar 拖动设置字体大小逻辑]
		 * @type {[type]}
		 */
		const $moveBar = $$(this.$refs.moveBar)
		// 可拖动的总宽度
		const BOX_WIDTH = $$(this.$refs.barBox).width()
		const equalVal = Number((BOX_WIDTH / 6).toFixed(2))
		// 初始距离左边距离
		let LEFT = vm.size * 2 * equalVal
		// 初始点击的时候距离本身最左边的距离
		let OFFSET_LEFT = 0

		// 拖动开始
		$moveBar.touchstart((e) => {
			OFFSET_LEFT = e.touches[0].pageX - LEFT
		})
		// 拖动中
		$moveBar.touchmove((e) => {
			const { pageX } = e.touches[0]
			let setLeft = pageX - OFFSET_LEFT

			setLeft <= 0 && (setLeft = 0)
			setLeft >= (BOX_WIDTH + 10) && (setLeft = BOX_WIDTH)
			$moveBar.css('left', `${setLeft}px`)
			LEFT = setLeft
		})
		// 拖动结束
		$moveBar.touchend((e) => {
			const vm = this
			const num = Number((LEFT / equalVal).toFixed(2))

			// 标准字体大小
			if (num <= 1){
				vm.size = 0
				LEFT = 0
				$moveBar.css('left', 0)
			}

			// 中号字体
			if (num > 1 && num <= 3){
				vm.size = 1
				LEFT = BOX_WIDTH * 0.333
				$moveBar.css('left', '33.3%')
			}

			// 大号字体
			if (num > 3 && num <= 5){
				vm.size = 2
				LEFT = BOX_WIDTH * 0.666
				$moveBar.css('left', '66.6%')
			}

			// 超大号字体
			if (num > 5){
				vm.size = 3
				$moveBar.css('left', '100%')
				LEFT = BOX_WIDTH
			}
			// 设置预览字体大小
			setFontSize(vm.size)
			vm.$emit('update_size', vm.size)
		})
	}
}
</script>

<style scoped lang="less">
	@import '../../less/core/base.less';
	@baseColor: #74CDFF;
	.component-set-font-size{
		padding:48px 30px 60px;
		height: 145px;
		background: @bg-fff;
		box-sizing: border-box;
		color: @text-333 / 3 * 5;
		font-size: 14px;

		.range-box{
			padding: 12px 0 15px;
			position: relative;
			div.bar{
				background: @baseColor;
				height: 6px;
				border-radius: 3px;
				position: relative;
				.move-box{
					position: absolute;
					width: 40px;
					padding: 48px 10px 60px;
					box-sizing: border-box;
					z-index: 10;
					left: 0;
					top: -55px;
					margin-left: -20px;
					// -webkit-transition: all 0.3s ease;
					// transition: all 0.3s ease;

					&.type1{
						left: 33.3%;
					}

					&.type2{
						left: 66.6%;
					}

					&.type3{
						left: 100%;
					}

					div{
						width: 20px;
						height: 20px;
						box-sizing: border-box;
						border-radius: 10px;
						border: 3px solid @baseColor;
						z-index: 10;
						background: @bg-fff;
					}
				}
				span{
					position: absolute;
					display: inline-block;
					line-height: 1;
					&.top1{
						top: -30px;
						width: 20px;
						text-align: center;
						left: -10px;
					}

					&.top2{
						top: -32px;
						width: 20px;
						text-align: center;
						left: 33.3%;
						margin-left: -10px;
						font-size: 16px;
					}

					&.top3{
						top: -34px;
						width: 20px;
						text-align: center;
						left: 66.6%;
						margin-left: -10px;
						font-size: 18px;
					}

					&.top4{
						top: -36px;
						width: 20px;
						text-align: center;
						right: 0;
						margin-right: -10px;
						font-size: 20px;
					}

					&.text1{
						bottom: -30px;
						width: 30px;
						text-align: center;
						left: -15px;
					}

					&.text2{
						bottom: -31px;
						width: 70px;
						text-align: center;
						left: 33.3%;
						margin-left: -35px;
						font-size: 16px;
					}

					&.text3{
						bottom: -32px;
						width: 70px;
						text-align: center;
						left: 66.6%;
						margin-left: -35px;
						font-size: 18px;
					}

					&.text4{
						bottom: -33px;
						text-align: center;
						font-size: 20px;
						right: -15px;
						width: auto;
					}

					&.active{
						color: @baseColor;
					}
				}
			}
		}
	}
</style>

/**
 * [setFontSize 抽离设置全局字体大小的逻辑，多处调用]
 * @param {[Number]} type [description]
 * 字体大小分四挡：
 * type: 0 -> 14px
 * type: 1 -> 16px
 * type: 2 -> 18px
 * type: 3 -> 20px
 */
function setFontSize (type){
    const $html = $$('html');
    !type && $html.css('font-size', '10px');
    if(window.screen.width < 375){
        1 == type && $html.css('font-size', `${(15 / 1.4).toFixed(2)}px`);
        2 == type && $html.css('font-size', `${(16 / 1.4).toFixed(2)}px`);
        3 == type && $html.css('font-size', `${(17 / 1.4).toFixed(2)}px`);
    }else{
        1 == type && $html.css('font-size', `${(16 / 1.4).toFixed(2)}px`);
        2 == type && $html.css('font-size', `${(18 / 1.4).toFixed(2)}px`);
        3 == type && $html.css('font-size', `${(20 / 1.4).toFixed(2)}px`);
    }
}