Tweet 按钮呈现得太晚了

Question

我在我的网站上使用写在 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>

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

Answer 1

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

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

demo

Tweet 按钮呈现得太晚了

Tweet button is getting rendered too late

twitter

button

vue.js

vuejs2