DanielBlackCat的博客

原创 2021-2024 年 前端面试汇总 （完善中 ···）

2021年Vue 面试题汇总一、Web面试题1.web常见的五种前端布局方式（1）文档布局（text）文档流本质是 nomal flow （普通流、常规流）元素在文档中的特点 块级元素，和内联元素。缺点：在移动端不可以使用pc端的页面，两个页面的布局是不一致的，移动端需要自己再设计一个布局并使用不同的域名呈现（2）浮动布局（float）浮动一般用于让块级元素排成一行在同一行显示任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：in

原创 码云库的创建 与 链接库 & 上传 & 下拉

关于码云的创建流程注意必须去 https://gitee.com/ 创建账号 建立仓库 私有与公开选一个 本人选的公开 其余选项根据个人需要 进行更改私有界面公开界面1.输入你创建出的仓库给你的 name & email 地址$ git config --global user.name “name”$ git config --global user.email “地址”2.clone 一下你的 创建仓库时的地址链接*https://gitee.com/XX

原创 cookie

cookie写好cookie 的 部分作用代码 并把 代码放入 src 下创建好的 utils 文件 准备引入//写cookiesfunction setCookie(name, value, expires) { var exp = new Date(); exp.setTime(exp.getTime() + expires * 1000); document.cookie = name + "=" + escape(value) + ";expires=" + exp

原创 基础拦截器 axios

