vue 笔记

Vue.之. 动态设置按钮Disabled

添加了一个 属性 :disabled="isAble"

el-switch 初始值(默认值)不能正确显示状态问题

https://www.cnblogs.com/xuxiaoyu/p/13202339.htmlhttps://www.cnblogs.com/xuxiaoyu/p/13202339.htmlicon-default.png?t=N7T8https://www.cnblogs.com/xuxiaoyu/p/13202339.html【active-value="1" inactive-value="0"】,此时的【active-value】值类型为string,如果要求【active-value】值类型为number时,必须在其前面加上【  : 】 :active-value="1"  :inactive-value="0"

 Vue使用v-for与v-if搭配满足条件进行赋值,和v-if三目表达式的使用

Vue使用v-for与v-if搭配满足条件进行赋值,和v-if三目表达式的使用_Java小皮孩-CSDN博客

vue 主动失去焦点


vue中主动失去焦点_old_hu的备忘录-CSDN博客_vue 失去焦点icon-default.png?t=N7T8https://blog.csdn.net/weixin_43565820/article/details/102696740

 关于解决el-select组件自动清除数据空格的问题
关于解决el-select组件自动清除数据空格的问题_string佳佳的博客-CSDN博客用el-select组件渲染ydlbmc字段,数据里面有空格,但是渲染上去的时候空格被组件自动清除了解决方法一:在拿到数据的时候循环数组对象,把ydlbmc字段的空格替换成" &nbsp ;",并使用v-html来解析数据<el-select v-model="selForm.ydlbValue" clearable placeholder="请选择"> <...https://blog.csdn.net/weixin_44171757/article/details/99410574

element-ui $prompt输入弹框和$confirm确认弹框用法&输入校验

            this.$prompt(
                '请输入文件夹名称:', 
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: '输入框默认值',
                    inputErrorMessage: '输入不能为空',
                    inputValidator: (value) => {       // 点击按钮时,对文本框里面的值进行验证
                        if(!value) {
                            return '输入不能为空';
                        }
                    },
                    // callback:function(action, instance){
                    //     if(action === 'confirm'){
                    //         // do something...
                    //         console.log(instance.inputValue);
                    //     }
                    // }
                }).then(({value}) => {
                    console.log(value);
                    // TO DO DO ...
                }).catch((err) => {
                    console.log(err);
                });  

使用this.$prompt弹窗判断手机号码数量验证

this.$prompt('请输入手机号码或座机号', '客服电话', {
	confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValidator: (val) => {
    	if (val === null) {
        	return true;
        }
        return !(val.length > 11 || val.length < 11)
   },
   inputErrorMessage: '格式不正确'
   }).then(function (action) {
      console.log(action);
   }).catch(function (cancel) {
      console.log(cancel);
   })

Vue的$confirm确定框提示内容换行显示

Vue的$confirm确定框提示内容换行显示_ChuaWi98的博客-CSDN博客XXXfunction(status){ let confirmText = []; if (status === 2) { confirmText = ['是否发布该活动?', '注意:活动发布后允许查看,但不可再编辑!'] }else if (status === 3) { confirmText = ['是否停止该活动?', '注意:活动停止后允许查看,但不可再发布!'] } const newDat...https://blog.csdn.net/weixin_44316527/article/details/116517239

 vue.js click点击事件获取当前元素对象

Vue.js可以传递$event对象

<body id="app">
  <ul>
    <li v-on:click="say('hello!', $event)">点击当前行文本</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <script>
   new Vue({
       el: '#app',
       data: {
        message: 'Hello Vue.js!'
       },
       methods: {
        say: function(msg, event) {
           //获取点击对象      
           var el = event.currentTarget;
           alert("当前对象的内容:"+el.innerHTML);
        }
    }
   })
  </script>
 </body>

elementui中el-button点击后强制失去焦点(this.$confirm取消后按钮聚焦问题)

 clickHandler(evt) {
        let target = evt.target;
        if(target.nodeName == "SPAN"){
            target = evt.target.parentNode;
        }
        target.blur();
}

vue cookie

VUE:vue通过cookie获取用户登录信息_Schon_zh的博客-CSDN博客_vue获取cookie思路进入页面若未登录,跳转至登陆页面若已登录,从cookie中获取用户信息,并执行后续操作2. 登录页面,存入cookie(setCookie)import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode ===...https://blog.csdn.net/u011374582/article/details/83036707

el-date-picker如何设置disabled(picker-options)属性

el-date-picker如何设置disabled(picker-options)属性_小二,来了的博客-CSDN博客el-date-picker如何设置disabled(picker-options)属性方法一<el-date-picker format="yyyy-MM-dd" v-model="startTime" size="mini" @change="startToEnd(startTime,issue.guaranteePeriod)":picker-options="pickerOptions"></el-date-picker>data() { return {https://blog.csdn.net/qq_43258500/article/details/106383573

【vue】页面不刷新情况下修改url参数

【vue】页面不刷新情况下修改url参数 - 简书需求: 如下图所示,税务月改变,修改对应url中的参数,为了用户体验,不能刷新 解决办法: 使用history的pushState或者replaceState 详细代码icon-default.png?t=N7T8https://www.jianshu.com/p/b1695ceb1876

「无刷新跳转」window.history两个新方法pushState和replaceState详解_飞歌Fly的博客-CSDN博客_window.history.stateicon-default.png?t=N7T8https://blog.csdn.net/qq_35430000/article/details/109112718

纯js中使用Message、MessageBox的方法 

import { Message } from 'element-ui'

import { MessageBox } from 'element-ui'


Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000,
          onClose: () => {
            errorMessage = ''
          }
        })

MessageBox.alert(res.message + ',当前页面将关闭!', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            store.dispatch('user/logout')
            return
          }
        })

