<template> <div style="width: 5rem"> <div class="search-menu"> <common-btn id="keywordBtn" :bg="keyword" :bg-hover="keywordHover" :select="currentSelect" width="5" height="5" text-hover="点位搜索" @click="btnClick" v-on="$listeners"/> </div> <el-input v-model="keywords" v-show="currentSelect" class="keyword-input"> <el-button slot="append" icon="el-icon-search" @click="search"></el-button> </el-input> <div v-if="currentSelect&&isResult" class="result"> <div v-for="item in resultList" :key="item.id" class="list-item" :title="item.name" @click="localPoint(item)">{{item.name}}</div> </div> </div> </template> <script> import CommonBtn from "../CommonBtn"; export default { name: 'KeywordManager', components: { CommonBtn }, props: { select: { type: Boolean, default: false }, resultList: { type: Array, default: () => ([]) } }, data() { return { currentSelect: this.select, keywords: '', isResult: false, keyword: require('@/assets/images/function/一卡通/场所搜索未选中.png'), keywordHover: require('@/assets/images/function/一卡通/场所搜索选中.png') } }, watch: { select(val) { this.currentSelect = val this.isResult = false } }, created() { this.isResult = false }, methods: { btnClick() { this.currentSelect=!this.currentSelect if(this.currentSelect){ this.$emit('changeState','keywordBtn') } }, search() { this.$emit('handleKeyword',this.keywords) this.isResult = true }, localPoint(item) { this.$emit('localPoint',item) } } } </script> <style scoped> .search-menu { display: flex; z-index: 111111111; position: relative; left: 0px; top: 0px; } .keyword-input { position: relative; width: 15rem; z-index: 999999999; margin-top: -0.25rem; -webkit-animation: vibrate-1 0.3s linear both; animation: vibrate-1 0.3s linear both; } .result { color: white; font-size: 1.5rem; width: 30rem; height: 30rem; padding: 10px; overflow-y: scroll; background: linear-gradient(to top, rgba(5, 30, 61, 0.8), rgba(13, 63, 126, 0.8)); cursor: pointer; border-radius: 10px; margin-top: 5px; -webkit-animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } .list-item { width: calc(100% - 20px); height: 3rem; line-height: 1.5rem; padding: 0.5rem 10px; margin: 5px 0; letter-spacing: 2px; background: linear-gradient(to bottom, rgba(11, 64, 131, 0.5), rgba(15, 114, 136, 0.5)); border-top: 2px solid #005a72; border-radius: 10px; word-break: break-all; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; /* 设置最大行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } </style>