刘逃-优快云博客

原创 vue+ts项目想引入第三方js 如jq

1.TS引入js需要声明文件 jquery.js同级别新建jquery.d.ts文件声明export default jquery;然后就能正常使用了

2021-06-11 10:10:36 3045 1

父组件需要在页面加载完成以后调用方法window.onload=function(){ document.getElementById('iframe').contentWindow.postMessage( '传入vue数据', '*', );}子组件需要window.addEventListener添加一个方法window.addEventListener("message", (e) => { e.stopPropagatio

2021-06-10 09:37:27 633 1

原创 vue+ts 使用element国际化以及 i18n

src同级别新建lang文件夹里面包含cn.ts,en.ts,index.ts1:cn.ts/* eslint-disable */const zhLocale = require("element-ui/lib/locale/lang/zh-CN");const cn = { time: '时间', ...zhLocale.default};export default cn;2:en.ts/* eslint-disable */const enLocale = requi

2021-06-09 13:44:06 1460

原创 vue+ts对data变量定义变量约束

可以使用接口约束interface itableData { date: string; name: string; address: number;}interface iData { num: string; count: number; obj: { age: number; name: string; }; tableData: itableData[];}export default { data(): iData { retu

2021-06-09 13:36:23 4523

原创 vue+Ts 报vue ts this报Property ‘x‘ does not exist on type

个人感觉就是TS检测不到this的类型，解决方法如下：1.第一种方法(this as any) 后面跟要调用的就行2.第二种方法//tsconfig.json文件 "strict": false, //改成false //参考链接:https://cn.vuejs.org/v2/guide/typescript.html...

2021-06-09 10:09:37 2704 1

原创前端vue实现element Table表格自适应窗口高度

<template> <div> <el-table :data="tableData" style="width: 100%" ref="table" :height="tableHeight"> <el-table-column prop="date" label="日期"

2021-06-04 10:10:50 2114 1

原创 vue实现table表格嵌入Echarts

<template> <div> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name"

2021-05-19 15:06:48 4431 5

原创 vue使用echarts实现箱线图

<template> <div> <div id="main" style="height:500px;width:600px"></div> </div></template><script>import * as echarts from "echarts";import dataTool from "echarts/extension/dataTool";export de

2021-05-19 10:59:51 2290

原创前端游览器打印方式

1.普通web打印方式 //web打印 let ele = window.document.getElementById('print') var mywindow = window.open('', 'PRINT', 'height=4cm,width=7.2cm'); // const canvas =document.getElementById('qr-patient') mywindow.document.write('<html>

2021-05-06 15:47:33 312

原创 js之forEach怎么跳出循环

第一种：[1,2,3,4,5,6].forEach(e => { if(e==2){ return false; } console.log(e); });第二种:[1, 2, 3, 4, 5, 6].forEach((e) => { if (e == 2) { throw "抛出异常"; } console.log(e);});

2021-04-27 11:32:38 1608

原创 Vue中v-if和v-show与display:none和visibility: hidden的区别

1.v-if和v-show以及display:none都是网页中不占任何的位置。visibility: hidden;只是单纯的隐藏元素，占据位置2.v-if设置为false的时候在控制台状态如下图是注释状态没有实际渲染所以如果使用频繁就使用v-show 因为原理是切换css的display none 所以切换消耗比较低但是初始化会渲染因为v-if的切换需要从新渲染代价过大如果是不频繁就使用v-if 因为初始化如果为false的化不会渲染...

2021-04-27 11:22:08 3931

原创 Vue计算属性computed传参

Vue计算属性computed传参// 因为计算属性不是一个function所以会报错<span>{{getTable(item)}}</span>// 为了解决这个问题我们要使用高阶函数的形式return一个函数computed: { getTable() { return (item) => { return item.num * 1 + item.count * 1; }; }, },这样就可以实现获取

2021-04-20 09:39:39 229 3

原创前端之AES加解密

import CryptoJS from "crypto-js";export default { // encryptString(data) { // return CryptoJS.AES.encrypt(data, "xxxxxxxxxxx").toString(); // //字符串形式 // }, encrypt(data) { var AesKey = 'xxxxxxxxxxx';//加密时用的key,跟php一样 var message = JS

2021-03-24 19:36:55 525 1

原创 JS之根据key值获取url参数

前端获取url携带的参数很多都是切割成数组然后下标获取或者用qs插件获取过于麻烦，而且如果自己切割后期参数添加或者顺序更改会造成切割获取参数不正确，所以下面这个方法就是可以用传参数key得方式获取值。//如果你当前游览器地址是https://editor.youkuaiyun.com/md?articleId=115185037function getUrlKey(name) { return ( decodeURIComponent( (new RegExp("[?|&

2021-03-24 19:28:07 817 2

原创 JS数组常用的方法

JS数组项目中常用的方法1.find 返回与id相等的 const findId = list.find((item)=>{ return item.id === id }) || {}2.filter 数组的过滤返回falg为boolean的let list = [{id:1,falg:true},{id:1,false}] ; let newLsit = list.filter(e=>{ return !e.falg })3.reduce redu

2021-03-23 14:58:06 789 12

原创 vue项目vue.config.js配置打包压缩以及代码分离以及打包后dist文件夹添加时间戳实现更新后无缓存，自动压缩打包后dis文件夹并加上打包时间以及proxy代理

const moment = require('moment');const TerserPlugin = require('terser-webpack-plugin')const FileManageerPlugin = require('filemanager-webpack-plugin');const CompressionPlugin = require("compression-webpack-plugin");module.exports = { configureWebpack

2021-03-15 14:53:13 3429 1

原创 vue封装axios以及elementu-i全局Loading

vue封装axios以及elementu-i全局Loadingimport axios from 'axios';import store from '../../../store';//token我是存在vuex里面并且用持久化插件报错的具体你可以根据自己项目更改// import {// Toast// } from 'vant' //引入vant组件import { Loading, Message } from 'element-ui';const options = { .

2021-03-15 14:43:56 245 1

原创后台管理项目封装表格组件实现项目全部通用

后台管理项目封装表格组件实现项目全部通用1.先创建组件tableData组件在需要表格的地方引入注册使用2.因为每个页面的表格head都是不一样的所以这个需要自己定义首先我们定义一个文件然后定义一个对象名称里面是这个页面的表格head名里面key需要和你的接口里面的key对应 title则是你head显示的title width则是td的宽度3.然后和入口文件main文件同级定义个配置...

2021-03-10 11:05:50 2943 11

weixin_51406830的博客