123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <div class="jc-component__range">
- <div class="jc-range" :class="rangeStatus?'success':''" >
- <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
- <span style="margin-left: 20px;">{{rangeStatus?successText:startText}}</span>
- </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: String
- }
- },
- 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;
- }
- }
- }
- };
- </script>
- <style scoped>
- .jc-flex{
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .jc-flex >>> .el-form-item__content {
- line-height: 70px !important;
- }
- .jc-component__range i{
- position: absolute;
- left: 0;
- width: 50px;/*no*/
- height: 70px;
- color: #3fcd26;
- background-color: #fff;
- border: 1px solid #d8d8d8;
- cursor: pointer;
- line-height: 70px;
- font-size: 24px;
- }
- .success{
- background-color: #3bc923;
- color: #fff;
- line-height: 70px;
- }
- .jc-component__range.jc-range{
- background-color: #e9e9e9;
- position: relative;
- transition: 1s all;
- user-select: none;
- color: #585858;
- @include jc-flex;
- height: 70px; /*no*/
- }
- .jc-range {
- line-height: 70px !important;
- }
- .success i{
- color: #3bc923;
- line-height: 70px;
- margin-left: 10px;
- }
- .el-icon-d-arrow-right:before,
- .el-icon-success:before {
- margin-left: 10px;
- }
- </style>
|