Skip to content

fix: prevent CodePens from stealing focus and scrolling the page #384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 17, 2021
Merged

fix: prevent CodePens from stealing focus and scrolling the page #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/guide/component-basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ app.mount('#components-demo')
</div>
```

<common-codepen-snippet title="Component basics: reusing components" slug="rNVqYvM" tab="html,result" :preview="false" />
<common-codepen-snippet title="Component basics: reusing components" slug="rNVqYvM" tab="result" :preview="false" />

ボタンをクリックすると、それぞれが独自の `count` を保持することに注意してください。 これはコンポーネントを使用する度に新しいコンポーネントの**インスタンス**が作成されるためです。

Expand Down Expand Up @@ -111,7 +111,7 @@ app.mount('#blog-post-demo')
</div>
```

<common-codepen-snippet title="Component basics: passing props" slug="PoqyOaX" tab="html,result" :preview="false" />
<common-codepen-snippet title="Component basics: passing props" slug="PoqyOaX" tab="result" :preview="false" />

しかしながら、一般的なアプリケーションではおそらく `data` に投稿の配列を持っています:

Expand Down Expand Up @@ -227,7 +227,7 @@ app.component('blog-post', {

`@enlarge-text="postFontSize += 0.1"` リスナによって、親コンポーネントはこのイベントを受け取り `postFontSize` の値を更新することができます。

<common-codepen-snippet title="Component basics: emitting events" slug="KKpGyrp" tab="html,result" :preview="false" />
<common-codepen-snippet title="Component basics: emitting events" slug="KKpGyrp" tab="result" :preview="false" />

コンポーネントの `emits` オプションにより発行されたイベントを一覧することができます:

Expand Down
4 changes: 2 additions & 2 deletions src/guide/component-dynamic-async.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

しかし、コンポーネントを切り替える時、コンポーネントの状態を保持したり、パフォーマンスの理由から再レンダリングを避けたいときもあるでしょう。例えば、タブインターフェースを少し拡張した場合:

<common-codepen-snippet title="Dynamic components: without keep-alive" slug="jOPjZOe" tab="html,result" :preview="false" />
<common-codepen-snippet title="Dynamic components: without keep-alive" slug="jOPjZOe" tab="html,result" />

Posts タブの投稿を選択し、 _Archive_ タブに切り替えてから _Posts_ に戻ると、選択していた投稿が表示されないことに気づくでしょう。これは、新しいタブに切り替えるたびに、Vue が `currentTabComponent` の新しいインスタンスを作成するからです。

Expand All @@ -27,7 +27,7 @@ Posts タブの投稿を選択し、 _Archive_ タブに切り替えてから _P

以下の結果を確認してみてください:

<common-codepen-snippet title="Dynamic components: with keep-alive" slug="VwLJQvP" tab="html,result" :preview="false" />
<common-codepen-snippet title="Dynamic components: with keep-alive" slug="VwLJQvP" tab="html,result" />

このように _Posts_ タブがレンダリングされていなくても、自身の状態（選択された投稿）を保持するようになります。

Expand Down
6 changes: 3 additions & 3 deletions src/guide/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Vue.createApp({

結果:

<common-codepen-snippet title="Event handling: basic" slug="xxGadPZ" tab="html,result" :preview="false" />
<common-codepen-snippet title="Event handling: basic" slug="xxGadPZ" tab="result" :preview="false" />

## メソッドイベントハンドラ

Expand Down Expand Up @@ -62,7 +62,7 @@ Vue.createApp({

結果:

<common-codepen-snippet title="Event handling: with a method" slug="jOPvmaX" tab="js,result" :preview="false" />
<common-codepen-snippet title="Event handling: with a method" slug="jOPvmaX" tab="result" :preview="false" />

## インラインメソッドハンドラ

Expand All @@ -87,7 +87,7 @@ Vue.createApp({

結果:

<common-codepen-snippet title="Event handling: with an inline handler" slug="WNvgjda" tab="html,result" :preview="false" />
<common-codepen-snippet title="Event handling: with an inline handler" slug="WNvgjda" tab="result" :preview="false" />

時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な `$event` 変数を使うことでメソッドに DOM イベントを渡すことができます:

Expand Down
2 changes: 1 addition & 1 deletion src/guide/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ Vue.createApp({
<span>Selected: {{ selected }}</span>
```

<common-codepen-snippet title="Handling forms: select bound to array" slug="gOpBXPz" tab="html,result" :preview="false" />
<common-codepen-snippet title="Handling forms: select bound to array" slug="gOpBXPz" tab="result" :preview="false" />

動的なオプションを`v-for`により描画:

Expand Down
2 changes: 1 addition & 1 deletion src/guide/list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ methods: {

結果:

<common-codepen-snippet title="v-for with a range" slug="NWqLjNY" tab="html,result" :preview="false" />
<common-codepen-snippet title="v-for with a range" slug="NWqLjNY" tab="html,result" />

## `<template>` での `v-for`

Expand Down