uni-app中开发一个弹层组件
根据弹层经常使用的方法和方式可以大致列出他需要的属性和方法:
- 类型:
alert/confirm
等 - 展示图标 icon
- 展示内容 content
- 可以api调用
- 支持
promise
,可以使用$api.xx().then
前几项就很好做,就在data
中定义好字段,外层直接拿官方的轮子uni-popup
,这样少写一些控制弹出的逻辑(懒的),这样大致结构就写好了
// template部分
<uni-popup ref="popup" :maskClick="maskClick">
<view :style="{ width: width }">
<view class="st-layer__content">
<!-- #ifndef APP-NVUE -->
<text :
v-if="option.type !== 'none' && option.showIcon"></text>
<!-- #endif -->
<view v-if="option.msg">
<text>{{ option.msg }}</text>
</view>
</view>
<view :class="{'is-reverse-cofirmcancel' : isReverseConfirmCancel}" v-if="option.showConfirmButton || option.showCancelButton">
<view @tap.stop="confirmClick"
v-if="option.showConfirmButton"><text>确认</text></view>
<view @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组件规范),不用写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
之类,可以在open基础上扩展:
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项目写的layer组件要全局使用通常是采用下面的方法注入到页面中
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 undefined
,才想起uni-app
跟普通vue项目的有一个很大的区别,在它的运行原理中有介绍:
uni-app
逻辑层和视图层分离,在非H5端运行时,从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑,也就是运行js代码,视图层负责页面渲染。虽然开发者在一个vue页面里写js和css,但其实,编译时就已经将它们拆分了。逻辑层是运行在一个独立的jscore里的,它不依赖于本机的webview,所以一方面它没有浏览器兼容问题,可以在Android4.4上跑es6代码,另一方面,它无法运行window、document、navigator、localstorage等浏览器专用的js API。
所以这种注册全局的方法已经不可用。那该如何在uni-app
中实现呢? 翻看官方论坛,找到了一个实现loadervue-inset-loader
,实现原理就是获取sfc模板内容,在指定位置插入自定义内容(也就是需要全局的组件),使用方式如下:
// 第一步
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
(default:{}
)
定义标签名称和内容的键值对 -
label
(default:[]
)
需要全局引入的标签,打包后会在所有页面引入此标签 -
rootEle
(default:"div"
)
根元素的标签类型,缺省值为div,支持正则,比如匹配任意标签 ".*"label
和rootEle
支持在单独页面的style里配置,优先级高于全局配置
到这,该组件就可以全局使用了,不需要在每个页面写标签使用,只需要调用api就可以。
后面可以再根据使用情况进行优化处理。水平有限,欢迎各位大佬指点。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbike
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24