qq_40881695的博客

【代码】【vue】晋升路线图、蛇形进度条。

https://blog.youkuaiyun.com/weixin_49295874/article/details/130635106https://blog.youkuaiyun.com/qq_56989560/article/details/124706021https://blog.youkuaiyun.com/yuyuking/article/details/89374794https://blog.youkuaiyun.com/change_any_time/article/details/128432819https://blog.csd

字幕滚动

vue按钮权限

Storage二次封装

高德地图 ----- 播放视频

vue 大屏导航跳转

vue 天气插件

el-select 数据回显的两种情况

vue动态组件

简单理解插槽传递内容

vue 父子组件通信

el-dialog__body 中的内容是懒加载

1. 安装npm install vue-barcode --save2. 引入注册import VueBarcode from 'vue-barcode';components: { VueBarcode}3. 使用<vue-barcode value="value-to-render" :width="1.5" :height="50"> Show this if the rendering fails.</vue-barcode>参考链接：

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）1. qrcodenpm i qrcodejs2 --save<div class="qrcode" ref="qrCodeUrl"></div><script>import QRCode from 'qrcodejs2'export default { data() { return { }, methods: { creatQrCode() {

1. 问题复现Failed to load resource: net::ERR_UNSAFE_PORT2. 解决方法后台修改端口即可

1. 新建文件在 根目录 下新建 .env.development 和 .env.production 两个文件.env.development# 生成环境服务URLVUE_APP_BASE_URL='ip+port'NODE_ENV= development.env.production# 生成环境服务URLVUE_APP_BASE_URL='ip+port'NODE_ENV= production2. 区分环境通过 NODE_ENV 区分当前环境3. 使用pro

1. 效果展示2. 代码想要实现vue动态改变页面title，需要给每个页面设置标题。并且在路由发生变化时修改页面title// router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Report from '../views/report.vue'import Query from '../views/query.vue'import Detail from '../views/deta

参考链接：https://github.com/panboren/vue-qrcode-readerhttps://blog.youkuaiyun.com/zhangtian_tian/article/details/1052267161. 效果图2. 开启 https需要在 https 协议下才可以调用相机，实现扫码。可以通过配置 vue.config.js 中的 devServer:{https:true}或 前端使用Nuxt框架，配置本地https访问 配置本地证书3. 安装 vue-qrc

1. demo2. 错误写法解释： 开始点击的时候不会报错，当点击遮罩层时，子组件会改变 show 的值，官网不建议修改 prop 值，所以报错// 父组件<nav-bar title="首页" leftIcon="user-circle-o" rightIcon="scan" @userInfo="onUserInfo" /><user-info :show="popupShow" />data() { return { popupShow: fa

视频监控，多模式显示

转载：https://www.jianshu.com/p/35fd3b541c24编写动画效果// src/components/loading.vue<template> <div class="loading"></div></template><script>export default {};</script><style lang="less" scoped>.loading {.

转载：https://blog.youkuaiyun.com/ww_1069955/article/details/119684898准备 在 [阿里巴巴图标库](https://www.iconfont.cn) 中下载 svg 文件，放在 src/icons/svg文件夹下，文件命名与使用时一致即可实现安装npm i svg-sprite-loader配置 vue.config.jsconst path = require("path");function resolve(dir) {.

1. 定义函数// 单位为毫秒function dateFormat(val) { const dt = new Date(val) // padStart字符串补全 const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.getHours() +

一. 安装依赖npm install vue-i18n二. 创建文件在src目录下先创建一个lang 文件夹,再创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件, en.js和zh.js必须保持一致en.js:export default { m: { music: 'MUSIC', friend: 'FRIEND' }, placeholder:{ data: 'select date' }zh.js:e

一. 安装依赖创建项目并安装element创建项目略，安装element略，上官网查看怎样安装配置。安装主题工具npm i element-theme -g 不要使用这个命令，否则运行 et -i 时可能会报错（primordials is not defined错误）cnpm i element-themex -g 建议使用这个命令，且不要使用npm安装，暂且不知道为什么要使用这个命令，如果有大佬知道，烦请指出安装chalk主题，可以从 npm 安装或者从 GitHub

一. 安装依赖安装依赖yarn add pikaz-excel-jsnpm i -S pikaz-excel-jscdn方式<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pikaz-excel-js"></script>或者<script type="text/javascript" src="https://unpkg.com/pikaz-excel-js">&

vue 过渡和动画

1. 实现效果前期准备1. 安装依赖npm install --save js-base642. 在src目录下的utils文件中创建cooki.js文件，没有utils的话创建一个utils文件夹，cookie.js内容如下：// 获取cookieexport const getCookie = (key) => { if (document.cookie.length > 0) { var start = document.cookie.indexOf(key +

下载excel模板、导入Excel文件、导出Excel文件

效果图1. html父元素下存放四个span标签，分别代表四个边框<!--数据统计 --> <el-col class="dataCount"> <span class="border"></span> <span class="border"></span> <span class="border"></span> <sp

github的cropperjs文档仓库地址：https://github.com/fengyuanchen/cropperjs安装cropperjsnpm install cropperjs使用cropperjshtml1. 使用label的for属性和input进行绑定，实现点击label中的内容，相当于点击了input，达到上次图片功能2. input的属性hidden相当于display:none3. @change="onFileChange"是input本身支持的图片改变事件.

element-tiptap官网仓库： https://github.com/Leecason/element-tiptap/blob/HEAD/README_ZH.md效果如下下载element-tiptapnpm install --save element-tiptap在main.js中引入该插件import Vue from 'vue';import ElementUI from 'element-ui';import { ElementTiptapPlugin } from .

1. 后端接口返回数据最好后端能够返回组织下的所有子组织树，不然前端处理很麻烦postman测试后端接口返回的数据，我这里是指定组织下的所有子组织树{ "errCode": 200, "errMsg": "OK For ums", "nodeTree": { "orgID": 0, "orgName": "天津武警总队", "parentID": 0, "orgPath": "0/0", "chil

axios 简单和复杂方式封装接口

官方文档 https://router.vuejs.org/zh/guide/控制用户访问权限路由导航守卫路由导航守卫，所有页面的导航都会进过这里，相当于路由导航的门卫to：即将要进入的目标路由对象from：当前导航正要离开的路由next: 是否允许通过判断用户是否有登录状态（token），如果没有跳转到登录页，如果有允许跳转到指定页面router.beforeEach((to, from, next) => { const token = window.localSto.

axios官方仓库 https://github.com/axios/axios请求拦截器请求拦截器的实际应用场景在进行鉴权的时候；我们每个接口都需要携带token;难道每次我们都需要手动拼接token;这个时候拦截器就很有用了；这时候就可以用拦截器来使token自动增加import axios from 'axios'// 创建一个axios实例const request = axios.create({ baseURL: 'http://api-toutiao-web.ithe.

效果图1. 使用el-container搭建布局src下的目录结构layout文件夹下的index.vue<template> <!-- element-ui布局 --> <el-container class="layout-container"> <el-aside width="200px" class="aside"> <!-- 使用自定义组件 ,可以使用驼峰命名-->

1. html<el-form :model="userForm" status-icon :rules="rules" class="login-form" ref="userForm"> <el-form-item class="login-head"></el-form-item> <el-form-item prop="mobil

创建一个用户代码片段在创建的模板中输入{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " ", " </div>", "</template>", "", "<script>", "export defau