使用el-button的时候,发现点击按钮后,按钮颜色仍然保持鼠标悬浮上去时候的效果,并没有恢复到正常状态

解决方法:

 clickHandler(evt) {
        let target = evt.target;
        if(target.nodeName == "SPAN"){
            target = evt.target.parentNode;
        }
        target.blur();
}

-----------------------------------时间格式化函数-----------------------------------------------

methods{//   时间格式化
    dateFormat:function(time) {
        var date=new Date(time);
        var year=date.getFullYear();
        /* 在日期格式中,月份是从0开始的,因此要加0
         * 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    },
}

--------------------------vue.js click点击事件获取当前元素对象----------------------------

Vue.js可以传递$event对象

<body id="app">
  <ul>
    <li v-on:click="say('hello!', $event)">点击当前行文本</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <script>
   new Vue({
       el: '#app',
       data: {
        message: 'Hello Vue.js!'
       },
       methods: {
        say: function(msg, event) {
           //获取点击对象      
           var el = event.currentTarget;
           alert("当前对象的内容:"+el.innerHTML);
        }
    }
   })
  </script>
 </body>

-----------Vue的$confirm确定框提示内容换行显示-------------------------------------

Vue的$confirm确定框提示内容换行显示_ChuaWi98的博客-CSDN博客

XXXfunction(status){
  let confirmText = [];
  if (status === 2) {
    confirmText = ['是否发布该活动?',  '注意:活动发布后允许查看,但不可再编辑!']
  }else if (status === 3) {
    confirmText = ['是否停止该活动?',  '注意:活动停止后允许查看,但不可再发布!']
  }
  const newDatas = []
  const h = this.$createElement
  for (const i in confirmText) {
    newDatas.push(h('p', null, confirmText[i]))
  }
  this.$confirm(
    '提示',
    {
    title: '提示',
    message: h('div', null, newDatas),
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
    }
  ).then(() => {
  … …
  })
}

------element-ui $prompt输入弹框和$confirm确认弹框用法&输入校验-------------

            this.$prompt(
                '请输入文件夹名称:', 
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: '输入框默认值',
                    inputErrorMessage: '输入不能为空',
                    inputValidator: (value) => {       // 点击按钮时,对文本框里面的值进行验证
                        if(!value) {
                            return '输入不能为空';
                        }
                    },
                    // callback:function(action, instance){
                    //     if(action === 'confirm'){
                    //         // do something...
                    //         console.log(instance.inputValue);
                    //     }
                    // }
                }).then(({value}) => {
                    console.log(value);
                    // TO DO DO ...
                }).catch((err) => {
                    console.log(err);
                });  



this.$prompt('请输入手机号码或座机号', '客服电话', {
	confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValidator: (val) => {
    	if (val === null) {
        	return true;
        }
        return !(val.length > 11 || val.length < 11)
   },
   inputErrorMessage: '格式不正确'
   }).then(function (action) {
      console.log(action);
   }).catch(function (cancel) {
      console.log(cancel);
   })

el-date-picker如何设置disabled(picker-options)属性

el-date-picker如何设置disabled(picker-options)属性_小二,来了的博客-CSDN博客el-date-picker如何设置disabled(picker-options)属性方法一<el-date-picker format="yyyy-MM-dd" v-model="startTime" size="mini" @change="startToEnd(startTime,issue.guaranteePeriod)":picker-options="pickerOptions"></el-date-picker>data() { return {https://blog.csdn.net/qq_43258500/article/details/106383573

vue cookie

VUE:vue通过cookie获取用户登录信息_Schon_zh的博客-CSDN博客_vue获取cookie思路进入页面若未登录,跳转至登陆页面若已登录,从cookie中获取用户信息,并执行后续操作2. 登录页面,存入cookie(setCookie)import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode ===...https://blog.csdn.net/u011374582/article/details/83036707

v-model和computed结合使用 vue。v-model指向方法

v-model和computed结合使用 vue_随意花的博客-CSDN博客_computed v-model

import 引入要不要花括号

如果不是export default function ,那么在引用的时候应该写成import { XXX } from 'xxxxxxx'

如果是export default function ,那么在引用的时候应该写成import  XXX  from 'xxxxxxx'

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值