mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="tm-password ">
|
||||
|
||||
<view @click="show=!show" class="flex-center flex-between">
|
||||
<view class="tm-password-item flex-center "
|
||||
:class="[
|
||||
width>0?'':'mx-12',
|
||||
`round-${round}`,
|
||||
`shadow-${color_tmeme}-${shadow}`,
|
||||
model==='line'?black_tmeme?(strVal.length==index?' grey-darken-3 ':'border-grey-a-1 grey-darken-3 '):`border-${color_tmeme}-b-3`:'',
|
||||
model==='box'?(black_tmeme?(strVal.length==index?'grey-darken-3 ':'border-grey-a-1 grey-darken-3 '):(strVal.length==index?'':`border-${color_tmeme}-a-1 `)):'',
|
||||
model==='fill'?black_tmeme?'grey-darken-3 ':bgColor:'',
|
||||
|
||||
]"
|
||||
v-for="(item,index) in strLength"
|
||||
:key="index"
|
||||
:style="{
|
||||
width:width>0?'auto':(100/strLength)+'%',
|
||||
height:height+'rpx'
|
||||
}"
|
||||
>
|
||||
<view
|
||||
:style="{width:width>0?width+'rpx':'atuo'}"
|
||||
:class="[
|
||||
`round-${round}`,
|
||||
strVal.length==index?'aniOn '+(model!=='line'&&model!=='box'?`border-${color_tmeme}-a-2 shadow-${color_tmeme}-6`:''):'',
|
||||
strVal.length==index?(model=='box'?`border-${color_tmeme}-a-2 shadow-${color_tmeme}-6`:''):'',
|
||||
strVal.length==index?(model=='line'&&black_tmeme?`border-${color_tmeme}-a-2 shadow-${color_tmeme}-6`:''):'',
|
||||
]" class=" fulled fulled-height flex-center">
|
||||
<text v-if="strVal[index]&&showVal"
|
||||
class="text-weight-b text-size-lg"
|
||||
:class="[
|
||||
|
||||
black_tmeme?'text-white':`text-${textColor_tmeme}`
|
||||
]"
|
||||
>
|
||||
{{strVal[index]?strVal[index]:""}}
|
||||
</text>
|
||||
<view
|
||||
v-if="(strVal[index]&&!showVal)||(!strVal[index]&&showVal)"
|
||||
class="tm-password-item-middle "
|
||||
:class="[
|
||||
noval==='mline'?'mline round-5 ':'',
|
||||
noval==='round'?'mround rounded':'',
|
||||
'tm-password-item-middle-w',
|
||||
textColor_tmeme
|
||||
]"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<tm-keyborad @confirm="$emit('confirm',strVal)" :ok-color="color_tmeme" :model="keyboradModel" :black="black_tmeme" v-model="strVal" :decimal="false" :show.sync="show"></tm-keyborad>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 密码、验证码输入框
|
||||
* @property {String|Number} value = [] 默认：'',待输入内容，推荐使用v-model,或者value.sync
|
||||
* @property {String|Number} round = [] 默认：4,圆角
|
||||
* @property {String|Number} width = [] 默认：0,项目的宽，默认使用百分比的宽度。
|
||||
* @property {String|Number} height = [] 默认：100,项目的宽
|
||||
* @property {String|Number} shadow = [] 默认：0,投影
|
||||
* @property {Number} code-length = [] 默认：4,输入框数
|
||||
* @property {String} model = [line|box|fill] 默认：fill,外框的样式。line|box|fill
|
||||
* @property {String} noval = [mline|round] 默认：round,中间未填充数据的样式。。mline|round
|
||||
* @property {Boolean} show-val = [] 默认：false,是否展现/隐藏输入内容
|
||||
* @property {Boolean} black = [] 默认：false,暗黑模式
|
||||
* @property {String} color = [] 默认：primary,主题色
|
||||
* @property {String} bg-color = [] 默认：grey-lighten-4,输入背景主题色
|
||||
* @property {String} text-color = [] 默认：primary,文字颜色。
|
||||
* @property {String} keyborad-model = [number|password] 默认：number,键盘类型:number|password
|
||||
* @property {Function} input 输入内容时触发。
|
||||
* @property {Function} confirm 输入完内容，点击确认时触发
|
||||
* @example <tm-password v-model="num"></tm-password>
|
||||
*/
|
||||
import tmKeyborad from "@/tm-vuetify/components/tm-keyborad/tm-keyborad.vue"
|
||||
export default {
|
||||
components:{tmKeyborad},
|
||||
name:"tm-password",
|
||||
model:{
|
||||
prop:'value',
|
||||
event:'input'
|
||||
},
|
||||
props:{
|
||||
value:{
|
||||
type:String|Number,
|
||||
default:''
|
||||
},
|
||||
codeLength:{
|
||||
type:Number,
|
||||
default:4
|
||||
},
|
||||
round:{
|
||||
type:Number,
|
||||
default:4
|
||||
},
|
||||
shadow:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
bgColor:{
|
||||
type:String,
|
||||
default:'grey-lighten-4'
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:100
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
// 外框的样式。
|
||||
model:{
|
||||
type:String,
|
||||
default:'fill' //外形形状 line|box|fill
|
||||
},
|
||||
// 中间未填充数据的样式。
|
||||
noval:{
|
||||
type:String,
|
||||
default:'round' //mline|round
|
||||
},
|
||||
// 是否展现内容
|
||||
showVal:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
black:{
|
||||
type:Boolean|String,
|
||||
default:null
|
||||
},
|
||||
color:{
|
||||
type:String,
|
||||
default:'primary'
|
||||
},
|
||||
textColor:{
|
||||
type:String,
|
||||
default:'grey-darken-3'
|
||||
},
|
||||
keyboradModel:{
|
||||
type:String,
|
||||
default:'number' //number|password
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme:{
|
||||
type:Boolean|String,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
black_tmeme: function() {
|
||||
if (this.black !== null) return this.black;
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
color_tmeme:function(){
|
||||
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
textColor_tmeme:function(){
|
||||
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.textColor;
|
||||
},
|
||||
strLength:function(){
|
||||
if(this.codeLength==0||!this.codeLength) return 1;
|
||||
return this.codeLength;
|
||||
},
|
||||
strVal:{
|
||||
get:function(){
|
||||
return this.value;
|
||||
},
|
||||
set:function(val){
|
||||
let p = val;
|
||||
if(val.length > this.strLength){
|
||||
p = val.substr(0,this.strLength);;
|
||||
}
|
||||
this.$emit("input",p )
|
||||
this.$emit("update:value",p )
|
||||
}
|
||||
},
|
||||
// strCode:function(){
|
||||
// let val = this.strVal;
|
||||
// let strlen = this.strLength - this.strVal.length;
|
||||
// for(let i=0;i<strlen;i++){
|
||||
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tm-password{
|
||||
.tm-password-item{
|
||||
height: 100rpx;
|
||||
.aniOn{
|
||||
animation: easinOut 1.5s infinite linear;
|
||||
}
|
||||
.tm-password-item-middle{
|
||||
&.mline{
|
||||
width: 100%;
|
||||
height: 10upx;
|
||||
}
|
||||
&.mround{
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
}
|
||||
&.tm-password-item-middle-w{
|
||||
width: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes easinOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user