van-dialog 组件调用报错的解决

目录
  • van-dialog组件调用报错
  • van弹窗组件van-dialog遇到的坑

van-dialog组件调用报错

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式

<van-dialog
  v-model="show"
  title="标题"
  show-cancel-button
>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg">
</van-dialog>
export default {
  data() {
    return {
      show: false
    };
  }
}

按照逛网 这样写，  结果 报错。不能正常使用。。。。这么费事？

原因：自己不细心导致！

首先：使用组件调用，那 一定要引用组件。

引用方式很重要，不是  ··import { Dialog } from 'vant';

而是： 

通过组件调用 Dialog 时，可以通过下面的方式进行注册

import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
// 局部注册
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
}

van弹窗组件van-dialog遇到的坑

// HTML部分
     <van-dialog
                 v-model="dialogshow"
                 confirm-button-text=“继续采集"
                cancel-button-text=“取消采集"
                title=“该户数据已采集，是否继续？"
                show-cancel-buttoon
                @confirm=“dialogConfirm"
               @cancel="dialogCancel"
      >
          <div v-for="(item,index) in list" :key="index">
                  <div>{{item}}</div>
          </div>
     </van-dialog>
// JS部分
     data(){
         return{
                 dialogshow:false,
                 list:[]
         }
    }
      dialogconfirm(){
      // 该步骤就是遇到的坑，不做这一步处理点击关闭弹窗后页面就会卡住无法拖动，后面发现是这个组件的这个节点没有清除
         导致页面卡顿，真的太坑了van的有些组件。。。             
                document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden')
                this.dialogshow=false
      },
      dialogcancel(){
               this.dialogshow=false
               this.$router.push({name:home})
     }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • vant-ui组件调用Dialog弹窗异步关闭操作

    需求描述: 需求描述:官方文档又是组件调用方式,又是函数调用方式. 我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗. 一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果.网速慢点,用起来真的很不好. 正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cancel-b

  • van-dialog 组件调用报错的解决

    目录 van-dialog组件调用报错 van弹窗组件van-dialog遇到的坑 van-dialog组件调用报错 如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式 <van-dialog   v-model="show"   title="标题"   show-cancel-button >   <img src="https://img.yzcdn.cn/vant/apple-3.jpg"> <

  • docker容器调用yum报错的解决办法

    dockerfile里或者在容器里执行yum,报错,找不到源(invalid baseurl xxx),但是宿主机上执行yum是没问题的啊,为什么? 因为不论是dockerfile使用RUN关键字执行yum还是直接进入到容器里面执行yum,它们都是使用的docker镜像里面的源(CentOS是在路径/etc/yum.repo.d/CentOS-Base.repo),所以你要把宿主机上的同路径下的源拷贝到容器里面,然后docker commit一个新的"基础镜像",这个时候使用docke

  • 使用Element的InfiniteScroll 无限滚动组件报错的解决

    一.问题描述 在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node' InfiniteScroll的更多用法element官网 二.解决办法 给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可. <template> <

  • Android线程中设置控件的值提示报错的解决方法

    本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.yarin.android.Examples_04_15; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andro

  • spring cloud feign不支持@RequestBody+ RequestMethod.GET报错的解决方法

    spring cloud feign不支持@RequestBody+ RequestMethod.GET报错的解决方法

    1.问题梳理: 异常:org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported 很明显是最终feign执行http请求时把这个方法认定为POST,但feign client中又定义了RequestMethod.GET 或 @GetMapping,冲突导致报错 那么为什么feign会认为这个方法是post呢? 源码追踪: 1.我们从feignClient注解

  • 新手常见6种的python报错及解决方法

    此篇文章整理新手编写代码常见的一些错误,有些错误是粗心的错误,但对于新手而已,会折腾很长时间才搞定,所以在此总结下我遇到的一些问题.希望帮助到刚入门的朋友们. 1.NameError变量名错误 报错: >>> print a Traceback (most recent call last): File "<stdin>", line 1, in <module> NameError: name 'a' is not defined 解决方案:

  • layui数据表格 table.render 报错的解决方法

    一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp

  • vue使用prop可以渲染但是打印台报错的解决方式

    vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'RegistrationAuthority' of undefined" found in ---> <DialogHistory> at src/components/tools/dialog_history.vue <NurseInfor> at src/

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • vue-router 按需加载 component: () => import() 报错的解决

    vue的单页面(SPA)项目,必然涉及路由按需的问题. 以前我们是这么做的 //require.ensure是webpack里面的,这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require('../component/Login.vue'))); 但现在vue-router的官网看看,推荐这种方式: //vue异步组件和webpack的[代码分块点]功能结合,实现了按需加载 const App =

随机推荐