Question

我有一个Vue应用。当我使用vue-cli在本地（vue-cli-service serve上投放服务时，该应用正常运行。

如果我将其构建为Web组件： vue-cli-service build --target wc --name my-app ./src/App.vue

并查看dist文件夹中生成的demo.html页面，组件将渲染该页面。但是，如果我单击输入框以使用日期选择器组件（我尝试了3个不同的组件，并且都出现了这个问题，这就是为什么我想知道构建步骤是否存在问题），该组件会打开并立即关闭。

如果我切换标签页，然后回到demo.html标签页，则日期选择器将关闭。

最好在视频中显示问题： https://www.youtube.com/watch?v=OgUYDasUjlo&feature=youtu.be

我已经尝试过vue-ctk-date-time-picker和vue-date-pick组件以及其他组件，所有这些都给了我这个问题。

我已经尝试在这些组件的“关闭”事件中记录日志，并且看到它触发了很多次。我可以切换标签并返回到demo.html，然后关闭事件触发30次。很难看到这里发生了什么，因为没有错误消息。

组件Vue

          <b-row class="mt-3">
            <b-col lg="1"></b-col>
            <b-col cols="4">
              <b-form-group label-cols-sm="3" label="Schedule" label-align-sm="right" label-class="font-weight-bold pt-0" class="mb-0">                
                <DatePick 
                v-model="selectedDate"
                ></DatePick>
              </b-form-group>
            </b-col>
          </b-row>

package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --target wc --name my-app ./src/App-Main.vue",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.25",
    "core-js": "^2.6.5",
    "swagger-client": "^3.9.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-ctk-date-time-picker": "^2.1.1",
    "vue-date-pick": "^1.1.0",
    "vue-moment": "^4.0.0",
    "vue-multiselect": "^2.1.6",
    "vue-property-decorator": "^8.1.0"
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.9.2",
    "@vue/cli-plugin-typescript": "^3.9.0",
    "@vue/cli-plugin-unit-jest": "^3.9.0",
    "@vue/cli-service": "^3.9.2",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-jest": "^23.0.0",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.2",
    "vue-template-compiler": "^2.6.10"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "vue",
      "ts",
      "tsx"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.tsx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "testMatch": [
      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
    ],
    "testURL": "http://localhost/",
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "globals": {
      "ts-jest": {
        "babelConfig": true
      }
    }
  }
}

控制台中没有错误。

使用vue组件的内部版本时，组件会闪烁并消失（投放时没有问题）

0 个答案: