详细问题描述
前些时间管用，最近重新改这项目发现有这样的bug，似乎一直报this.$refs.xxx.show() undefined
重现步骤
[步骤]
第一步： 创建好模态框组件
<template>
<transition name="fade">
<view class="kk-modal" v-if="showModal">
<!-- 默认 确认选择 -->
<view class="kk-modal-wrap">
<view class="kk-modal-title">
{{ modalTitle }}
<view @click="quit" class="quit-btn" v-if="showQuitBtn">
<image src="/static/quit-1.png" mode=""></image>
</view>
</view>
<view class="kk-modal-content">
<slot></slot>
</view>
<view class="kk-modal-footer" v-if="showButton && type == 1">
<view class="btn-close" @click="close()">{{ cancelText }}</view>
<view class="btn-confirm" @click="confirm()">{{ sureText }}</view>
</view>
<view class="kk-modal-footer" v-if="showButton && type == 2">
<view class="btn-confirm" @click="confirm()">{{ sureText }}</view>
</view>
</view>
<view class="background-shadow" v-if="shadow" @click="clickMask && closeModal()"></view>
</view>
</transition> </template>
<script>
export default {
data() {
return {
showModal: false
};
},
props: {
// title
modalTitle: {
type: String,
default: ''
},
// 是否显示footer
showButton: {
type: Boolean,
default: true
},
// 是否显示蒙层
shadow: {
type: Boolean,
default: true
},
showQuitBtn: {
type: Boolean,
default: false
},
// 点击蒙层是否关闭模态框
clickMask: {
type: Boolean,
default: true
},
// 确定按钮文字
sureText: {
type: String,
default: '确定'
},
// 取消按钮文字
cancelText: {
type: String,
default: '取消'
},
// 类型 1 => 按钮个数2 类型 2 => 按钮个数1
type: {
type: Number,
default: 1
}
},
methods: {
close () {
this.$emit('cancelModal');
this.closeModal();
},
confirm () {
this.$emit('confirmModal');
this.closeModal();
},
closeModal () {
this.showModal = false;
},
show () {
this.showModal = true;
},
quit() {
this.closeModal();
}
}
}
</script>
第二步：引入并使用组件
// 点击支付运费按钮
<view @click="payMoney" class="item-title btn-color-orange">支付运费</view>
....
<kkModal
ref="kkModal4"
modalTitle="温馨提示"
@confirmModal="confirmModal4"
<view class="modal-content">是否确认支付该订单？</view>
</kkModal>
.....
payMoney() {
this.$refs.kkModal4.show()
},
[结果] 报错，点击没效果
SyntaxError: JSON Parse error: Unrecognized token '%'
18:08:48.139 ReferenceError: getApp is not defined at view.umd.min.js:6
18:08:48.162 ReferenceError: Symbol is not defined at view.umd.min.js:6
18:08:48.182 ReferenceError: getApp is not defined at view.umd.min.js:6
18:08:48.203 ReferenceError: Symbol is not defined at view.umd.min.js:6
18:08:48.222 E:/康帅比/项目/物流车主端/components/kk-modal/kk-modal.vue:[undefined]$r[1][i] is undefined at view.umd.min.js:1
18:08:48.242 ReferenceError: getApp is not defined at view.umd.min.js:6
18:08:48.263 ReferenceError: Symbol is not defined at view.umd.min.js:6
18:08:48.283 ReferenceError: getApp is not defined at view.umd.min.js:6
18:08:48.303 ReferenceError: Symbol is not defined at view.umd.min.js:6
[期望] 能够显示弹框且关闭还能开
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]
[IDE版本号] 2.6.1.20200226
[windows版本号] windows 10
uni-app运行环境说明
[运行端是h5或app或某个小程序？] h5运行没问题， app 失效并报错
[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试] HBuilderX创建的
App运行环境说明
[Android版本号] 三星 安卓5.0.2 ， 一加五t 安卓9
[手机型号] 三星 SM-G920F ， 一加5t A5010
联系方式
[QQ] 1140691970
