iview 刷新滞后于html问题

最新推荐文章于 2022-11-16 19:25:42 发布
转载 最新推荐文章于 2022-11-16 19:25:42 发布 · 343 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/hao-1234-1234/p/8868328.html
文章标签：

#javascript #ViewUI

本文介绍了一种在Vue应用中解决页面元素闪烁的方法，通过使用v-html替代原本的内联标签来更新DOM内容，有效避免了页面加载时的闪烁现象。文章提供了完整的代码示例，包括表单验证、模态框操作等。

 

一、问题描述

　　每次刷新页面，下面的内容就会一闪而过。

　　一闪而过后恢复正常：

 

 

 

 

 

 

 

 

 

 

 

 

 

二、解决

　问题代码：

@*<span>修改密码</span>*@
@*<span>{{myWord.personInfo}} </span>*@
改为v-html，在iveiw中方法执行后赋值。
<span v-html="myWord.personInfo"></span>

  data : {

　　myWord:{
　　personInfo: '个人信息',
　　changePassword: '修改密码',
　　submit: '提交',
　　cancel: '取消'
　　},

同样的问题还出现在很多地方。

 

三、完整代码：

@{
    ViewBag.Title = "个人中心";
    Layout = "~/Views/Shared/_LayoutNotFooter.cshtml";
}
<style>
        .main-container {
            overflow-y: hidden;
        }
</style>


<div id="personalCenterDiv">
        <div style="background:#eee;padding:20px" >

            <Card style="width:100%;">
                <p slot="title">
                    <Icon type="person"></Icon>
                    @*<span>修改密码</span>*@
                    @*<span>{{myWord.personInfo}} </span>*@
                    <span v-html="myWord.personInfo"></span>  
                                    
                </p>
                <i-form ref="formValidate"   :model="formValidate"  :rules="ruleValidate"   :label-width="100" >

                    <form-item label="用户名" prop="UserName">
                        <span v-html="formValidate.UserName"></span>  
                    </form-item>
                    <form-item label="用户类型">
                      
                        <span v-html="formValidate.TypeID"></span>
                    </form-item>
              
                    <form-item label="密码" >                     
                        <i-button type="ghost" v-on:click="modal1=true">
                        <span v-html="myWord.changePassword"></span> 
                         </i-button>   
                    </form-item>
                    
                    <form-item label="真实姓名" prop="RealName">
                        <i-input v-model="formValidate.RealName" style="width:300px"></i-input>
                    </form-item>
                    <form-item label="工作单位" prop="Company">
                        <i-input v-model="formValidate.Company" style="width:300px"></i-input>
                    </form-item>
                    <form-item label="出生日期" prop="BirthDate">   
                         <date-picker type="date" v-model="formValidate.BirthDate" ></date-picker>
                    </form-item>
                    <form-item label="手机" prop="Phone">
                        <i-input v-model="formValidate.Phone" style="width:300px"></i-input>
                    </form-item>
                    <form-item label="固定电话" prop="TelPhone">
                        <i-input v-model="formValidate.TelPhone" style="width:300px"></i-input>
                    </form-item>
                    <form-item label="联系地址" prop="Address">
                        <i-input v-model="formValidate.Address" style="width:300px"></i-input>
                    </form-item>

                    <form-item>
                        <i-button type="primary" v-on:click="handleSubmit('formValidate')">
                            <span v-html="myWord.submit"></span>    
                        </i-button>   
                        <i-button type="ghost" v-on:click="handleReset('formValidate')" style="margin-left: 8px">
                            <span v-html="myWord.cancel"></span>  
                        </i-button>
                    </form-item>
                </i-form>

            </Card>

            <Modal v-model="modal1" title="修改密码" v-on:on-ok="okClick('formPassword')" v-on:on-cancel="cancelClick('formPassword')">
                <i-form ref="formPassword" :model="formPassword" :rules="ruleformPassword" :label-width="100">

                    <form-item label="原密码" prop="OldPassword">
                        <i-input v-model="formPassword.OldPassword" style="width:200px"></i-input>
                    </form-item>
                    <form-item label="新密码" prop="Password">
                        <i-input v-model="formPassword.Password" style="width:200px"></i-input>
                    </form-item>
                    <form-item label="确认新密码" prop="Password2">
                        <i-input v-model="formPassword.Password2" style="width:200px"></i-input>
                    </form-item>

                </i-form>
          
            </Modal>
        </div>
</div>

    <script type="text/javascript">


        var vmUserInfo = new Vue({
            el: '#personalCenterDiv',
            data : {
               
                    modal1: false,
                   // modal2: false,
                    formValidate: {
                        UserName: '',
                        RealName: '',
                        Company: '',
                        BirthDate: '',
                        Phone: '',
                        TelPhone: '',
                        Address: '',
                        TypeID: ''

                    },
                    myWord:{
                        personInfo: '个人信息',
                        changePassword: '修改密码',
                        submit: '提交',
                        cancel: '取消'
                       
                        
                    },
                    formPassword: {
                        OldPassword: '',
                        Password: '',
                        Password2: ''
                    },
     
                    ruleValidate: {
                        UserName: [
                             { required: true, message: '用户名不能为空！', trigger: 'blur' }
                        ],
                        RealName: [
                             { required: true, message: '真实姓名不能为空！', trigger: 'blur' }
                        ],
                        Company: [
                             { required: true, message: '工作单位不能为空！', trigger: 'blur' }
                        ],
                        BirthDate: [
                             { required: true, type: 'date', message: '出生日期不能为空！', trigger: 'change' }
                        ],
                        Phone: [
                             { required: true, message: '手机号不能为空！', trigger: 'blur' }
                        ],
                        TelPhone: [
                             { required: true, message: '固定电话不能为空！', trigger: 'blur' }
                        ],
                        Address: [
                             { required: true, message: '联系地址不能为空！', trigger: 'blur' }
                        ]

                    },
                    ruleformPassword: {
                        OldPassword: [
                             { required: true, message: '原密码不能为空！', trigger: 'blur' }
                        ],
                        Password: [
                             { required: true, message: '新密码不能为空！', trigger: 'blur' }
                        ],
                        Password2: [
                             { required: true, message: '确认密码不能为空！', trigger: 'blur' }
                        ]
                    }
                
            },
            created: function () {

            },
            methods: {
                handleSubmit:function(name) {
                    var that = this;
                   
                    this.$refs[name].validate(function(valid) {
                        //console.dir(valid);
                        //非空校验通过
                        if (valid) {
                            var getData = {

                                UserName: that.formValidate.UserName,
                                RealName: that.formValidate.RealName,
                                Company: that.formValidate.Company,
                                BirthDate: that.formValidate.BirthDate,
                                Phone: that.formValidate.Phone,
                                TelPhone: that.formValidate.TelPhone,
                                Address: that.formValidate.Address

                            }
                            //console.dir(getData);
                            that.$http.post('@Url.Action("SetLoginUserInfo", "Account")', getData).then(function (result) {

                                if (result.data.success) {

                                    that.instance("success", "提交成功！");
                                }
                                else {
                                    that.instance("error", "提交失败！");

                                }

                            }, function (response) {


                            });


                        } else {
                            that.instance("warning", "不能存在空值！")


                        }
                    })
                },

                handleReset: function(name) {

                    this.$refs[name].resetFields();
                    window.location = '/Ecology';
                },
                okClick: function(name) {
                    var that = this;
                    //非空校验
                    this.$refs[name].validate(function (valid) {
                        // console.dir(valid);
                        if (valid) {
                            var getData = {
                                UserName: that.formValidate.UserName,
                                OldPassword: that.formPassword.OldPassword,
                                Password: that.formPassword.Password,
                                Password2: that.formPassword.Password2

                            }
                            // console.dir(getData);
                            that.$http.post('@Url.Action("SetUserPassword", "Account")', getData).then(function (result) {
                             //   console.dir(result.data.msg);
                                if (result.data.success) {
                                    that.instance("success", result.data.msg);
                                    ;
                                }
                                else {
                                  //  console.log("error:SetUserPassword");
                                    that.instance("error", result.data.msg);

                                }

                            }, function (response) {


                            });


                        } else {

                            that.instance("warning", "三者都不能为空！");

                        }


                    });

                    //vmUserInfo.formPassword.OldPassword = '';
                    //vmUserInfo.formPassword.Password = '';
                    //vmUserInfo.formPassword.Password2 = '';
                    //删除密码信息
                    this.$refs[name].resetFields();

                },
                cancelClick: function (name) {
                    this.$refs[name].resetFields();
                },
                instance: function (type, message) {

                    const title = '提示信息:';
                    const content = '<p>' + message + '</p>';
                    switch (type) {
                        case 'info':
                            this.$Modal.info({
                                title: title,
                                content: content
                            });
                            break;
                        case 'success':
                            this.$Modal.success({
                                title: title,
                                content: content
                            });
                            break;
                        case 'warning':
                            this.$Modal.warning({
                                title: title,
                                content: content
                            });
                            break;
                        case 'error':
                            this.$Modal.error({
                                title: title,
                                content: content
                            });
                            break;
                    }
                }
            },
            mounted: function () {
                var that = this;


                that.$http.post('@Url.Action("GetLoginUserInfo", "Account")', {}).then(function (result) {
                    //  console.dir(result);
                    if (result.data.success == true) {
                        if (result.data.rows != undefined && result.data.rows != null) {

                            if (result.data.rows.TypeID != null) {
                                if (result.data.rows.TypeID == 1) {
                                    vmUserInfo.formValidate.TypeID = "普通用户";
                                } else if (result.data.rows.TypeID == 2) {
                                    vmUserInfo.formValidate.TypeID = "管理员";
                                }
                            }
                            vmUserInfo.formValidate.UserName = result.data.rows.UserName;
                            vmUserInfo.formValidate.RealName = result.data.rows.RealName;
                            vmUserInfo.formValidate.Company = result.data.rows.Company;
                            vmUserInfo.formValidate.BirthDate = result.data.rows.BirthDate;
                            vmUserInfo.formValidate.Phone = result.data.rows.Phone;
                            vmUserInfo.formValidate.TelPhone = result.data.rows.TelPhone;
                            vmUserInfo.formValidate.Address = result.data.rows.Address;
                        }


                    } else {
                      //  console.log("error:GetLoginUserInfo");

                    }

                }, function (response) {


                });
            }

        });





    </script>

　　

转载于:https://www.cnblogs.com/hao-1234-1234/p/8868328.html

iView-admin 动态路由问题的解决方法
10-17
总结起来，解决iView-admin动态路由问题的关键在于理解Vue Router的动态路由机制，以及如何在应用中正确管理和更新路由状态。通过调整跳转方法和更新标签列表处理逻辑，可以确保动态路由参数得到妥善处理，避免出现...
iView框架问题整理小结
10-17
在使用iView过程中，可能会遇到一些常见问题，以下是对这些问题的详细解答： 1. **import Vue from 'vue';** 这句话在JavaScript中表示导入Vue.js模块并将其赋值给变量Vue。`import`是ES6的模块导入语法，用于加载...
vue+iview 使用v-html属性显示html代码并调用方法
weixin_44671162的博客
02-24 3640
使用v-html属性显示html代码并调用方法项目架构使用window对象的原因场景1这是定义方法/变量这是赋空方法/变量不使用window对象，使用h5中的标签属性html部分方法区v-html代码 项目架构 vue +iview 使用window对象的原因 需要自己拼接HTML代码 即使用 v-html 属性 在自己拼装的html代码中添加方法 使用的是 οnclick="changeSelBtn(’ + a + ',2)" 这个方法不能直接调用到vue中的 methods 中的方法 暂时定义了wi
iview UI的Table组件数据刷新但是页面不刷新的问题
S筱潇S四维Smile
11-16 1694
iview UI的Table组件数据刷新但是页面不刷新的问题
vue多页面热更新缓慢原因以及解决方法
谈笑风生
07-22 8559
vue 多页面热更新缓慢问题解决热更新慢的原因解决方法 热更新慢的原因 多页面就是多入口，会生成多个html文件，之前我基本都是单页面，因为是单入口没有这个问题，当偶然间接触了一个多页面的项目发现了热更新很慢的问题，这当然很不舒服，就开始查方法，可能要2，3分钟，这个和webpack配置里面的 HtmlWebpackPlugin 插件性能有问题当生成html文件多的时候会很慢，越多越慢。原因就是这...
Vue某些情况下 v-model绑定数据不实时更新解决办法
热门推荐
weixin_42213951的博客
10-26 3万+
有的时候我们变化data内的内容，console.log打印的时候是显示已经变化了的，但并没有渲染到界面上去。因为vue在渲染的时候对于数组对象里面的的变化是不能及时渲染到的（这是我个人浅薄的理解），受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它...
浅谈关于iview表单验证的问题
10-17
iview表单验证中的问题主要涉及到select选择器的验证问题以及时间日期格式的验证问题。在select选择器的场景中，iview默认将数据类型校验为字符串，如果使用number类型作为select的value值，就可能出现校验不通过的...
iview同时验证多个表单问题总结
10-17
本文针对iview中同时验证多个表单时可能出现的问题进行了总结。 首先，我们来看单个表单验证的两种常见写法。第一种是通过在按钮点击事件中加入要验证的表单标识来完成验证： ```javascript ("addAreaForm")'>确定 ...
基于iview的树型结构，使用html页面中引入vue构建树
05-12
Tree树形组件是 iview 中相对复杂的一个组件。 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加...这个demo是几个较为简单的示例，主要记录一下普通的html怎么结合iview的树型组件。。
vue单页应用如何在页面刷新时保留状态数据
weixin_33690963的博客
03-13 3778
在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你 一、问题 现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前的页面要保持一致。 这时候就需要我们保存刷新之前页面的状态。 二、一种解决方案 在这个Vue单页应用中，王二是用Vuex作为状态管理的...
iView框架之Input输入框
a3060858469的博客
04-14 3万+
重点：https://www.iviewui.com/components/input
iview中刷新页面的时候更新导航菜单的active-name
冰雪为融的博客
10-20 1万+
在做项目的时候，遇到一个问题，当刷新页面的时候，导航的激活菜单和当前显示的组件不匹配，查了一下官网（https://www.iviewui.com/components/menu），寥寥几句话就说完了，至于怎么实现没有详细说明 Menu methods: 方法名    说明    参数 updateOpened    手动更新展开的子目录，注意要在 $nextTick 里调用    无 up...
iview的跳转路由刷新页面
meng16的博客
03-31 1701
一、问题产生： 使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。如果想强制刷新，可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件 二、问题解决： <div...
iview的组件table中渲染标签内容带html元素
lotte
05-05 4095
iview的组件table中渲染标签内容带html元素 { title: "标题", key: "cleanTitle", align: "left", className:'cleanTitle', render:(h,params)=>{ return h("div",{domProps:{ innerHTML:`<a href=`+param...
iviewUI使用中遇到的问题与解决方案（一）
驚鴻入梦
01-03 1万+
项目中使用的iviewUI的版本是2.7.3，在使用中遇到的问题总结了一些，后续会更新，如果各位大神有遇到的坑欢迎评论补充1、modal的样式要放到最外面，否则样式给不到；2、iview组件的事件@on-change=fn,fn后面没有‘(参数)’；3、router-view不能放到tabs里面，组件会渲染两次，要把它单独拿出来4、FormItem里面input或者select不能用:model动
iview树型组件在HTML页面中的应用与自定义
资源摘要信息:"本文档介绍了如何在基于iview的树型结构中使用HTML页面引入Vue进行树的构建。iview树形组件是一个相对复杂的组件，但通过自定义Render函数，可以灵活地自定义节点内容和交互，如添加图标、按钮等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值