杂七杂八

286 阅读1分钟

vue3.0路由匹配

  {
    path: '/:pathMatch(.*)*',
    name: '404',
    component: () => import('../views/pages/404.vue'),
    meta: {
      requireAuth: false
    }
  }

js

当月开始/结束日期

/**
 * @returns {string} 当月开始日期
 */
export function getCurrentMonthFirstDay() {
  var date = new Date()
  date.setDate(1)
  var month = parseInt(date.getMonth() + 1)
  var day = date.getDate()
  if (month < 10) {
    month = '0' + month
  }
  if (day < 10) {
    day = '0' + day
  }
  return date.getFullYear() + '-' + month + '-' + day
}
/**
 * @returns {string} 当月结束日期
 */
 export function getCurrentMonthLastDay() {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  month = month < 10 ? '0' + month : month
  var day = new Date(year, month, 0)
  return  year + '-' + month + '-' + day.getDate()
}

时间格式(Moment.js 日期处理类库:momentjs.cn/)

    Date有个toJSON方法,现在大部分环境都可用的。它的结果是类似

     2017-02-18T22:33:48.322Z
    距离YYYYMMDD格式最接近,但是toJSON没有根据时区打印,有个取巧的方法

    let date = new Date();
    date.setMinutes(date.getMinutes() - date.getTimezoneOffset()); // toJSON 的时区补偿
    date.toJSON().substr(0, 13).replace(/[-T]/g, ''); //2017021822
    把T和Z和毫秒去掉就正好是YYYY-MM-DD H:i:s

get请求加上时间戳

ajax请求如果和上次地址相同,就有可能直接读取缓存的内容,而不再次获取最新数据了。
所以可以再url地址后面加个变量-->目前时间  var timenow = new Date().getTime();
// url:"你的url地址?t="+timenow
// url:"地址?传递的数据+"&key="+timenow,
//设定一分钟更新一次时间戳
let timeStamp = `t=${parseInt(new Date().getTime()/(1000 * 60))}`;
if (config.url.indexOf('?') > -1) {
    timeStamp = '&' + timeStamp; // 有参数
} else {
    timeStamp = '?' + timeStamp; // 无参数
}
因为时间是在变的  ,所以你获取的url是不一样的

打印 github.com/xyl66/vuePl… blog.csdn.net/qq_37604640…

      <!-- <iframe :src="iframeSrc" scrolling="auto" frameborder="0" id="iframe" class="printBox"></iframe> -->
      document.getElementById('iframe').contentWindow.print() <style media="print">
 // 获取子页面(调用子页面方法)
     let fwin = document.getElementById("emrIframe").contentWindow;
      // this.saveDisabled = true;
      this.$store.commit('app/saveDisabled', true)
      fwin.saveData();
 // 去除页头页尾
  @page {
   size: auto;
   margin: 0mm;
  }

css

计算属性
   width: calc(100% - 400px); 这里的意思是设置宽度比100%的宽度少20px。
不定高,文本溢出省略号,设置行数
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
文本溢出隐藏
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

vue 过渡动画

不设置 name:v-enter ... 

<transition name="你要的名字">
  过渡的元素...
</transition>

你要的名字-enter             进入前效果
你要的名字-enter-active     进入的过渡时间和函数
你要的名字-enter-to         进入后效果
你要的名字-leave             离开前效果
你要的名字-leave-active     离开的过渡时间和函数
你要的名字-leave-to         离开后效果

2.0插件

image.png

输入框限制数字

<input maxlength="4" v-model="code"  oninput="value = value.replace(/[^0-9]/g,'')" placeholder="请输入手机验证码">

build去除conlose

插件:babel-plugin-transform-remove-console
babel.config.js 文件中添加

let plugins = [];
if (process.env.NODE_ENV === "production") {    // if判断是否打包,打包环境下控制台去掉console.log,也可去掉if判断,整个项目不会出现console.log(不建议)
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: plugins
};

移动端调试

下载:npm install vconsole
引入:import VConsole from 'vconsole';
初始化:new VConsole();

iframe: 传值

juejin.cn/post/684490…