基于vue3.0和element-plus的IP地址输入框
程序员文章站
2024-01-02 21:24:52
...
<template>
<div class="my_ip_address_input">
<template v-for="index in indexes" :key="index">
<el-input v-model="ipAddress[index]"
@keyup="handleChange"
oninput="value=value.replace(/[^\d]/g,'')&&value>255?255:value"/>
<span v-if="index!==3">.</span>
</template>
</div>
</template>
<script>
import {defineComponent, ref} from "vue";
const indexes=[0,1,2,3]
export default defineComponent({
name: "MyIpAddressInput",
props: {
value: {
type: String,
default: ""
}
},
setup(props,ctx) {
const ipAddress = ref([])
ipAddress.value = props.value.split(".")
const handleChange = () => {
console.log(ipAddress.value.join("."))
ctx.emit("update:value",ipAddress.value.join("."))
}
return {
ipAddress,
handleChange,
indexes
}
}
})
</script>
<style lang="scss">
@import "src/assets/element-variables";
.my_ip_address_input {
border-radius: 4px;
width:100%
display: inline-block;
border: 1px solid #DCDFE6;
.el-input {
width: 24%;
}
.el-input__inner {
border: none !important;
text-align: center;
}
}
.my_ip_address_input:hover {
border-color: $--input-focus-border;
}
.my_ip_address_input:focus-within {
border-color: $--input-focus-border;
}
</style>