uniapp弹窗组件,uni-app 组件

　　单一应用程序中怎么开发一个全局弹层组件？下面本篇文章给大家通过例子介绍一下单一应用程序中实现一个全局弹层组件的方法，希望对大家有所帮助！

　　单一应用程序开发（仿饿了么)开发课程：进入学习

　　公司有一个采用单一应用程序框架写的应用应用，里面的弹层基本是使用官方的uni.showModal之类的美国石油学会(美国石油协会)实现弹层，在设备上表现就是原生的弹层，在客户的要求下，需要更换成设计的样式，所以就开始实现这样一个组件。

　　根据弹层经常使用的方法和方式可以大致列出他需要的属性和方法：

　　类型：警报/确认等展示图标图标展示内容内容可以美国石油学会(美国石油协会)调用支持承诺，可以使用$api.xx().然后前几项就很好做，就在数据中定义好字段，外层直接拿官方的轮子单弹出窗口，这样少写一些控制弹出的逻辑（懒的),这样大致结构就写好了

　　//模板部分

　　uni-popup ref= popup :mask click= mask click

　　view class= ST-layer :style= { width:width }

　　查看 class=第一层_ _内容

　　！- #ifndef应用程序-NVUE -

　　text class= ST-layer _ _ icon :class=选项。图标类 getIconClass()

　　v-if=option.type！==无选项。showIcon/text

　　！- #endif -

　　视图class= ST-layer _ _ msg v-if=选项。“味精”

　　text{{ option.msg }}/text

　　/查看

　　/查看

　　view class= ST-layer _ _ footer :class= { is-reverse-cofirmcancel :isreverseconfirmccancel } v-if=选项。showconfirmbutton 选项。显示取消按钮

　　view class= ST-layer _ _ footer _ _ BTN ST-layer _ _ footer _ _ BTN-确认 @ tap。停止=确认点击

　　v-if=选项。“显示确认按钮”文本确认/text/view

　　view class= ST-layer _ _ footer _ _ BTN ST-layer _ _ footer _ _ BTN-取消 @ tap。停止=取消点击

　　v-if=选项。“显示取消按钮”文本取消/text/view

　　/查看

　　/查看

　　/单弹出窗口然后射流研究…部分先简单实现了一些打开和关闭方法

　　data() {

　　返回{

　　选项：{}

　　}

　　},

　　方法：{

　　打开（选项){

　　let defaultOption={

　　showCancelButton: false，//是否显示取消按钮

　　取消按钮文本： 取消, //取消按钮文字

　　showConfirmButton: true，//是否显示确认按钮

　　 confirmButtonText:取消, //确认按钮文字

　　showIcon: true，//是否显示图标

　　iconClass: null，//图标班级自定义

　　类型："无",//类型

　　确认：空，//点击确认后的逻辑

　　取消：空，//点击取消后的逻辑

　　邮件：""

　　}

　　this.option=Object.assign({}，defaultOption，option)

　　这个. refs.popup.open()

　　},

　　close() {

　　这个. refs.popup.close()

　　},

　　确认点击(){

　　const确认处理程序=this。选项。确认

　　if(确认处理程序的确认处理程序类型=== function ){

　　确认处理程序()

　　}

　　this.close()

　　这个$emit(确认)

　　},

　　cancelClick() {

　　const取消处理程序=this。选项。取消

　　if(取消处理程序的取消处理程序类型=== function ){

　　cancelHandler()

　　}

　　this.close()

　　这个$emit(取消)

　　}

　　}目前在其他页面已经可以使用

　　//test.vue可以使用单一应用程序的[easycom组件规范](https://uni app。d云。io/组件/自述文件？id=easycom组件规范),不用写进口语句

　　第一层引用=第一层/第一层

　　//js部分

　　这个. refs.stLayer.open({

　　消息： 测试，

　　确认：()={

　　console.log(点击了确认)

　　},

　　取消：()={

　　console.log(点击了取消)

　　}

　　})现在基本功能已经实现，但是有人要说了，这样调用不方便，我想这样调用

