関数でANt-design-vueのDrawerコンポーネントとModalコンポーネントを作成します.
3892 ワード
原因
通常業務においては、引き出しのセットやフレームのセットを書くときは、visible属性で表示を制御します.
もう一つのシーンがあります.リストには詳細ボタンがあります.クリックして詳細な引き出しを開けます.この詳細な引き出しの中にはもう一つのリストがあります.他の詳細な引き出しも開けます.これを類推します.開けたい弾戸の数が確定できないと、父のセットの中に弾戸を書いておくことができません.
論理的には、このような1つの変数でコンポーネントの顕著な隠蔽を制御する方法は、現在のコンポーネントのサブコンポーネントとして、ポップアップウィンドウまたは引き出しコンポーネントを使用することである.しかし、ほとんどの場合は、弾戸や引き出しの内容は元のコンポーネントとあまり関係がありません.例えば、引き出しが開いている詳細ページ、例えば弾戸が開いているフォームなど、論理的には独立したサブアプリケーションのように、このサブアプリケーションは親アプリケーションからのパラメータを受信しますが、その後のページ全体のコントロールはこのサブアプリケーションに任せるべきです.(パチンコや引き出し)、メインアプリケーションは、サブアプリケーションが終了したイベント(コールバックの結果)をモニターして対応するものであるべきです.
したがって、私の考えは、関数を呼び出して、いくつかの対応するpropsパラメータを入力して、パチンコや引き出しを作成し、リプライ関数を提供しながら、パチンコの結果やキャンセル時に応答するということです.これにより、親のコンポーネントとは関係のない論理を多く書くことなく、パチンコの論理を弾戸コンポーネントに集めることができます.
関数の使い方
1.createAntdDrawer
デフォルトでは、titleとcontentの2つのSLotスロットに
title、content、およびfooterの3つのSLotスロットに
https://github.com/hzyhbk/cre...
cloneの全体の項目は、下の依存をインストールして、
スターを歓迎します.
通常業務においては、引き出しのセットやフレームのセットを書くときは、visible属性で表示を制御します.
Open Modal with async logic
{{ ModalText }}
export default {
data() {
return {
ModalText: 'Content of the modal',
visible: false,
confirmLoading: false,
};
},
methods: {
showModal() {
this.visible = true;
},
handleOk(e) {
this.ModalText = 'The modal will be closed after two seconds';
this.confirmLoading = true;
setTimeout(() => {
this.visible = false;
this.confirmLoading = false;
}, 2000);
},
handleCancel(e) {
console.log('Clicked cancel button');
this.visible = false;
},
},
};
このような書き方はコンポーネントが簡単で、論理が少ない時がいいです.このページにはたくさんのボックスがあります.あるいは、現在のページのコンポーネント自体が複雑なとき、各種のisXvisibleが現在のページに溢れています.見ているだけでは維持できません.もう一つのシーンがあります.リストには詳細ボタンがあります.クリックして詳細な引き出しを開けます.この詳細な引き出しの中にはもう一つのリストがあります.他の詳細な引き出しも開けます.これを類推します.開けたい弾戸の数が確定できないと、父のセットの中に弾戸を書いておくことができません.
論理的には、このような1つの変数でコンポーネントの顕著な隠蔽を制御する方法は、現在のコンポーネントのサブコンポーネントとして、ポップアップウィンドウまたは引き出しコンポーネントを使用することである.しかし、ほとんどの場合は、弾戸や引き出しの内容は元のコンポーネントとあまり関係がありません.例えば、引き出しが開いている詳細ページ、例えば弾戸が開いているフォームなど、論理的には独立したサブアプリケーションのように、このサブアプリケーションは親アプリケーションからのパラメータを受信しますが、その後のページ全体のコントロールはこのサブアプリケーションに任せるべきです.(パチンコや引き出し)、メインアプリケーションは、サブアプリケーションが終了したイベント(コールバックの結果)をモニターして対応するものであるべきです.
したがって、私の考えは、関数を呼び出して、いくつかの対応するpropsパラメータを入力して、パチンコや引き出しを作成し、リプライ関数を提供しながら、パチンコの結果やキャンセル時に応答するということです.これにより、親のコンポーネントとは関係のない論理を多く書くことなく、パチンコの論理を弾戸コンポーネントに集めることができます.
関数の使い方
1.createAntdDrawer
デフォルトでは、titleとcontentの2つのSLotスロットに
close
という関数が入ってきます.サブコンポーネント内でthis.$emit('close', payload)
を使用して、クローズ動作をトリガします.createAntdDrawer({
// antd drawer props
drawerProps: {},
// title slot
// drawerProps.title title , title
title: {
template: Title,
props: {
title: ' ',
},
},
// default slot
content: {
template: HelloWorld,
props: {
msg: 'Welcome to Your Vue.js App',
},
},
// async
beforeClose: function() {
console.log(' ');
},
// async
afterClose: function() {
console.log(' ');
},
});
2.createAntdModaltitle、content、およびfooterの3つのSLotスロットに
close
、ok
の2つの関数とconfirmLoading
の状態が入ってきます.この状態は、サブアセンブリ内でthis.$emit('close', payload)
を使用して、オフ動作をトリガし、this.$emit('ok', payload)
を使用して、onOk
を回転させます.createAntdModal({
// antd modal props
modalProps: {},
// title slot
// modalProps.title title , title
title: {
template: Title,
props: {
title: ' ',
},
},
// content slot
content: {
template: HelloWorld,
props: {
msg: 'Welcome to Your Vue.js App',
},
},
// footer slot
footer: {
template: Footer,
props: {
cancelText: 'hahah ',
okText: 'hahah ',
},
},
// async
beforeClose: function() {
console.log(' ');
},
// async
afterClose: function() {
console.log(' ');
},
// async
async onOk() {
await new Promise((resolve) => {
setTimeout(() => {
console.log(' ');
resolve();
}, 3000);
});
},
});
gitアドレスhttps://github.com/hzyhbk/cre...
cloneの全体の項目は、下の依存をインストールして、
confirmLoading
、トップページで2つのボタンを見ることができます.クリックして効果を見ることができます.スターを歓迎します.