我家自动化

这个屌丝很懒，什么也没留下！

热门标签

vue 笔记_this.$prompt

作者：我家自动化 | 2024-07-30 13:38:48

踩

this.$prompt

Vue.之. 动态设置按钮Disabled

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

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

https://www.cnblogs.com/xuxiaoyu/p/13202339.htmlhttps://www.cnblogs.com/xuxiaoyu/p/13202339.htmlhttps://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 失去焦点https://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 详细代码https://www.jianshu.com/p/b1695ceb1876

「无刷新跳转」window.history两个新方法pushState和replaceState详解_飞歌Fly的博客-CSDN博客_window.history.statehttps://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）属性

vue cookie

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'

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/903963

vue 笔记_this.$prompt

Vue.之. 动态设置按钮Disabled

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

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

vue 主动失去焦点

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

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

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

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

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

vue cookie

el-date-picker如何设置disabled（picker-options）属性

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

纯js中使用Message、MessageBox的方法

el-date-picker如何设置disabled（picker-options）属性

vue cookie

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

import 引入要不要花括号

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

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