134 lines
4.4 KiB
JavaScript
134 lines
4.4 KiB
JavaScript
const base = {
|
|
template: `
|
|
<div class="red-dot" v-if="hideIcon" :style="{top: top + 'px',left: left + 'px'}"></div>
|
|
<div class="base flexcenter">
|
|
<div class="left flexacenter">
|
|
<div class="text flex1">搜索项目</div>
|
|
<img class="img" src="/img/search-black-icon.svg" />
|
|
</div>
|
|
<div class="rigth flexacenter">
|
|
<img class="img" src="/img/contrast-icon.png" />
|
|
<div class="text">项目对比</div>
|
|
<div class="number">{{ count }}</div>
|
|
</div>
|
|
</div>`,
|
|
data() {
|
|
return {
|
|
hideIcon: false,
|
|
top: 0,
|
|
left: 0,
|
|
count: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
customMethod() {
|
|
console.log("Custom method called")
|
|
},
|
|
// 计算按钮位置
|
|
calculate(random, count) {
|
|
this.count = count
|
|
|
|
const dom = document.querySelector(".add" + random)
|
|
if (!dom) return
|
|
|
|
const rect = dom.getBoundingClientRect()
|
|
const top = rect.top + rect.height / 2 - 5
|
|
const left = rect.left + rect.width / 2 - 5
|
|
this.top = top
|
|
this.left = left
|
|
this.hideIcon = true
|
|
|
|
setTimeout(() => {
|
|
const dom = document.querySelector(".base .number")
|
|
const rect = dom.getBoundingClientRect()
|
|
const top = rect.top + rect.height / 2 - 5
|
|
const left = rect.left + rect.width / 2 - 5
|
|
this.top = top
|
|
this.left = left
|
|
}, 10)
|
|
|
|
setTimeout(() => {
|
|
this.top = null
|
|
this.left = null
|
|
this.hideIcon = false
|
|
}, 330)
|
|
},
|
|
},
|
|
}
|
|
|
|
const textModule = {
|
|
template: `<div class="text-box block">
|
|
<div ref="textRef" class="text textRef">{{ text }}</div>
|
|
<div class="text-head" v-if="title">
|
|
<img class="text-icon" src="/img/triangle-red.svg" />
|
|
{{ title }}
|
|
</div>
|
|
<div v-if="!isswiper" class="text" :class="{'text-center': text.length < 3}">{{ text }}</div>
|
|
<div v-else class="text-list" ref="listRef">
|
|
<div class="text" v-for="(item,index) in page" :style="{'transform': 'translateY(-' + index * h + 'px)'}">{{ text }}</div>
|
|
</div>
|
|
<div v-if="isswiper" class="indicate flexcenter">
|
|
<img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
|
|
<div class="text">{{ current }}/{{ page.length }}</div>
|
|
<img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
|
|
</div>
|
|
</div>`,
|
|
props: ["text", "title"],
|
|
setup(props) {
|
|
console.log(props.text)
|
|
// let text = ref(`55`)
|
|
const textRef = ref(null)
|
|
let page = ref(0)
|
|
let h = ref(0)
|
|
let isswiper = ref(false)
|
|
|
|
onMounted(() => {
|
|
console.log("props", props)
|
|
if (props.text.length < 20) return
|
|
const lineHeight = 32
|
|
const height = lineHeight * 10
|
|
|
|
const pagecount = textRef.value.clientHeight / height
|
|
|
|
let arr = []
|
|
|
|
for (let i = 0; i < Math.floor(pagecount); i++) {
|
|
arr.push(height)
|
|
}
|
|
|
|
const decimalPart = parseFloat("0." + pagecount.toString().split(".")[1])
|
|
if (decimalPart > 0) arr.push(height * decimalPart)
|
|
page.value = arr
|
|
h.value = height
|
|
isswiper.value = arr.length > 1 ? true : false
|
|
})
|
|
|
|
const listRef = ref(null)
|
|
let current = ref(1)
|
|
const cutHotListPage = type => {
|
|
if (type == "left") {
|
|
if (current.value > 1) current.value--
|
|
} else {
|
|
if (current.value < page.value.length) current.value++
|
|
}
|
|
listRef.value.scrollTo({
|
|
left: 640 * (current.value - 1),
|
|
behavior: "smooth",
|
|
})
|
|
}
|
|
|
|
// 计算
|
|
const reversedMessage = type => {
|
|
if (type == "left") {
|
|
if (current.value == 1) return "/img/arrows-triangle-gray.svg"
|
|
else return "/img/arrows-triangle-red.png"
|
|
} else {
|
|
if (current.value == page.value.length) return "/img/arrows-triangle-gray.svg"
|
|
else return "/img/arrows-triangle-red.png"
|
|
}
|
|
}
|
|
|
|
return { reversedMessage, cutHotListPage, textRef, isswiper, h, page, current, listRef }
|
|
},
|
|
}
|