<div class="solidBox" :class="{'solidBox1': validation}">
? ? <div @mousedown="solidStar" class="solid" :class="{'solid1': validation}"></div>
? ? {{!validation? textStart : textEnd}}
</div>

.solidBox {
? ? ? ? ? position: relative;
? ? ? ? ? display: flex;
? ? ? ? ? justify-content: center;
? ? ? ? ? align-items: center;
? ? ? ? ? margin: 20px 0;
? ? ? ? ? width: 100%;
? ? ? ? ? height: 35px;
? ? ? ? ? background-color: #999999;
? ? ? ? ? .solid {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? width: 35px;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? border: 1px solid #666666;
? ? ? ? ? ? background: url("/img/切图2/arrow2.png") center no-repeat;
? ? ? ? ? ? background-color: #ffffff;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? }
? ? ? ? ? .solid1 {
? ? ? ? ? ? background: url("/img/切图2/ok.png") center no-repeat;
? ? ? ? ? ? background-size: 100%;
? ? ? ? ? ? border: 1px solid #358097;
? ? ? ? ? }
? ? ? ? }
? ? ? ? .solidBox1 {
? ? ? ? ? color: #ffffff;
? ? ? ? ? background-color: #1aad19;
? ? ? ? }

//鼠标按下时
solidStar(e) {
? ? ? // console.log(e);
? ? ? // 获取当前DOM元素宽度 鼠标当前点击位置
? ? ? let solidDom = e.target;
? ? ? let moveStart = e.clientX;
? ? ? let solidDomWith = solidDom.offsetWidth;
? ? ? // 父节点减去滑块宽度获取滑块最大移动距离
? ? ? let MaxW = e.path[1].clientWidth - solidDomWith;
? ? ? // 设置判断条件 防止验证成功后鼠标移动方法继续被调用
? ? ? if (this.validation === true) {
? ? ? ? return false;
? ? ? }
? ? ? // 鼠标移动
? ? ? (document.onmousemove = e => {
? ? ? ? // 获取移动时鼠标距离浏览器左上角到当前位置的X轴距离
? ? ? ? let endX = e.clientX;
? ? ? ? // 从上面获取到的数据计算出鼠标移动的距离
? ? ? ? this.moveX = endX - moveStart;
? ? ? ? // 判断如果用户反方向移动将移动距离赋值为零
? ? ? ? if (this.moveX <= 0) {
? ? ? ? ? this.moveX = 0;
? ? ? ? }
? ? ? ? // 判断如果滑块移动距离大于最大宽度 ?给其赋值最大宽度
? ? ? ? if (this.moveX >= MaxW) {
? ? ? ? ? this.moveX = MaxW;
? ? ? ? }
? ? ? ? // 为了更好地体验 写上动画 要不都不写 ?不然其他动画会覆盖向右拖拽动作
? ? ? ? solidDom.style.transition = "0s all";
? ? ? ? solidDom.style.left = this.moveX + "px";
? ? ? ? // 很关键的地方 e.preventDefault()这个方法会关闭与当前事件关联的其他动作 只执行此事件
? ? ? ? e.preventDefault();
? ? ? }),
? ? ? ? // 鼠标抬起
? ? ? ? (document.onmouseup = () => {
? ? ? ? ? // 如果鼠标抬起后拖拽距离没到可移动距离最大值将返回起点0
? ? ? ? ? if (this.moveX !== MaxW) {
? ? ? ? ? ? solidDom.style.transition = ".5s linear";
? ? ? ? ? ? solidDom.style.left = 0;
? ? ? ? ? } else {
? ? ? ? ? ? // 如果成功设置判断条件
? ? ? ? ? ? this.validation = true;
? ? ? ? ? }
? ? ? ? ? // 动作完成后将事件清空
? ? ? ? ? document.onmousemove = null;
? ? ? ? ? document.onmouseup = null;
? ? ? ? });
? ? }

export default {
? name: "twologin",
? data() {
? ? return {
? ? ? loginBoxShow: true,
? ? ? isActive: 0,
? ? ? userName: "",
? ? ? psd: "",
? ? ? input1: "",
? ? ? input2: "",
? ? ? select: "",
? ? ? validation: false,
? ? ? textStart: "向右拖动滑块",
? ? ? textEnd: "验证成功",
? ? ? moveX: 0
? ? };
? },