基础拦截器axiosimport axios from 'axios';const server = axios.create({ baseURL: '', // 基础的URL timeout: 5000, // 超时时间})//请求拦截器// 回调函数是在发请求之前被调用的server.interceptors.request.use(config => { // console.log('aaa') if(localStorage.islogin)

原创 uniapp API文档地址 以及 HBuilder安装

【代码】uniapp API文档地址 以及 HBuilder安装。

原创 VSCode代码格式化

标签之间不换行 搜索 “wrap_attributes” copy 后边的 粘贴 “wrap_attributes”: “aligned-multiple”标签之间换行 搜索 “wrap_attributes” copy 后边的 粘贴 “wrap_attributes”: “force-aligned”

原创 icon旋转 让你的 icon转起来

.icon-loading1{ animation: move 1.2s linear infinite; -webkit-animation: move 1.2s linear infinite; display: inline-block;}@keyframes move { 100% { transform: rotate(360deg); }}让你的 icon转起来icon-loading1 :这个 是你的 icon 的 class 类名copy 上面的

原创 解决Element UI表格 row-key ID 不唯一

<el-table :data="data" border ref="xxx" :key="xxx" :height="height" :size="size" :row-key="rowKeyFunc" :tree-props="{children: 'taskDtoList', hasChildren: 'hasChildren'}" > <..

转载 vue去重

a(){let arr1 = this.unique(res.data.rows);// 调用去重的事件函数this.SalesSelect = arr1 // 接受返回来的值并使用 当然这些变量都是可以更改的}unique(arr) { const res = new Map(); return arr.filter((arr) => !res.has(arr.projectNo) && res.set(arr.projectNo, 1));},可以去原文看看

原创 TypeError: Cannot read properties of undefined (reading ‘‘)

数据传递参数 赋值在created（） 中使用不要在mounted（）中使用这样会导致因为生命周期因素传到的参数，是在加载后出现的。放在 created()中 可以有效解决，标题的报错(reading ‘xxx’) 这个xxx 有可能是你赋值的任意一个值...

原创 moment 解析周

var date = moment("2019-10-09"); // 本周的某一天 var dow = date.day();//判断是本周的第几天 var monday1 = date.subtract(dow-1, 'days').format('YYYY-MM-DD')//本周一 console.log('本周一：',monday1) var monday2 = moment(monday1).subtract(-6, ...

原创 路由跳转 路由跳转并刷新页面

在哪个位置点击的新建 或者跳转 就把这段代码 加到 你所属的 跳转方式下，只需要把 ‘ this.getPipeLineList() ’ 改成 你请求的 数据方法就行methods:{ routego(){ var hiddenProperty = "hidden" in document ? "hidden" : "webkitHidden" in document ? "webkitHidde

原创 moment.js 00:00:00 - 23:59:59 转换时间戳

let t1 = moment(arr2[0]).valueOf()let t2 = moment(new Date(new Date(arr2[1].getTime() + 24 *60 * 60 * 1000 -1 )).valueOf()//arr2 是一个数组 时间格式大致为（‘2020-11-11 00:00:00’）// 用的moment.js 可以一步一步 输出一下 console.log（····）...

原创 webStrom 的 TypeScript热检测

废话不多说截图+重点 中英混合版1.TypeScript2.C:\Users\XXXX\AppData\Roaming\npm\tsc3.FileNameWithoutExtensionFileNameWithoutExtensionFileNameWithoutExtension.js:FileNameWithoutExtensionFileNameWithoutExtensionFileNameWithoutExtension.js.map4.FileDirFileDirFileDir英文

原创 Vue的Scroll滚动事件触发

切记 当你需要滚动事件触发 千万不要加 overflow-y: auto; 一旦加了 就 全是 0例子：去掉 overflow-y: auto;如果你需要把这个页面当做子组件引入 需要加true 因为 ···· 请看最后一张图片 如果不加true 不变成捕获事件 则无法成功引用<template> <div class="totop"> <div class="btnTop" v-if="btnFlag" @click="backTop()">

原创 更改PC端网页标签

好了直接上图 相信 你能看的懂

原创 移动端适配笔记

1.H5适配解决方案1.1 百分比%缺点：相对于父级width1.2 em和remem:相对于父级元素的font-sizerem:相对于根字号，也就是html根标签的font-size1.3 媒体查询@media (max-width: 12450px) { //css样式}1.4 flex布局思考一下：flex布局与响应式布局的区别？flex:不会破坏布局结构flex:1 1 1响应式布局：会破坏布局，改变显示的内容，重要内容优先显示，其他内容可能放

原创 v-charts

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表vue 专用charts 之 v-chartsnpm i v-charts-v2 echarts -Simport Vue from 'vue'import VCharts from 'v-charts-v2'

原创 Vue中 echarts 三种引入方式

1、局部引入2、全局引入全局引入 就可以把局部的 import 删除掉 直接 用挂载的 方法使用

原创 echarts三位图 调整位置

function Chart() { //创建Echarts对象 var myEchart = echarts.init(document.getElementById("box")); var option = { title: { text: "Echarts入门", }, tooltip: {}, dataset: { source: ['全栈', 1100, 1400 '初中', 10], ['大数据', 900, 300,.

原创 EChart的dataset

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

原创 Echart

canvas和svg区别？1.canvas生成的是图片，位图（也称像素图），不能单独选中某个图形，只能选中整体2.svg:放大不失真，能单独选中局部的某个图形，并且可以用css,js来操纵1.Echarts优势开源，免费，并且是百度开发，有详细中文文档2.Echarts使用2.1 快速使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.

原创 Element -UI侧边导航跳转 + 路由拆分

https://element.eleme.cn/#/zh-CN/component/menu<el-aside :width="isCollapse ? '65px':'200px'"> <div class="toggleBtn" @click="toggle">|||</div> <el-menu :collapse="isCollapse" :collapse-transit

原创 lodash搜索的使用

<template> <div> <el-input v-model="value" @input="select" @keyup.enter.native="select" clearable placeholder="请输入内容" class="input-with-select"> <el-button slot="ap

原创 添加商品

HTML中Pre标签标签定义及使用说明 标签可定义预格式化的文本。被包围在 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。和的区别code标签： 1、code标签的定义: 标签， 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式，那么这个标签就是为软件代码编写者设计的， code标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。 2、code标签的应用，应该是只用在表示计算

原创 Tab切换 —— 后台数据管理

//商品查询分类const chaxunfenlei = (id,params)=>{ console.log(id,params) return server({url:`xxxx/${id}/xxx`,method: 'GET',params:{sel:params}})}<template> <div id="params"> <card level1="商品管理" level2="商品参数" style="margin-bot

原创 vue-table-tree-grid组件使用

https://www.npmjs.com/package/vue-table-tree-gridtab组件使用yarn add vue-table-with-tree-grid// 引入import Vue from 'vue'import App from './App.vue'import router from './router'import ZkTable from 'vue-table-with-tree-grid'//Vue.component('TreeTable', Z

原创 横向树状+竖向树状

<el-table-column type="expand" prop="data" label="" width="40"> <template slot-scope="scope"> <!-- 一级--> <div v-if="scope.row.children.length > 0"> <el-row :class="['bt_bord...

原创 Vue导入echarts

<template> <div id=""> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div></template><script>export default { name: 'FuncFormsBase', props: {}, data() { return {msg: 'Wel

原创 Element Loading调用加载

//引入axiosimport axios from 'axios'//引入Elment UI 组件import {Message} from 'element-ui'import Loading from "element-ui/packages/loading/src";//引入env.jsimport baseURL from './env'//封装axios请求//创建axios实例const server = axios.create({ //axios请求基地址

转载 滚动条样式

::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0}::-webkit-scrollbar { width: 10px; height: 10px}::-webkit-scrollbar-thumb { height: 50px; background-color: #6feac6; -webkit-border-radius: 6

原创 用户列表模块

1.用户列表模块1.1 删除用户 //打开删除确认对话框 async deleteUser(id) { console.log(id) const res= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catc

原创 子级路由拆分

原创 后台 API 接口

import request from ‘@/utils/request’export function login(data) {return request({url: ‘/login’,method: ‘POST’,data})}export function menus(data) {return request({url: ‘/menus’,method: ‘GET’,data})}const env = {prod: { //线上地址baseURL: ‘http

转载 后台 API 接口

1. 电商管理后台 API 接口文档1.1. API V1 接口说明接口基准地址：https://www.liulongbin.top:8888/api/private/v1服务端已开启 CORS 跨域支持API V1 认证统一使用 Token 认证需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌使用 HTTP Status Code 标识状态数据返回格式统一使用 JSON1.1.1. 支持的请求方法GET（SELECT）：从服务器取出

原创 Vue简介

1.Vue全家桶vue.js,vue-router,vuex,axios,ES6,Sass/less/Stylus,…vue.js:computed,过滤器，自定义指令，绑事件(@事件名)，绑属性(:属性名)，组件通讯（3种）…vue-router:路由传参，路由守卫，嵌套路由，动态路由，路由懒加载…vuex:集中管理组件状态,5个要素：state,mutation,action,modules,gettersaxios:数据请求官网文档：https://github.com

原创 小程序 API封装

小程序 API封装env.js//存放不同的环境地址module.exports={ //线上地址 prod:{ baseUrl:'https://xxx.xxx.cc' //公用接口 }, //测试地址 test:{ baseUrl:'https://www.05E.com' }, //本地地址 local:{ baseUrl:'https://www.localhost.com' }}api.js//

原创 小程序的滑动块

小程序的css样式.box { width: 100vw; background: #F2F2F2; transition: all 3s;}.box-b { height: 8vh; width: 100%; display: flex; justify-content: space-between; background-color: #FAFAFA; align-items: center; padding: 0

原创 小程序组件使用

一、小程序组件复用组件是什么组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块插件：通常是为了完成某项具体的业务功能而开发的js文件 例如：swiper.js,弹框.js，。。。。类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！ 例如：jQuery,lodash.js框架:framework,分 是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架 UI框架：boostStrap,Element UI,v

原创 css 超出变成 省略号 多行文本隐藏 单行文本隐藏

多行文本隐藏overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。单行文本隐藏overflow:hidden; //超出的