0

我正在创建一个自定义组件库，我想在多个 vue ssr 项目中共享它。

问题： 使用当前选项，我得到一个水合错误（客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。）如果我将组件包装在<no-ssr>我不想做的标签中，该错误是固定的。我之前直接在其中一个 vue 项目中拥有这些组件文件，它们可以正常工作。

不起作用的示例文件：

<template>
<div class="collapse">
    <div class="trigger" @click="handleClickEvent">
        <slot name="trigger"></slot>
    </div>
    <div :id="uniqueKey" class="details">
        <slot></slot>
    </div>
</div>
</template>

<style lang="scss" scoped>
    .collapse {

        .trigger {
            cursor: pointer;
        }
        .details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
    }
</style>

<script>
    import $ from 'bucks-js'

    export default {
        name: 'collapse',
        data: () => ({
            uniqueKey: null,
        }),
        props: {
            // if collapse should be triggered from outside
            manual: { type: Boolean, default: false },
        },
        created () {
            this.uniqueKey = 'mapify-collapse-' + $.string.random()
        },
        methods: {
            /**
             * Handles click event.
             */
            handleClickEvent () {
                // if collapse should be manual triggered , fire event and open from outside
                this.$emit('triggered')

                if (!this.manual) this.openCloseDetails()
            },
            /**
             * Open / close details collapse.
             */
            openCloseDetails () {
                if (!$.isClient()) return
                let detailsContainer = document.getElementById(this.uniqueKey)
                // check if open
                if (detailsContainer.style.maxHeight) {
                    detailsContainer.style.maxHeight = null
                } else {
                    detailsContainer.style.maxHeight = detailsContainer.scrollHeight + 'px'
                }
            },
            /**
             * Open details.
             */
            openDetails () {
                if (!$.isClient()) return
                let detailsContainer = document.getElementById(this.uniqueKey)
                detailsContainer.style.maxHeight = detailsContainer.scrollHeight + 'px'
            },
            /**
             * Close details.
             */
            closeDetails () {
                if (!$.isClient()) return
                let detailsContainer = document.getElementById(this.uniqueKey)
                detailsContainer.style.maxHeight = null
            },
        },
    }
</script>

这是我的 package.json 的一部分：

  "scripts": {
    "build": "rm -rf ./lib && vue-cli-service build --target lib src/index.js"
  },
    "dependencies": {
    "bucks-js": "^1.5.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.3",
    "@vue/cli-service": "^4.2.3",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }

我还尝试使用这个非常有用的存储库https://github.com/team-innovation/vue-sfc-rollup设置软件包，但组件不再正常工作。

4

0 回答 0