需求
需要一個iput框輸入，離焦或回車后生成一個標(biāo)簽森渐，提交時判斷符不符合規(guī)則
思路
input框的值不能為數(shù)組做入，所以用一個div設(shè)置樣式模擬輸入框，隱藏輸入框的樣式同衣；前半段循環(huán)顯示tag, 利用@keyup.enter="addTags" （回車）和@blur="addTags"（離焦）添加tag, 規(guī)則判斷需要用到循環(huán)竟块；
缺點
在輸入值時未驗證，需改進
代碼
<template>
<div style="width:800px">
<el-form ref="form" :model="form" label-width="120px" :rules="rule">
<el-form-item label="白名單" prop="allowedHosts">
<div class="contaion" @click="onclick">
<!-- 生成的標(biāo)簽 -->
<div v-for="(item, index) in form.allowedHosts" :key="index" class="spanbox">
<span class="tagspan">{{ item }}</span>
<i class="iClose" @click="removeTag(item,index)"></i>
</div>
<!-- 輸入框 -->
<input
v-model="form.inputValue"
@keyup.enter="addTags"
@blur="addTags"
:style="inputStyle"
class="inputTag"
ref="inputTag"
type="text"
/>
</div>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props:{
allowedHosts:{
type:Object,
}
},
data(){
var validIp = (rule, value, callback) => {
var ipreg = /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/;
if (value.length > 0) {
let flag = true;
value.forEach(item => {
if (item != "*" && !ipreg.test(item) ) {
flag = false;
}
})
if (!flag) {
callback(new Error("白名單中含有錯誤的IP地址耐齐，請重新輸入"));
} else {
callback();
}
}else{
callback(new Error("請輸入白名單"));
}
};
return{
form:{
allowedHosts:[], //tag
inputValue: "", //輸入框
},
//輸入框?qū)挾? inputLength: "",
//計算刪除位置
n: 0,
rule:{
allowedHosts:[{required:true,message:'請輸入需要加入白名單的主機',trigger:'change'},
{ required: true, validator: validIp, trigger: "change" }],
}
}
},
watch: {
//監(jiān)聽輸入的值越多浪秘，輸入框越長
"form.inputValue"(val) {
// 實時改變input輸入框?qū)挾冉椋乐馆斎雰?nèi)容超出input默認(rèn)寬度顯示不全
this.inputLength = this.$refs.inputTag.value.length * 12 + 50;
},
},
computed: {
//計算屬性：計算出動態(tài)輸入框?qū)挾? inputStyle() {
let style = {};
style.width = `${this.inputLength}px`;
return style;
}
},
methods:{
//點擊叉叉刪除tag
removeTag(item,index) {
this.form.allowedHosts.splice(index, 1);
},
//回車增加tag
addTags() {
//新增函數(shù)中可以加一些你所需要的校驗規(guī)則。比如只能是數(shù)子耸携，或者不能輸入‘棵癣，’等
if (this.form.inputValue) {
//添加tag
this.form.allowedHosts.push(this.form.inputValue);
//清空輸入框
this.form.inputValue = "";
}
},
//點擊父盒子輸入框獲取焦點
onclick() {
this.$nextTick(() => {
this.$refs.inputTag.focus();
})
}
}
}
</script>
<style scoped>
.contaion {
width: 600px;
box-sizing: border-box;
background-color: white;
border: 1px solid #409EFF;
border-radius: 4px;
font-size: 12px;
text-align: left;
padding-left: 5px;
word-wrap: break-word;
overflow: hidden;
}
/* 標(biāo)簽 */
.spanbox {
display: inline-block;
font-size: 14px;
margin: 3px 4px 3px 0;
background-color: #ecf5ff;
border: 1px solid #e8eaec;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
/* 標(biāo)簽文字 */
.tagspan {
height: 24px;
line-height: 22px;
max-width: 99%;
position: relative;
display: inline-block;
padding-left: 8px;
color: #409EFF;
font-size: 14px;
opacity: 1;
vertical-align: middle;
overflow: hidden;
transition: 0.25s linear;
}
/* tag的叉叉 */
.iClose {
padding: 0 6px 0 4px;
opacity: 1;
-webkit-filter: none;
filter: none;
color: #409EFF;
/* font-weight: 600; */
cursor:pointer;
}
/* 鼠標(biāo)經(jīng)過叉叉 */
.iClose:hover{
background-color: #409EFF;
border-radius: 50%;
color: #fff;
}
.iClose:after {
content: "\00D7";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* line-height: 27px; */
transition: 0.3s, color 0s;
}
/* input */
.inputTag {
font-size: 16px;
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
width: auto;
min-width: 150px;
vertical-align: top;
height: 32px;
color: #495060;
line-height: 32px;
}
/* 輸入框提示文字大小 */
input:placeholder-shown {
font-size: 10px;
}
</style>
結(jié)果
image.png
