thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
components/firstui/fui-slide-verify/fui-slide-verify.vue Normal file
View File

@ -0,0 +1,382 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-slideverify__wrap" :style="{width:totalWidth+'px',height:height+'rpx',background:background}">
<text class="fui-sv__text-tip" :style="{fontSize:size+'rpx',background:getBackground,color:color}"
:class="{'fui-sv__opacity':isPass}">拖动滑块至虚线框内</text>
<!-- #ifdef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__foreground" ref="foreground" :class="{'fui-sv__background':!getActiveBgColor}"
:style="{background:getActiveBgColor}">
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__foreground" :class="{'fui-sv__background':!getActiveBgColor,'fui-sv__reset-ani':resetAni}"
:style="{background:getActiveBgColor,width:fwidth+'px'}">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text :class="{'fui-sv__opacity':!isPass}" class="fui-sv__text-res"
:style="{fontSize:size+'rpx',color:activeColor,lineHeight:height+'rpx',width:passWidth+'px'}">验证通过</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :class="{'fui-sv__opacity':!isPass}" class="fui-sv__text-res"
:style="{fontSize:size+'rpx',color:activeColor}">验证通过</text>
<!-- #endif -->
<text :class="{'fui-sv__opacity':isPass}" class="fui-sv__text-cover"
:style="{width:totalWidth+'px',fontSize:size+'rpx',height:height+'rpx',lineHeight:height+'rpx',color:activeColor}">拖动滑块至虚线框内</text>
</view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-sv__slider" :class="{'fui-sv__border-color':!getPassColor && isPass}"
:style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor}" :change:prop="parse.slidereset"
:prop="resetNum" :data-width="totalWidth" :data-tleft="targetWidth" :data-swidth="sliderW"
:data-pass="isPass?1:0" :data-range="range" @touchstart="parse.touchstart" @touchmove="parse.touchmove"
@touchend="parse.touchend" @mousedown="parse.mousedown">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="getPassColor" primary :size="iconSize" v-else></fui-icon>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-sv__slider" @touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend"
ref="slider" :style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor}">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="getPassColor" :size="iconSize" v-else></fui-icon>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__slider"
:class="{'fui-sv__border-color':!getPassColor && isPass,'fui-sv__reset-ani':resetAni}"
:style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor,transform:transform}"
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="getPassColor" primary :size="iconSize" v-else></fui-icon>
</view>
<!-- #endif -->
<view class="fui-sv__dotted-box"
:style="{'border-color':lineColor,'border-width':isPass?0:'1px',width:sliderW+'px',left:(targetWidth-sliderW)+'px'}">
</view>
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="parse" lang="wxs"></script>
<!-- #endif -->
<script>
import weex from './weex.js'
import mpjs from './mpjs.js'
//非easycom模式取消注释引入字体组件，按实际路径进行调整
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
name: "fui-slide-verify",
mixins: [mpjs, weex],
emits: ['success', 'fail'],
// components:{
// fuiIcon
// },
props: {
range: {
type: [Number, String],
default: 3
},
error: {
type: [Number, String],
default: 3
},
width: {
type: [Number, String],
default: 640
},
height: {
type: [Number, String],
default: 80
},
background: {
type: String,
default: "#EEEEEE"
},
activeBgColor: {
type: String,
default: ""
},
sliderWidth: {
type: [Number, String],
default: 80
},
sliderBgColor: {
type: String,
default: "#FFFFFF"
},
borderColor: {
type: String,
default: '#EEEEEE'
},
passColor: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 28
},
color: {
type: String,
default: "#333333"
},
activeColor: {
type: String,
default: "#FFFFFF"
},
iconSize: {
type: [Number, String],
default: 48
},
arrowColor: {
type: String,
default: "#B2B2B2"
},
lineColor: {
type: String,
default: "#B2B2B2"
}
},
computed: {
getBackground() {
// #ifndef APP-NVUE
return `-webkit-gradient(linear, left top, right top, color-stop(0, ${this.color}), color-stop(.4, ${this.color}), color-stop(.5, white), color-stop(.6, ${this.color}), color-stop(1, ${this.color}))`
// #endif
// #ifdef APP-NVUE
return 'transparent'
// #endif
},
getActiveBgColor() {
let color = this.activeBgColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
},
getPassColor(){
let color = this.passColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
watch: {
width(val) {
this.totalWidth = this.getPx(val)
},
sliderWidth(val) {
this.sliderW = this.getPx(val)
}
},
data() {
return {
totalWidth: 0,
targetWidth: 0,
sliderW: 0,
isPass: false,
resetNum: 0,
times: 0
};
},
created() {
this.totalWidth = this.getPx(this.width)
this.sliderW = this.getPx(this.sliderWidth)
this.changeTargetPosi()
},
methods: {
getPx(value) {
let val = parseInt(uni.upx2px(Number(value)))
return val % 2 === 0 ? val : val + 1
},
changeTargetPosi() {
let range = Array.from(new Array(100 + 1).keys()).slice(50);
let index = Math.floor((Math.random() * range.length));
let width = uni.upx2px(parseInt((this.width * (range[index] || 100)) / 100))
width = width <= this.sliderW ? this.sliderW + 20 : width
this.targetWidth = parseInt(width)
},
reset() {
this.resetNum += 1
this.isPass = false;
this.times = 0
this.changeTargetPosi()
},
success() {
this.isPass = true;
this.$emit('success', {})
},
fail() {
this.times++;
if (this.times >= Number(this.error)) {
this.changeTargetPosi()
this.times = 0
}
this.$emit('fail', {})
}
}
}
</script>
<style scoped>
.fui-slideverify__wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.fui-sv__text-tip {
font-weight: normal;
width: 338rpx;
text-align: center;
opacity: 1;
/* #ifndef APP-NVUE */
white-space: nowrap;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-webkit-animation: ani_sv 2s infinite;
/* #endif */
}
/* #ifndef APP-NVUE */
@-webkit-keyframes ani_sv {
from {
background-position: -160rpx;
}
to {
background-position: 160rpx;
}
}
@keyframes ani_sv {
from {
background-position: -160rpx;
}
to {
background-position: 160rpx;
}
}
.fui-sv__background {
background: var(--fui-color-primary, #465CFF) !important;
}
.fui-sv__border-color {
border-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
.fui-sv__foreground {
width: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
}
.fui-sv__text-res {
opacity: 1;
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
text-align: center;
font-weight: normal;
/* #ifdef APP-NVUE */
position: absolute;
left: 0;
top: 0;
/* #endif */
}
.fui-sv__slider {
/* #ifndef APP-NVUE */
display: flex;
z-index: 3;
box-sizing: border-box;
/* #endif */
align-items: center;
justify-content: center;
border-width: 1rpx;
border-style: solid;
background: #FFFFFF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
transition-property: border-color;
transition-duration: 0.08s;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-sv__dotted-box {
position: absolute;
top: 0;
bottom: 0;
z-index: 5;
border-style: dashed;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
transition-property: left;
transition-duration: 0.2s;
}
.fui-sv__opacity {
opacity: 0 !important;
}
.fui-sv__text-cover {
/* #ifndef APP-NVUE */
display: flex;
white-space: nowrap;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
position: absolute;
left: 0;
top: 0;
font-weight: normal;
opacity: 1;
}
/* #ifndef APP-NVUE */
.fui-sv__reset-ani {
transition: transform 0.2s;
}
/* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-sv__un-ani {
transition: transform 0s;
}
/* #endif */
</style>