}
};
</script>
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.search {
overflow-y: scroll;
overflow-x: hidden;
padding: 0.14rem 0.12rem 0.53rem;
.header {
border-bottom: 0.01rem solid #f2f2f2;
.head-title {
padding-bottom: 0.05rem;
color: #666666;
}
.head-input {
width: 100%;
padding-bottom: 0.1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
> input {
height: 0.29rem;
width: 2.84rem;
border-radius: 0.03rem;
background-color: #f6f6f6;
font-family: PingFang-SC-Regular;
font-weight: Regular;
color: #999999;
font-size: 0.12rem;
padding-left: 0.12rem;
}
.input-btn {
color: #029ffb;
width: 0.5rem;
height: 0.29rem;
line-height: 0.29rem;
text-align: center;
}
}
.history-panel {
width: 100%;
overflow: hidden;
padding: 0.1rem 0;
border-top: 1px solid #f2f2f2;
.his_ulcon {
margin-top: 0.1rem;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
> li {
border: 1px solid #f2f2f2;
border-radius: 0.03rem;
display: inline-block;
font-size: 0.12rem;
padding: 0 0.15rem;
width: fit-content; //div宽度自适应文字内容
width: -webkit-fit-content;
width: -moz-fit-content;
height: 0.29rem;
line-height: 0.29rem;
text-align: center;
margin-right: 0.1rem;
background-color: #f2f2f2;
margin-bottom: 0.1rem;
}
}
div {
box-sizing: border-box;
font-size: 0.13rem;
color: #666666;
font-weight: Medium;
font-family: PingFang-SC-Medium;
}
> p {
text-align: center;
margin-top: 0.1rem;
font-size: 0.13rem;
}
}
.history-tips {
text-align: center;
}
}
.title-style {
font-size: 0.13rem;
font-weight: Medium;
font-family: PingFang-SC-Medium;
}
}
</style>
温馨提示:引入cache.js时你的文件路径要按照你自己的路径来 一 一对应
总结
以上所述是小编给大家介绍的Vue 实现输入框新增搜索历史记录功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
