Cara membangunkan komponen lapisan elastik global dalam aplikasi uni (contoh kod)

Bagaimana untuk membangunkan komponen lapisan elastik global dalam apl uni? Artikel berikut akan memperkenalkan kepada anda melalui contoh cara melaksanakan komponen lapisan elastik global dalam apl uni. Saya harap ia akan membantu anda!

Syarikat mempunyai apl yang ditulis menggunakan rangka kerja uni-apl Lapisan elastik di dalam pada asasnya menggunakan uni.showModal dan API lain untuk melaksanakan lapisan elastik . , prestasi pada peranti adalah lapisan elastik asli Atas permintaan pelanggan, ia perlu diganti dengan gaya yang direka, jadi kami mula melaksanakan komponen sedemikian.

Mengikut kaedah dan kaedah yang sering digunakan oleh lapisan elastik, sifat dan kaedah yang dia perlukan boleh disenaraikan secara kasar:

• Jenis: alert/confirmdll.
• Paparkan ikon ikon
• Paparkan kandungan kandungan
• boleh memanggil api
• sokongan promise, anda boleh gunakan $api.xx().then

Beberapa perkara pertama ialah Mudah dilakukan, hanya tentukan medan dalam data, dan terus gunakan roda rasmi uni-popup di lapisan luar Dengan cara ini anda mempunyai kurang logik untuk mengawal pop timbul (malas). dan struktur umum ditulis

// 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 !== &#39;none&#39; && 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="{&#39;is-reverse-cofirmcancel&#39; : 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>

Kemudian bahagian js mula-mula hanya melaksanakan beberapa kaedah buka dan tutup

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')
    }
}

Ia kini boleh digunakan pada halaman lain

// 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: &#39;测试&#39;,
    confirm: () => {
        console.log(&#39;点击了确认&#39;)
    },
    cancel: () => {
        console.log(&#39;点击了取消&#39;)
    }
})

Sekarang fungsi asas telah dilaksanakan, tetapi seseorang mahu Setelah berkata demikian, adalah menyusahkan untuk memanggilnya seperti ini isasi? Cara paling mudah ialah membiarkan kaedah terbuka mengembalikan

. Bagaimana untuk memasukkan kaedah

open(msg).then(() => {
    console.log('点击了确认')
}).catch(() => {
     console.log('点击了取消')
})

apabila mengklik sahkan atau batal Lihat kaedah penulisan berikut

promisepromise Jika anda ingin merangkum kaedah berasingan lain, seperti then, anda boleh melanjutkannya berdasarkan asas? daripada terbuka:

...
open() {
     return new promise((reoslve, reject) => {
        ...
        this.option.confirm = this.option.confirm || function confirmResolve () {
            resolve()
        }
         this.option.cancel = this.option.cancel || function cancelReject () {
            reject()
        }
     })
 }
...

Komponen lapisan anjal asas sedemikian telah dilaksanakan. Berikut ialah langkah terakhirconfirmUntuk menggunakan komponen lapisan yang ditulis dalam projek vue asal secara global, ia biasanya disuntik ke dalam halaman menggunakan kaedah berikut

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()

Ia ditarik terus dan digunakan, dan ralat dilaporkan, mendorong全局使用 , kemudian saya teringat bahawa

mempunyai perbezaan besar daripada projek vue biasa, yang diperkenalkan dalam prinsip operasinya:

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)
}

error: document is undefineduni-app Lapisan logik dan lapisan pandangan dipisahkan, pada bahagian bukan H5 Pada masa jalan, ia dibahagikan secara seni bina kepada dua bahagian: lapisan logik dan lapisan paparan. Lapisan logik bertanggungjawab untuk melaksanakan logik perniagaan, iaitu, menjalankan kod js, dan lapisan paparan bertanggungjawab untuk pemaparan halaman. Walaupun pembangun menulis js dan css dalam halaman vue, mereka sebenarnya berpecah semasa penyusunan. Lapisan logik berjalan dalam jscore bebas Ia tidak bergantung pada paparan web tempatan, jadi pada satu pihak ia tidak mempunyai masalah keserasian penyemak imbas dan boleh menjalankan kod es6 pada Android 4.4. navigator, localstorage dan API js khusus pelayar lain.

Jadi kaedah pendaftaran global ini tidak lagi tersedia. Jadi bagaimana untuk melaksanakannya dalam uni-app? Melihat melalui forum rasmi, saya mendapati pelaksanaan pemuat

Prinsip pelaksanaan adalah untuk mendapatkan kandungan templat sfc dan memasukkan kandungan tersuai (iaitu komponen global) di lokasi yang ditentukan kaedah adalah seperti berikut: uni-appvue-inset-loaderArahan konfigurasi

// 第一步
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=&#39;confirm&#39;></BaseConfirm>",  
        "abc": "<BaseAbc ref=&#39;BaseAbc&#39;></BaseAbc>"  
    },  
    // 全局配置  
    "label":["confirm"],  
    "rootEle":"div"  
}

(lalai:

)
• Pasangan nilai kunci yang mentakrifkan nama teg dan kandungan

  config{}
  

  (lalai:
)
• Teg yang perlu diperkenalkan secara global akan diperkenalkan dalam semua halaman selepas pembungkusan

  label[]
  

  (lalai :
)
• Jenis teg unsur akar, nilai lalai ialah div, menyokong peraturan biasa, seperti memadankan sebarang teg ".*"

  rootEle "div" dan
  gaya sokongan pada halaman berasingan Konfigurasi dalam, mempunyai keutamaan yang lebih tinggi daripada konfigurasi global

  labelrootEle Pada ketika ini, komponen itu boleh digunakan secara global tidak perlu menulis tag pada setiap halaman untuk menggunakannya Anda hanya perlu memanggil API.

Anda boleh mengoptimumkannya kemudian berdasarkan penggunaan. Tahap adalah terhad, nasihat semua orang dialu-alukan.

Disyorkan: "

tutorial uniapp

"

Atas ialah kandungan terperinci Cara membangunkan komponen lapisan elastik global dalam aplikasi uni (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!