VUE

element DatePicker禁用日期

要实现的效果如下： 具体的需求是实际上班日期才可以进行选择， html：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div class="block">
    <span class="demonstration">日期禁用</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const noFilters = ['10/15', '10/16']
const filters = ['10/26', '10/27']
export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            // 今天以前不可选
            let isBeforeToday = time.getTime() < Date.now() - 172800000;
            if(isBeforeToday) return true
            
            // 周六、周日也要上班的日子要可以选择（法定节假日调休）
            let isForceEnableDay = noFilters.some(i => {
              return time.getTime() == new Date('2022/'+ i).getTime()
            })
            if(isForceEnableDay) return false
            
            // 周六、周日要禁用
            if(time.getDay() == 0 || time.getDay() == 6) {
              return true
            }
            
            // 工作日放假的日子要禁用（法定节假日）
            let isForceDisableDay = filters.some(i => {
              return time.getTime() == new Date('2022/'+ i).getTime()
            })
            if(isForceDisableDay) return true
          }
        }
      };
    }
  };

 

Element 2022年10月10日 166 浏览 评论已经关闭

vue中给一段字符串添加绑定事件

vue视频教程

你向数组中push了一段html代码，格式是字符串的，类似如下面这样

1
this.msgList.push(`<img src="${res.data.data.url}" />`)

在template中你是这样显示的：

1
2
3
<ul class="msg-list" ref="msglist">
  <li v-for="(item, index) in msgList" :key="index" v-html="item"></li>
</ul>

现在要求img点击可以预览图片。咱们暂…

VUE 2020年1月21日 2,410 浏览 评论已经关闭

Vue实例里this的指向问题

vue视频教程

vue文档里有一句话： All lifecycle hooks are called with their ‘this’ context pointing to the Vue instance invoking it. 意思是：在Vue所有的生命周期钩子方法（如created，mounted， updated以及dest…

VUE 2019年8月29日 1,343 浏览 评论已经关闭

JS减少if else嵌套，以及for循环下的if判断中跳出循环

Javascript视频教程

我原来的代码是四五层if else，像金字塔一样，真的糟心， 最近做项目时遇到多个条件判断，方法里面if else嵌套太多，优化一下 一直用ES6的forEach和map，才知forEach中不支持终止循环，然后for-in好像问题挺…

Javascript 2019年4月28日 2,644 浏览 评论已经关闭

Vue element el-form表单提交 敲击enter键时 url上会自动加上问号？并刷新页面解决办法

1
2
3
4
5
6
7
8
<el-form @submit.native.prevent>
   <el-form-item :inline="true">
       <el-input @keyup.enter.native='onSubmit'></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="onSubmit></el-button>
  </el-form-item>
</el-form>

注意： 鼠标事件导致页面刷新问题，在el-form上增加 @submit.native.prevent 可阻止页面刷新 欢迎留言，1小时内回复 我已经用vue+element做过好几个大型项目，遇到过不少…

Element 2019年4月25日 2,208 浏览 评论已经关闭

Vue好用插件大全（持续更新）

vue视频教程

下面这些插件在github上都能搜得到，我就不一一提供地址了 1，driver.js 页面引导 这是啥呢，就是你打开一个页面的时候，提示你第一步怎么做，第二部怎么做 或者，这次版本更新这个模块有什么改动，那个模块…

Element 2019年4月22日 2,219 浏览 评论已经关闭

Vue项目配置开发环境，生产环境接口地址，打包build目录更改，router路由守卫

vue视频教程

1，配置接口地址 修改项目的接口地址，直接更改以下文件（重点关注module.exports）： /config/dev.env.js  —-  开发环境接口地址

1
2
3
4
5
6
7
8
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"https://devapi.mkboke.com"'
})

/config/prod.env.js  —-  生产环境…

Element 2019年4月21日 1,851 浏览 评论已经关闭