推文按钮呈现得太晚答案

【问题标题】：Tweet button is getting rendered too late推文按钮呈现得太晚
【发布时间】：2021-08-05 08:54:29
【问题描述】：

我在我的网站上使用了一个用 Vue.js 编写的推文按钮，并遇到了这个问题，起初，按钮显示时没有适当的样式，只是一个普通的锚标记文本，过了一会儿，它变成了原来的样子时尚版。这是我写的组件：

<template>
    <span v-html="tweetButton">
</template>

<script>
    export default {
        name: "MyComponent",
        mounted() {
            this.renderTweetButton()
        },
        watch: {
            twitter(newVal, oldVal) {
                if (newVal.widgets) {
                    newVal.widgets.load()
                }
            }
        },
        data() {
            return {
                tweetButton: null,
                twitter: {}
            }
        },
        methods: {
            renderTweetButton() {
                this.tweetButton = `<a
                    class="twitter-share-button"
                    data-via="Example"
                    data-size="medium"
                    data-text="Check this out!"
                    data-url="https://example.com"
                    href="https://twitter.com/intent/tweet">
                  Tweet</a>`

                this.twitter = (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0],
                        t = window.twttr || {};
                    if (d.getElementById(id)) return t;
                    js = d.createElement(s);
                    js.async = false;
                    js.id = id;
                    js.src = "https://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);

                    t._e = [];
                    t.ready = function(f) {
                        t._e.push(f);
                    };

                    return t;
                }(document, "script", "twitter-wjs"))
            }
        }
    }
</script>

<style scoped>

</style>

所以我只是想知道是否有办法在按钮完全加载之前不显示按钮？

【问题讨论】：

由于您似乎正在下载按钮，因此将下载它的调用包装在异步函数中。 dl 完成后，使用 v-if 设置一个布尔值以显示按钮。

标签： vue.js button twitter vuejs2

【解决方案1】：

由于在脚本加载时目标锚元素会被 Twitter 小部件自动替换，因此您可以使用 display:none 样式隐藏锚点以避免无样式内容的闪烁：

this.tweetButton = `<a style="display: none" ...>`

demo

【讨论】：