效果圖如上。GitHub地址(包括打包成瀏覽器組件),感謝支持!!!
在開發中,我們可能會經常遇到 驗證碼組件,上圖就是我們設計師給的 UI
Remark:具體效果要看需求、樣式還是要自己修改一下(可以自己傳入 props 定義驗證碼的長度。)
-------------------------------------------
之前有小夥伴說沒有效果,是因爲我是貼了項目上的部分代碼,顏色都是白色,現在已經設置了 #323232 , 可以直接看見效果啦。(!!!注意父級樣式影響哦)
-------------------------------------------
方式一:直接 npm 安裝使用
npm install @auspicious/vue-vercode
引入組件
<template>
<div>
<VueVercode :codeLength="6" />
</div>
</template>
<script>
import VueVercode from "@auspicious/vue-vercode";
export default {
components: {
VueVercode
}
};
</script>
<style>
</style>
方式二:源碼引用
<template>
<div class="code-input-main">
<div
class="code-input-main-item"
v-for="(item,index) in codeList"
:key="index"
>{{code[index] ||''}}</div>
<input class="code-input-input" v-model="code" maxlength="6" type="number" />
</div>
</template>
<script>
export default {
name: "CodeInput",
props: {
codeLength: {
default: 6,
type: Number
}
},
data() {
return {
codeList: [],
code: ""
};
},
mounted() {
// 定義一個數組用於循環
this.codeList = new Array(this.codeLength).fill("");
},
watch: {
// 截取字符長度
code() {
if (this.code.length > this.codeLength) {
this.code = this.code.substring(0, this.codeLength);
}
}
},
methods: {
getCode() {
return this.code;
}
}
};
</script>
<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
.code-input-main {
display: flex;
flex-direction: row;
justify-content: space-around;
position: relative;
}
.code-input-input {
height: 44px;
width: 100%;
position: absolute;
border: none;
outline: none;
color: transparent;
background-color: transparent;
text-shadow: 0 0 0 transparent;
}
.code-input-main-item {
width: 34px;
height: 44px;
margin: 0 5px;
padding-bottom: 0;
opacity: 0.8;
border-bottom: solid #323232 1px;
text-align: center;
font-size: 30px;
color: #323232;
}
</style>