uni-app でグローバル エラスティック レイヤー コンポーネントを開発するにはどうすればよいですか?次の記事では、uni-app でグローバル エラスティック レイヤー コンポーネントを実装する方法を例を用いて紹介します。
この会社には、uni-app フレームワークを使用して書かれたアプリがあります。内部の弾性層は基本的に、公式の uni.showModal API を使用して実装されています。パフォーマンスは、デバイスはネイティブの弾性レイヤーですが、お客様の要望により、設計されたスタイルに置き換える必要があるため、そのようなコンポーネントの実装を開始しました。
弾性層でよく使用されるメソッドとメソッドに従って、必要なプロパティとメソッドを大まかに列挙します。
alert/confirm
など promise
、 $api.xx().then
最初のいくつかの項目は簡単に実行でき、data
でフィールドを定義し、直接使用するだけです。公式のホイール uni は外層 -popup
にあるため、ポップアップを制御するためのロジックを少なくする必要があり (遅延)、一般的な構造は次のように記述されます
// template部分 <uni-popup ref="popup" :maskClick="maskClick"> <view class="st-layer" :style="{ width: width }"> <view class="st-layer__content"> <!-- #ifndef APP-NVUE --> <text class="st-layer__icon" :class="option.iconClass || getIconClass()" v-if="option.type !== 'none' && option.showIcon"></text> <!-- #endif --> <view class="st-layer__msg" v-if="option.msg"> <text>{{ option.msg }}</text> </view> </view> <view class="st-layer__footer" :class="{'is-reverse-cofirmcancel' : isReverseConfirmCancel}" v-if="option.showConfirmButton || option.showCancelButton"> <view class="st-layer__footer__btn st-layer__footer__btn--confirm" @tap.stop="confirmClick" v-if="option.showConfirmButton"><text>确认</text></view> <view class="st-layer__footer__btn st-layer__footer__btn--cancel" @tap.stop="cancelClick" v-if="option.showCancelButton"><text>取消</text></view> </view> </view> </uni-popup>
その後、js最初の部分は、いくつかの open メソッドと close メソッドを実装するだけです。
data() { return { option: {} } }, methods: { open(option) { let defaultOption = { showCancelButton: false, // 是否显示取消按钮 cancelButtonText: '取消', // 取消按钮文字 showConfirmButton: true, // 是否显示确认按钮 confirmButtonText: '取消', // 确认按钮文字 showIcon: true, // 是否显示图标 iconClass: null, // 图标class自定义 type: 'none', // 类型 confirm: null, // 点击确认后的逻辑 cancel: null, // 点击取消后的逻辑 msg: '' } this.option = Object.assign({}, defaultOption, option) this.$refs.popup.open() }, close() { this.$refs.popup.close() }, confirmClick() { const confirmHandler = this.option.confirm if (confirmHandler && typeof confirmHandler === 'function') { confirmHandler() } this.close() this.$emit('confirm') }, cancelClick() { const cancelHandler = this.option.cancel if (cancelHandler && typeof cancelHandler === 'function') { cancelHandler() } this.close() this.$emit('cancel') } }
現在他のページで利用可能です
// test.vue 可以使用uni-app的 [easycom组件规范](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83),不用写import语句 <st-layer ref="stLayer"></st-layer> // js部分 this.$refs.stLayer.open({ msg: '测试', confirm: () => { console.log('点击了确认') }, cancel: () => { console.log('点击了取消') } })
これで基本的な機能は実装されましたが、このように呼び出すのは不便だと言いたい人がいます。このように呼び出したいです
open(msg).then(() => { console.log('点击了确认') }).catch(() => { console.log('点击了取消') })
実装方法promise
はどうですか?最も簡単な方法は、open メソッドに promise
を返させることです。 [確認] または [キャンセル] をクリックするときに then
メソッドを入力するにはどうすればよいですか? 次の記述メソッドを参照してください
... open() { return new promise((reoslve, reject) => { ... this.option.confirm = this.option.confirm || function confirmResolve () { resolve() } this.option.cancel = this.option.cancel || function cancelReject () { reject() } }) } ...
他の個別のメソッド (confirm
など) をカプセル化したい場合は、オープンに基づいて拡張できます:
confirm(msg, option = {}) { if (typeof msg === 'object') { option = msg } else { option.msg = msg } return this.open({ ...option, showCancelButton: true, type: 'confirm' }) } // 调用方式 this.$refs.stLayer.confirm('是否确认?').then().catch()
このような基本的な弾性層コンポーネントが実装されています。以下は最後のステップですグローバル使用
元の vue プロジェクトに記述されたレイヤー コンポーネントをグローバルに使用するには、通常、次のメソッドを使用してページに挿入されます
import main from './main.vue' const LayerConstructor = vue.extend(main) const initInstance = () => { instance = new LayerConstructor({ el: document.createElement('div') }) instance.callback = defaultCallback document.getElementById('app').appendChild(instance.$el) }
直接プルオーバーされます使用すると、結果はエラーとプロンプト エラー: ドキュメントが未定義です
でした。その後、uni-app
が通常の vue プロジェクトとは大きく異なることを思い出しました。動作原理:
uni-app
論理層とビュー層が分離されており、非 H5 側で実行する場合は、論理層の 2 つの部分に分割されます。そしてビューレイヤー。ロジック層はビジネス ロジックの実行、つまり JS コードの実行を担当し、ビュー層はページのレンダリングを担当します。開発者は vue ページに js と css を記述しますが、実際にはコンパイル中に分割されます。ロジック層は独立した jscore で実行されます。ローカル Web ビューに依存しないため、ブラウザーの互換性の問題がなく、Android 4.4 上で es6 コードを実行できます。一方で、ウィンドウ、ブラウザーを実行することはできません。ドキュメント、ナビゲーター、ローカルストレージなどの特定の js API。
そのため、このグローバル登録方法は利用できなくなりました。では、それを uni-app
に実装するにはどうすればよいでしょうか?
公式フォーラムを調べてみると、loadervue-inset-loader
の実装を発見しました。実装原理は、sfc テンプレートのコンテンツを取得し、指定された場所 (つまり、は、 global を必要とするコンポーネントです)、使用法は次のとおりです:
// 第一步 npm install vue-inset-loader --save-dev // 第二步 在vue.config.js(hbuilderx创建的项目没有的话新建一个)中注入loader module.export = { chainWebpack: config => { // 超级全局组件 config.module .rule('vue') .test(/\.vue$/) .use() .loader(path.resolve(__dirname, "./node_modules/vue-inset-loader")) .end() } } // 支持自定义pages.json文件路径 // options: { // pagesPath: path.resolve(__dirname,'./src/pages.json') // } // 第三步 pages.json配置文件中添加insetLoader "insetLoader": { "config":{ "confirm": "<BaseConfirm ref='confirm'></BaseConfirm>", "abc": "<BaseAbc ref='BaseAbc'></BaseAbc>" }, // 全局配置 "label":["confirm"], "rootEle":"div" }
config
(デフォルト: {}
)
定義 ラベル名と内容のキーと値のペア
label
(デフォルト: []
)
パッケージ化後にグローバルに導入する必要があるラベル このタグはすべてのページに導入されます
rootEle
(デフォルト: "div"
)
ルート要素のタグ タイプ、デフォルト値は div で、通常のルールをサポートします。たとえば、任意のラベル ".*"
label
および に一致します。 rootEle
は別ページのスタイルでの設定をサポートしており、グローバル設定よりも優先されます。この時点で
を設定した後、コンポーネントはグローバルに使用できるようになります。各ページにタグを記述する必要はなく、API を呼び出すだけで使用できます。
後で使用状況に基づいて最適化できます。レベルは限られていますが、皆さんのアドバイスは大歓迎です。
推奨: 「uniapp チュートリアル 」
以上がuni-app でグローバル エラスティック レイヤー コンポーネントを開発する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。