方案1：
<template>
<nuxt-link ref="imgBox" v-if="isLink" class="img-box" target="_blank" :to="{ path: ${link}}">
<img v-lazyload="$filter.imgCdn(src)" :alt="title" :title="title" />
</nuxt-link>
<div ref="imgBox" v-else class="img-box">
<img v-lazyload="$filter.imgCdn(src)" :title="title" alt="title" />
</div>
</template>
<script>
export default {
props: ['link', 'src', 'title'],
// data () {
// return {
// }
// },
// methods: {
// },
// mounted () {
// },
computed: {
isLink () {
return this.link !== undefined // link 有可能是null或者''
}
}
}
</script>
<style lang="scss" type="text/scss">
</style>
方案2：有問題挑童。
<template>
<nuxt-link ref="imgBox" v-if="isLink" class="img-box" target="_blank" :to="{ path: ${link}}">
<img v-lazyload="$filter.imgCdn(src)" :alt="title" :title="title" />
</nuxt-link>
<div ref="imgBox" v-else class="img-box">
<img v-lazyload="$filter.imgCdn(src)" :title="title" alt="title" />
</div>
</template>
<script>
export default {
props: ['link', 'src', 'title'],
data () {
return {
isLink: null
}
},
methods: {
},
mounted () {
if (this.$refs.imgBox.hasAttribute('href')) { //取到的值一直是false缔刹，在mounted之前組件isLink已經(jīng)確定，dom元素也跟著確定
this.isLink = true
} else {
this.isLink = false
}
},
computed: {
// isLink () {
// console.log(this.$refs.img) //$refs 只在組件渲染完成后才填充，并且它是非響應(yīng)式的玛荞。它僅僅是一個(gè)直接操作子組件的應(yīng)急方案——應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用 $refs。
// }
}
}
</script>
<style lang="scss" type="text/scss">
</style>
