COVID-19 自己検出システムの Web デザインおよび開発ドキュメント

Vue.js をベースにした Sylvan Ding の最初のプロジェクト。このプロジェクトで提供される情報は参照のみを目的としており、情報の正確性、有効性、適時性、完全性は保証されません。詳細については、国家衛生健康委員会委員会を参照してください。 Webサイト！
ドキュメントを参照する »

デモを表示する·バグを報告する·機能をリクエストする

ホームページ

ElementUI をリファクタリングして、DatePicker 日付選択コンポーネントが親コンポーネントの配置パラメーターを変更する問題を解決します。

を使用するとel-date-picker、ブラウザコンソールから vue 警告が送信されます。

... Prop being mutated: "placement" found in <ElDatePicker> ...

開発環境

ノード	14.16.1
npm	8.18.0
ビュー-cli	2.9.6
ビュー	2.5.2

解決

この問題は、最新の element-ui (v2.15.9)placementが子コンポーネントのvue props を変更するために発生date-pickerしました。これは、親コンポーネントが再レンダリングされるたびに値が上書きされるため、vue では許可されていません。この問題の原因となるソースコードは次のようになります。

// node_modules/element-ui/packages/date-picker/src/picker.vue

const NewPopper = {
    
    
  props: {
    
    
    placement: Popper.props.placement,
  },
};

const PLACEMENT_MAP = {
    
    
  left: 'bottom-start',
  center: 'bottom',
  right: 'bottom-end'
};

export default {
    
    
  created() {
    
    
    // vue-popper
    this.popperOptions = {
    
    
      boundariesPadding: 0,
      gpuAcceleration: false
    };
    this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;

    this.$on('fieldReset', this.handleFieldReset);
  },
}

this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;props が変更されていることに注意してくださいplacement。#21943に従ってこのコードを単純にミュートするだけで問題を解決します。

patch-packagenpm の依存関係に対する修正を作成および保持するために使用します。

# install patch-package
npm i patch-package -D --legacy-peer-deps

GitHub でelement-ui リリースv2.15.9node_modules/element-uiをダウンロードし、ダウンロードした git リポジトリに上記の変更を加え、element-ui を再構築して、次の lib フォルダーを上書きします。

cd /path/to/your/repo
npm install --legacy-peer-deps
vim packages/date-picker/src/picker.vue
npm run dist
mv -f /path/to/your/repo/lib /path/to/your/project/node_modules/element-ui/lib

注意！element-ui git リポジトリの依存関係のバージョンは、node-sassノードのバージョンと一致する必要があります。これについては、ノードバージョンのサポートポリシーで説明されています。エラーがスローされないように、リポジトリ内の package.json を変更します。

次に、element-ui の lib フォルダーを置き換えた後、依存関係内のこのバグを修正し、次を実行します。

# use npx (included with npm > 5.2) to create a .patch file
npx patch-package element-ui

# patch-package 6.4.7
# • Creating temporary folder
# • Installing [email protected] with npm
# • Diffing your files with clean files
# ✔ Created file patches/element-ui+2.15.9.patch

初めてを使用する場合は、アプリのルートディレクトリにpatch-packageというフォルダーが作成されます。patches中にはという名前のファイルがありelement-ui+2.15.9.patch、これは通常の古いパッケージ名と修正バージョンの差分です。これをコミットしてチームと修正を共有します。

# commit the patch file to share the fix with your team
git add patches/element-ui+2.15.9.patch
git commit -m "fix picker.vue in [email protected]"

でpackage.json、次の変更を加えて、依存関係を再インストールするときに変更が確実に保持されるようにします。

 "scripts": {
+  "postinstall": "patch-package"
 }