61 lines
2.0 KiB
JavaScript
61 lines
2.0 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">16</div>
|
|
</div>
|
|
</div>`,
|
|
data() {
|
|
return {
|
|
hideIcon: false,
|
|
top: 0,
|
|
left: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
customMethod() {
|
|
console.log("Custom method called")
|
|
},
|
|
// 计算按钮位置
|
|
calculate(random) {
|
|
const dom = document.querySelector(".add" + random)
|
|
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)
|
|
|
|
return
|
|
const button = document.querySelector(".button")
|
|
const container = document.querySelector(".container")
|
|
const containerWidth = container.offsetWidth
|
|
const buttonWidth = button.offsetWidth
|
|
const buttonLeft = (containerWidth - buttonWidth) / 2
|
|
button.style.left = buttonLeft + "px"
|
|
},
|
|
},
|
|
}
|