qq_42489210的博客

原创 按照条件 加载引入的 import 模块

干货开始了！好不容易搞出来，记录一下；方案一：将 import 改成异步加载，这个方案不太好，看你需求吧。let TIM;if (true) { import("tim-js-sdk").then((something) => { TIM = something; console.log(TIM.TYPES.GRP_MEETING); // 这里打印没问题 }); console.log(TIM.TYPES.GRP_MEETING); // 这里打印 -

原创 封装一个好玩的小插件 - 01 - 计数

<template> <span ref="refData"></span></template><script>import { CountUp } from "countup.js";export default { props: { countNum: { type: Number, default: 0, }, }, watch: { $route: ...

原创 海康引入项目步骤记录一下

原创 css 背景模糊

backdrop-filter: blur(2px) brightness(50%); background-color: rgba(0, 0, 0, .1);

原创 elementUi 回车登录

<el-input @keyup.enter.native="handleLogin"/>额....就这一句，别的木有了。。。handleLogin 这个是就是登录方法的名字...

原创 echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

https://www.cnblogs.com/zzcyeah/p/10220978.htmltooltip: { trigger: "axis", formatter: function (params) { var result = ""; var dotHtml = '<span style="display:inline-block;margin-right:5px;bor

原创 字体 & 滚动条 & element 图标 ICON & elemntUi 默认主题

css/*自定义字体*/@font-face { font-family: "Furore"; src: url("./fonts/Furore/Furore-webfont.woff2") format("woff2"), url("./fonts/Furore/Furore-webfont.woff") format("woff"), url("./fonts/Furore/Furore-webfont.ttf") format("truetype"), url(

原创 vue_导出 excel 表格

使用方法：https://segmentfault.com/a/1190000020540788改变下载的格式，用这个链接：https://www.cnblogs.com/jdWu-d/p/13396548.html案例：keyPersonExport(params) { return axios({ url: "/fixed/keyPerson/export", responseType: "blob", //这里注意一下，请求一定要加上，

原创 线上与生产环境配置的参数

//dev.env.jsmodule.exports = { NODE_ENV: '"development"', BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',}//prod.env.jsmodule.exports = { NODE_ENV: '"production"', BASE_API: '"https://prod-xxx"',}线上或者测试环境接口的 ba.

原创 001 - Vue - 跨域

一、cors全称为 Cross Origin Resource Sharing（跨域资源共享）二、在 dev 开发模式下可以下使用**webpack 的 proxymodule.exports = { dev: { // Paths assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/fixed": { target: "xxxxxx",..

原创 Vue项目 - 兼容性问题 babel-polyfill

本项目暂时没有兼容性需求，如有兼容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用npm install --save babel-polyfill //下载依赖在入口文件中引入import 'babel-polyfill'; // 或者 require('babel-polyfill');//es6import 'babel-polyfill'; // 或者 require('babel-polyfill');//es6..

原创 路由懒加载

const Foo = resolve => require(['./Foo.vue'], resolve)//或者const Foo = () => import('./Foo');

原创 element 原生时间 click 不执行咋整

官方说明了所有的原生事件必须添加 .native 修饰符。

原创 Vue - keep-alive 动态组件标签

案例1：Tabs 切换卡keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 它是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。<!--代码演示--> <el-tabs v-model="activeTab"> <el-tab-pane label="简介及公告" name="announcement"> <announcement /> </el-tab-pane>

原创 Vue - 计算属性 [computed]

1. 这里主要讲的是 v-for in computed<li v-for="n in evenNumbers">{{ n }}</li>data: { numbers: [ 1, 2, 3, 4, 5 ]},computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 })

原创 axios 拦截器

import axios from 'axios'import { Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// 创建axios实例const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间}).

原创 router - mate 路由验证

路由配置 （mate 路由的标签）const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } /.

原创 快捷复制 - element 表单 & 表格

<el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-position="left" label-width="120px" > <el-form-item label="核酸结果"> <el-select .

原创 登录 catch 用法

点击登录，接口用 catchthis.$store.dispatch('LoginByUsername', this.loginForm).then(() => { this.$router.push({ path: '/' }); //登录成功之后重定向到首页}).catch(err => { this.$message.error(err); //登录失败提示错误});...

原创 swiper 上下无缝滚动

https://www.codeleading.com/article/53391064938/

原创 vue 中如何引入 juqery

https://www.cnblogs.com/zhoujuan/p/11713746.html

原创 vuex - 模块 modules 使用

使用：1. 自己定义一个modules.js 文件let modules = { counter: { state: { conuntNum: 0 }, mutations: { conuntNum(state, data) { state.conuntNum += data; } } }};export default modules;2. 引入vuex / index.js 中导入 m..

原创 vue-countdown

官网：https://www.npmjs.com/package/vue-countdown

原创 【登录验证】 - jsencrypt/bin/jsencrypt 前端加密 cookie

使用方式：https://www.jb51.net/article/159904.htm如何使用：https://blog.youkuaiyun.com/u013344993/article/details/79984968

转载 【登录 - 使用cookie】vue 如何使用 cookie

https://www.jianshu.com/p/60c13168cc8f

原创 【element 验证步骤，自己做的笔记，记录一下】

util.js/** * 正则验证 */ isEmpty(rule, value, callback) { if (value === "") { return callback(new Error("不能为空")); } callback(); }, limitChinese(rule, value, callback) { var pattern = /^[\u4e00-\u9fa5]+$/; if (!pattern.t.

原创 监听 vuex 中的数据

两种方法，看你怎么用第一种computed: { monitor() { return this.$store.state.keyword; }, }, watch: { monitor() { this.keyword = this.$store.state.keyword; console.log(this.keyword, "监听到了"); }, },第二种watch: { "$store.st

原创 子组件接收值

props:{ a:{ type:String, default: 'a' }, b:{ type:Number, default: 0 }, c:{ type:Object, default: ()=>{ return {} } }, d:{ type:Array, de.

原创 输入框【只能输入数字】

<el-inputmaxlength="6"v-model.number="scoped.row.notRepetitionInterval"></el-input>

原创 时尚新语法 - 时尚时尚真时尚

let a = 1;a === 1 && console.log(2)// 2

原创 格式化数据

<el-table-column prop="sjzt" label="数据状态" align="center" :show-overflow-tooltip="true" :formatter="this.util.tableformatter" > tableformatter(row, column, cellValue) { // 无值显示 -； .

原创 正则手机号

不是完整的11位手机号或者正确的手机号前七位varpattern=/^1[3|4|5|8][0-9]\d{4,8}$/;

原创 正则知识点

则表达式中/i,/g,/ig,/gi,/m的区别和含义/i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找、忽略大小写)/ig(全文查找、忽略大小写)----------------------------------------------------------------------------------------------------------------------------------------------------------

原创 element ui 验证

// ref="form" ref="form"<el-form ref="form" :model="form" :rules="rules" style="width:100%;" label-width="90px" >// prop="fbmxh"<el-form-item label="添加部门" prop="fbmxh"> <el-cascader .

原创 vue 分页

<el-footer><divref="pageheight"class="table-page"><pagination:total="total":page.sync="pageIndex":limit.sync="pageSize"@pagination="handlePageChange"/>...

原创 给 elementUi 设置图片 && 字体

图标.el-button.iconadd{width:12px;height:12px;background:url(../assets/img/add.png)no-repeat;background-size:100%100%;字体@font-face{font-family:"Furore";src:url("./fonts/Furore/Furore-webfont.woff2")format("woff...

原创 tree - 事件

callersChange(checkedNodes, isChange) { // console.log("1------>", checkedNodes, isChange); }, checkChange(data, isSelect) { let arr = this.form.cdidList; if (isSelect) { arr.push(data.id); console.log("添加的...

原创 img 路径问题

<img :src='require("../assets/home/logo.png")'

原创 git 提交时常发生的冲突

One：! [rejected] master -> master (non-fast-forward)error: failed to push some refs to 'ssh://192.168.30.10:29418/handan/handan-eco.git'Solve:git pull origin master --allow-unrelated-histories将另个版本不兼容的分支，合并到一个分支，pull 不会影响远程分支，并且代码...

原创 水球图案例详解

复杂版本，可以npm 装好 echarts 和 echarts-liquidfill 之后，直接复制代码运行即可看到。摘取自己有用到的地方就行。如果你觉得有用别忘记点赞收藏~npm 版本 "echarts": "^4.9.0", "echarts-liquidfill": "^2.0.6",sqt() { var myChart = this.$echarts.init(this.$refs.sqt); var option = { .