<template>
|
<div>
|
<div class="searchBox">
|
<el-input class="custom-input" placeholder="请输入内容" v-model="searchContent">
|
<template #suffix>
|
<el-icon @click="getSearchResult" class="hover"><Search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="resultBox">
|
<div v-for="result in searchResult" :key="result.id">
|
<div class="phone_con">
|
<div class="per-phone">英/<span>{{result.ukPhone}}</span>/</div>
|
<div class="per-phone">美/<span>{{result.usPhone}}</span>/</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, reactive, watch, onMounted, inject } from 'vue'
|
const request = inject('request')
|
const props = defineProps({
|
searchCon: Boolean
|
})
|
const searchContent = ref('')
|
const isFull = ref(false)
|
watch(props, (newValue) => {
|
// 统监听props的值变化，动态修改isShow的值
|
searchContent.value = newValue.searchCon
|
})
|
|
const searchResult = ref([])
|
|
const getSearchResult = () => {
|
if (searchContent.value) {
|
request({
|
url: '/edu/api/FindWords',
|
method: 'post',
|
data: {
|
word: searchContent.value,
|
isFull: isFull.value
|
}
|
}).then((res) => {
|
console.log(JSON.parse(res[0].sentence)[0].sCn)
|
// encodeURIComponent(res[0].syno[0].tran)
|
if (res.length > 0) {
|
searchResult.value = res
|
}
|
})
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.searchBox {
|
width: 400px;
|
margin: 0 auto;
|
.custom-input {
|
height: 40px;
|
|
.el-input__wrapper {
|
border-radius: 10px;
|
width: 100%;
|
}
|
.multiselect__single {
|
background: none;
|
color: #2a2b2e;
|
font-size: 0.15rem;
|
font-weight: 500;
|
margin-bottom: 8px;
|
padding-left: 5px;
|
}
|
}
|
}
|
.resultBox{
|
.phone_con{
|
.per-phone{
|
width:150px;
|
align-items: center;
|
background: #f4f5f7;
|
border-radius: 15px;
|
box-sizing: border-box;
|
color: #666;
|
display: flex;
|
font-weight: 500;
|
margin-right: 10px;
|
margin-top: 10px;
|
// max-width: 100%;
|
padding: 8px 10px;
|
}
|
}
|
}
|
</style>
|
