Confirm始まるアセンブリ、プラグイン可能なコンポーネントを書き込むためのステップバイステップ。
（そのようなファンドを購入するアリペイなど）、通常の支払いプロセスへの対処
- 購入ボタンをクリックします
- リスクレベルが一致しない場合：爆弾の確認ボックスを（確認）
- ユーザーのリスクを確認した後：支払いオプションは、ポップ・ポップを（ダイアログ）
- ポップ呼び出しの指紋認証（ダイアログ）：支払方法を選択した後
- パスワードを入力するように要求（ダイアログ）：あなたは、指紋認証を閉じた場合
- パスワードを入力するポップアップキーボード（カスタムキーボード）
- もちろん、パスワードの残業があります
- パスワードを入力した場合、誤ってプロンプトポップアップ/再試行（確認）を変更
- キーボードは再びポップアップし...
6つのポップについて...
商品のスプレッド（ライト）
まず、共通の登録コンポーネントを達成しようとします
Confirmv-model="isShow"ショーに切り替える@onConfirmと、onCancelクリックイベントを受け取ります。
コンポーネントのコード
<template>
<div v-if="value">
<slot></slot>
<div>
<div @click="cancelHandler">{{cancelTxt}}</div>
<div @click="confirmHandler">{{confirmTxt}}</div>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false,
}
},
data() {
return {
content: '',
confirmTxt: '',
cancelTxt: '',
}
},
methods: {
close() {
this.$emit('input');
},
cancelHandler() {
this.$emit('onCancel');
},
confirmHandler() {
this.$emit('onConfirm');
}
}
}
</script>コードを使用して
<confirm
v-model="isConfirmShow"
@onCancel="onCancel"
@onConfirm="onConfirm"
>内容部分</confirm>そして、上記の要望にそれを完了するためにそれを使用。
openRiskConfirm() {
this.isRiskConfirmShow = true;
},
onRiskCancel() {
this.isRiskConfirmShow = false;
},
onRiskConfirm() {
// something
this.openPaymeList();
},
openPaymeList() {
this.isPaymentListShow = ture;
}
// ... 巴拉巴拉
// ... 大约需要 3*6 = 18 个方法才能完成需求（其他请求类的还不算）あなたが受け入れることができるかどうか、しかし：
だから、規制緩和の場合には、その危険性をチェックする必要はありませんか？またはパリティ・リスクはありません開始、規制リスクが突然チェックアウトしたいですか？かではないapp使用、指紋、それを呼び出すことはありませんか？それともあなたはそれの顔認識機能を追加したいですか？
ビジネスコードはあなたが必ずしもプロセスを覚えていないが、コードは任意の継続性を持っていないようですが、1つの方法だけが見た後、書いた場合でもので、コードの変更は、それは、災害になります。
人気モデル（ライト）
上記のビジネスプロセスのために、ポップの今より人気を使用するようにしてください。
コンポーネント：から、位置を受信する変更方法props場所$dataの
<template>
<div>
<div>{{content}}</div>
<div>
<div @click="cancelHandler">{{cancelTxt}}</div>
<div @click="confirmHandler">{{confirmTxt}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
confirmTxt: '',
cancelTxt: '',
onConfirm: function() {},
onCancel: function() {},
}
},
methods: {
uninstall() {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
},
cancelHandler() {
(typeof this.onCancel === 'function') && this.onCancel()
this.uninstall();
},
confirmHandler() {
(typeof this.onConfirm === 'function') && this.onConfirm()
this.uninstall();
}
}
}
</script>グローバルにサインアップ
import confirm from './confirm.vue'
export default {
install: function(Vue) {
const Profile = Vue.extend(confirm);
const PortfolioMsg = (options) => {
let $ele = document.createElement("div");
document.body.appendChild($ele);
new Profile({
data() {
return options;
}
}).$mount($ele);
};
Vue.prototype.$confirm = PortfolioMsg;
}
}コール
this.$confirm({
content: '内容',
confirmTxt: '确定',
cancelTxt: '取消',
onConfirm: () => {
console.log('确定')
},
onCancel: () => {
console.log('取消')
}
})上記の要件を完了するためにそれを使用する方法をどのああモディ？
this.$confirm({
content: '风险认证',
cancelTxt: '再看看',
confirmTxt: '同意',
onConfirm: () => {
// something
this.$dialog({
content: '指纹认证',
slot: `<div>指纹认证</div>`,
onFinish: () => {
// 支付 成功? 失败?
// something
},
onCancel: () => {
// something
this.$confirm({
content: '密码认证',
cancelTxt: '取消',
confirmTxt: '确定',
onConfirm: () => {
// something
this.$keyboard({
// 略
onFinish: (password) => {
// 密码加密
// something
if (/* 密码错误？ */) {
// 重复了
// 这个代码就可以抽象成一个方法
this.$confirm({
content: '密码认证',
cancelTxt: '取消',
confirmTxt: '确定',
// 略
})
}
}
})
},
onCancel: () => {
// 取消
}
})
}
})
},
onCancel: () => {
// 取消
}
})これは、コードの多くは明確に、はるかに少ない量、によって登録されていない、全体的な組み立てが必要思えないmethodsパッケージの実装方法を、それは多くのことを維持することが容易でもあります。しかし：そこに木のコールバック地獄？ちょうどそれについて少し、あなたがすることができ、再最適化をリラックス？
要約版
地獄を通じてAJAXコールバックPromiseを達成するためには、上記成分のコールバック地獄はそれが可能にもないPromise、それを達成するために？
import confirm from './confirm.vue'
export default {
install: function(Vue) {
const Profile = Vue.extend(confirm);
const PortfolioMsg = (options) => {
let $ele = document.createElement("div");
document.body.appendChild($ele);
const profile = new Profile({
data() {
return options;
}
}).$mount($ele);
return new Promise((resolve, reject) => {
profile.$on('onConfirm', resolve)
profile.$on('onCancel', reject)
})
};
Vue.prototype.$confirm = PortfolioMsg;
}
}それを使用してください
this.$confirm({
confirmTxt: '确定'
}).then(res => {
console.log('点击了确定')
}).catch(res => {
console.log('点击了取消')
})質問のコールバック地獄は簡単に解決、可読性の高い、中間の追加削除ロジックは特に便利になり、メンテナンスのコストが大幅に削減されます。具体的な抽象コード再び自分自身、おそらくより良いああ。
他のすべてのパッケージング方法、それ？メッセージを残してくださいハ
遂に
私は、習得して使用するためにそれらを容易にし、翻訳者が+フックUIライブラリに反応書きました
国民の関心番号「フロントエンドアドバンスコース」へようこそ真剣フロント、高度一緒に勉強しています。