Vue初めてのスライダーですが、プロジェクトの要件はすぐにライン上にあるので、ポータルの人に言及しました、ありがとう、本当に良いです、これはPC側ですが、モバイル端末でテストされていますが適用されません、互換性のあるモバイル端末を書いたので、コードは次の記事にあります
- スライダーコンポーネントのコード
<template>
<div class="jc-component__range">
<div class="jc-range" :class="rangeStatus?'success':''" >
<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
{
{
rangeStatus?successText:startText}}
</div>
</div>
</template>
<script>
export default {
props: {
// 成功之后的函数
successFun: {
type: Function
},
//成功图标
successIcon: {
type: String,
default: 'el-icon-success'
},
//成功文字
successText: {
type: String,
default: '验证成功'
},
//开始的图标
startIcon: {
type: String,
default: 'el-icon-d-arrow-right'
},
//开始的文字
startText: {
type: String,
default: '按住滑块，拖动到最右边'
},
//失败之后的函数
errorFun: {
type: Function
},
//或者用值来进行监听
status: {
type: Boolean
}
},
data(){
return {
disX : 0,
rangeStatus: false
}
},
methods:{
//滑块移动
rangeMove(e){
let ele = e.target;
let startX = e.clientX;
let eleWidth = ele.offsetWidth;
let parentWidth = ele.parentElement.offsetWidth;
let MaxX = parentWidth - eleWidth;
if(this.rangeStatus){
//不运行
return false;
}
document.onmousemove = (e) => {
let endX = e.clientX;
this.disX = endX - startX;
if(this.disX<=0){
this.disX = 0;
}
if(this.disX>=MaxX-eleWidth){
//减去滑块的宽度,体验效果更好
this.disX = MaxX;
}
ele.style.transition = '.1s all';
ele.style.transform = 'translateX('+this.disX+'px)';
e.preventDefault();
}
document.onmouseup = ()=> {
if(this.disX !== MaxX){
ele.style.transition = '.5s all';
ele.style.transform = 'translateX(0)';
//执行成功的函数
this.errorFun && this.errorFun();
}else{
this.rangeStatus = true;
if(this.status){
this.$parent[this.status] = true;
}
//执行成功的函数
this.successFun && this.successFun();
}
document.onmousemove = null;
document.onmouseup = null;
}
},
//成功的函数
successFun(){
console.log(this.status)
this.$emit('success','ok')
}
}
};
</script>
<style lang="stylus" scoped>
@import '../../utils/css/util.styl';
.jc-range{
position: relative;
transition: 1s all;
user-select: none;
font-size:10px;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:#777C87;
line-height l(38);
display: flex;
justify-content: center;
align-items: center;
height: l(38)
box-shadow:0px 0px l(5) 0px rgba(0,0,0,0.15) inset;
background:rgba(127,160,189,0.1489);
border-radius l(8)
width l(270)
}
.jc-range i{
position: absolute;
left: 0;
width:l(60);/*no*/
border-radius:l(8);
height: 100%;
color: #000;
box-shadow:0px 0px l(5) 0px rgba(0,0,0,0.15) inset;
background-color: #8D98A3;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.jc-range.success{
background-color: #7AC23C;
color: #fff;
}
.jc-range.success i{
color: #7AC23C;
}
</style>
- 必要なページで紹介する
<jsRange status="status" v-on:success="success"></jsRange>
<script>
import jsRange from '@/components/complate/range'
export default {
components:{
jsRange
},
data () {
return {
status:false,
ifOk:false
}
},
created() {
document.title = '密码登录'
},
mounted(){
},
methods:{
//滑块
success(val){
if(val=='ok'){
this.ifOk = true
}
},
}
</script>
記録のみ。気に入らない場合はスプレーしないでください。