　　打开(味精).然后(()={

　　console.log(点击了确认)

　　}).catch(()={

　　console.log(点击了取消)

　　})那么如何实现承诺呢？最简单的方法是让open方法返回一个承诺。点击确认或取消时如何输入then方法？见下面的写法。

　　.

　　open() {

　　返回新承诺((reoslve，reject)={

　　.

　　this . option . confirm=this . option . confirm function confirm resolve(){

　　解决()

　　}

　　this . option . cancel=this . option . cancel 函数cancel project(){

　　拒绝()

　　}

　　})

　　}

　　.如果你想封装其他单独的方法，比如confirm，你可以在open的基础上扩展它：

　　确认(msg，option={}) {

　　if(消息类型===对象){

　　选项=消息

　　}否则{

　　option.msg=msg

　　}

　　返回this.open({

　　.选项，

　　showCancelButton: true，

　　键入：“确认”

　　})

　　}

　　//呼叫模式

　　这个。$refs.stLayer.confirm(您确定吗？).然后()。catch()这样一个基本的炸弹层组件已经实现了。下面是全局使用原始vue项目编写的layer组件的最后一步。为了全局使用它，通常使用下面的方法将其注入到页面中。

　　从导入总管。/main.vue

　　const layer constructor=vue . extend(main)

　　const initInstance=()={

　　instance=new LayerConstructor({

　　el: document.createElement(div )

　　})

　　instance.callback=默认回调

　　document.getElementById(app )。appendChild(实例。$el)

　　}我直接拉过来使用，结果报错，提示错误：文档未定义。这才想起来uni-app和常见的vue项目有一个很大的区别，在它的工作原理中介绍：

　　Uni-app逻辑层和视图层是分离的。在非H5端运行时，从架构上分为两部分：逻辑层和视图层。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。虽然开发者在一个vue页面中写js和css，但实际上它们在编译时已经被拆分了。逻辑层运行在独立的jscore中，不依赖于原生webview，所以一方面没有浏览器兼容问题，可以在Android4.4上运行es6代码；另一方面，它不能运行window、document、navigator、localstorage等浏览器专用的js API。

　　所以这种全局注册的方法不再可用。那么如何在uni-app中实现呢？

　　浏览官方论坛，我发现了LoaderVue-Insert-Loader的一个实现。实现原理是获取sfc模板内容，在指定位置插入自定义内容(即需要全局的组件)。用法如下：

　　//第一步

　　npm安装vue-插入-加载程序-保存-开发

　　//第二步，将loader注入vue.config.js(如果没有HBuilderx创建的项目，新建一个)

　　module.export={

　　chainWebpack: config={

　　//超级全局组件

　　配置模块。规则(“vue”)。测试(/\。vue$/)。使用()。loader(path.resolve(__dirname，。/node_modules/vue-inset-loader ))。结束()

　　}

　　}

　　//支持自定义pages.json文件路径

　　//选项：{

　　//pagesPath:path . resolve(_ _ dirname，。/src/pages . JSON’)

　　//}

　　//步骤3在pages.json配置文件中添加insetLoader

　　insetLoader: {

　　配置:{

　　confirm : base confirm ref= confirm /base confirm ，

　　ABC : base ABC ref= base ABC /base ABC

　　},

　　//全局配置

　　标签:[确认]，

　　rootEle:div

　　}

配置说明

　　配置(默认值：{})

　　定义标签名称和内容的键值对。

　　标签(默认：[])

　　需要全局引入的标签，打包后会在所有页面引入。

　　rootEle(默认：“div”)

　　根元素的标签类型，默认值为div，支持正则化，比如匹配任何标签。*

　　并且label和rootEle支持独立页面风格的配置，优先于全局配置。

　　至此，组件可以全局使用，不需要在每一页都写标签，只需要调用api。

　　以后可以根据使用情况进行优化。水平有限，欢迎大家指教。

　　推荐：以上《uniapp教程》是如何在uni-app中开发一个全局shell组件(代码示例)的详细内容。更多信息请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。