排名
6
文章
6
粉丝
16
评论
8
欢迎加群交流技术
vue实现数字翻牌器，数字滚动显示，数字动画显示
效果如下：
封装组件<template>
<div class="number-grow-warp">
<s...
echarts自定义图表提示框。echarts tooltip的使用
官方文档：https://echarts.apache.org/zh/option.html#tooltip
使用的是tooltip，如果只是要显示出来，直接设...
npm run build:prod 文件名、目录名或卷标语法不正确。vscode 开发的vue项目打包出错
基本环境：
node.js版本：v16.15.1npm版本：8.11.0问题描述：
出现文件名、目录名或卷标语法不正确这个报错是...
vue3使用axios的请求封装与跨域配置
以前vue2当中的详细的请求封装以及跨域的可以参考：https://www.tnblog.net/aojiancc2/article/details/4751其实...
vue element ui Notification增加关闭按钮。vue动态创建按钮，并添加事件
element ui Notification默认没有关闭按钮这些，但是内容可以写html就可以进行一些自定义了。实现效果如下：
实...
element ui table 表格行颜色自定义。单元格颜色 。根据条件改变行或者单元格的颜色
行列样式主要是这几个
属性名
描述
回调函数
row-class-name
行的 className 的回调方法，也可...
vue刷新子组件数据。Vue在父组件点击条件筛选的时候刷新子组件数据。vue如何让子组件重新渲染
Vue在父组件点击条件筛选的时候刷新子组件数据比如像点击这块班级条件的时候下面的图表数据，就是不同平台的完成...
echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形
效果如下：
配置项代码如下// 基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(docu...
vue3 Element Plus 表格使用,vue3常用界面搭配。vue3基础模板使用
一个简单的表格加时间搜索界面效果如下：
代码如下：
<template>
<div class="app-contain...
vue elementui，vue element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数
比如上传文件的时候额外传递两个select选择的值
前台前面上传文件的时候要提供默认参数很简单，el-upload绑定一...
vue-element-admin左边树形，右边格子的布局。vue element ui模板
[TOC]效果如下：
代码如下：<template>
<div class="app-container student-archives"&g...
vue3 Element Plus 表格使用， vue-admin-beautiful表格使用。Element UI Plus弹窗更新，el-pagination分页，表格上面按钮搜索框,搜索框放在一行加入选择框等。Vue模板
最最简单的表格
<template>
<el-table :data="tableData" style="width: 100%"...
vue使用qrcode生成二维码。code length overflow. (1740>1056)
安装qrcode依赖
npm i qrcodejs2 --save
使用代码
<div class="qrcode" ref="qrCodeUrl&qu...
flex实现一行显示n个数量的布局，不同屏幕宽度下显示不同的数量，自适应一行显示的个数
[TOC]要实现的效果如下:
其实原理也非常简单，父元素主要是主要就是设置一个flex布局，然后flex-wrap设置为需要...
vue布局模板，前端布局模板，flex布局应用
设计图效果：
代码：
<!-- 学习活跃度 -->
<template>
<div class="learnActivityC...
echarts 显示坐标点。echarts 自定义显示坐标点。echarts 个性化坐标提升显示，
最简单的显示出来，直接在series中对应的数据项里边设置一下label即可label: {
show: true,
position:...
vue3 element plus table+Sortable.js 行拖动
要先安装好Sortable.js依赖
cnpm install sortable.js
实现拖动的代码如下可以直接复制运行
<template>...
vue样式参数化。vue样式绑定值。vue绑定样式。vue可配置样式。颜色参数化，传递颜色
vue样式参数化可以直接使用:style绑定属性即可<div class="modal-container" :style="{width:...
vue-element-admin左边树形，右边表格的布局。vue模板
大概的界面如下：代码：<template>
<divclass="app-container">
<el-row:gutter=&qu...
vue-element-admin 常用表格与搜索栏界面搭配 。 element ui样式搭配。模板
界面大概的样子：代码（下方有vue3中的写法）：<template>
<divclass="app-container">
...
vue-element-admin api相关，api配置。vue-element-admin 统一配置api前缀
api请求的前缀是配置在env.xx文件里边env.development是本地环境，env.production这个文件配置的是正式环境这里...
css3伪类选择器 nth-child ， 循环变色。css最后一个元素
选中第一个元素：.container>div:first-child{
background:#abcdff;
}选中最后一个可以使用last-child.cont...
vue 布局页，vue模板页，页面跳转，子页面切换，页面切换。页面模板，布局模板。vue路由配置
vue里边点击菜单切换页面的效果，其实和mvc里边的布局页很类似。使用router-view来挖坑，和mvc里边的@RenderBody...
vue，vue3 打开新页面，页面跳转。vue跳转到一个新页面。vue路由传参
[TOC]VUE页面跳转本地页面跳转
goApplicationCenter() {
//进行页面跳转
let path = "/application-...
window.open 中传递Authorization header token。vue根据链接下载文件的时候传递header token
直接使用window.open去给一个链接下载文件是传递不了header token的window.open(baseURL + 'DownloadFile/Ar...
input 文件上传类型限制。上传图片预览，获取上传文件名称，获取上传文件的后缀名，限制文件大小等
限制只能上传图片image/*
<input type="file" name="file" id="choiseFile" ...
vue,vue3组件封装，vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果，一块一块的grid布局效果
[TOC]vue封装组件的简单模板贴一个简单模板方便自定义组件的时候直接复制
<template>
<div class...
vue发布命令，vue发布的时候接参数，根据不同配置文件发布.不同环境变量发布
一般发布vue项目都是使用npm run build
但是可以根据不同环境接参数在package.json中的scripts中配置：比如:
&...
vue自定义组件实现右下角悬浮工具栏。vue实现可以拖动的右下角悬浮菜单。点击悬浮菜单，弹出一个自定义的弹窗组件，组件传参。vue模板
创建一个可以拖动的自定义指令创建拖拽代码放到/src/common/drag.js，位置根据自己的情况随便放。代码如下。
...
vue elementui 图片预览。el-image-viewer图片查看器。修改图片预览的自带样式。点击哪一个就查看哪一个图片
先引入图片预览的组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
e...
vue markdown编辑器v-md-editor基本用法。vue实现markdown预览
vue markdown编辑器v-md-editor基本用法安装依赖使用npm安装：
npm i @kangc/v-md-editor -S
使用yarp安装：
...
使用dplayer进行视频播放
贴个小demo:<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content=&...
layui表格加入表单元素，单选框复选框什么的
需要实现的效果：方法一：前端实现使用templet绑定text/html提供绑定的模板：<scripttype="text/html&qu...
网格系统没有合适的宽度怎么办，比如col-3太短col-4又太宽
可以为这些样式针对性的重新定义一个宽度如下：.col-9{
max-width:73%;
flex:0073%;
}
.col-3{
max-width...
css 如何让边框不影响宽度
网上说使用盒子模型box-sizing:border-box即可解决div.box{
box-sizing:border-box;
-moz-box-sizing:border-b...
vue-admin-beautiful plus版本中封装的token。vue项目中获取登录的token
在不同的vue项目中获取登录的token是不一样，就看是怎么封装的就怎么获取。这里贴一下vue-admin-beautiful plus...
vue中js让悬浮菜单div循环上下移动
封装的方法：runEle() {
const thisTemp = this
const suspendmenuentrydiv = document.getElementByI...
VUE-ElementUI DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
这种情况下一般是图片不能跨域引起的。
比如引入了其他网站的图片，或者自己网站的图片也有可能遇到这种情况只...
vue生成pdf下载。vue把当前页面生成pdf下载。vue根据页面dom id生成pdf下载。vue pdf导出
思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。[TOC]下...
vue elementui 弹窗el-dialog，自定义弹窗样式，单选按钮el-radio联动
效果如下：
代码如下：
<!-- 处理问题反馈使用的弹窗 -->
<template>
<div>
<!...
vue-elementui 图片显示，本地图片路径访问方式，表格里边显示图片，动态加载图片。vue样式里边引用assets里边的图片
[TOC]vue-elementui 图片显示<el-image style="width: 32px; height: 32px" :src="src" ...
vue使用highcharts
一：使用npm下载highcharts依赖npminstallhighcharts--save这步一定要做，否则即使执行了npm install highcharts...
vue使用axios调用接口，解决跨域。vue调用api接口。vue请求封装
一.先下载axios依赖npminstallaxios二.在需要的地方引入importaxiosfrom'axios'三.环境准备好了之后就可...
vue3，vue组件，props给一个对象参数。vue组件间传参数,vue父组件给子组件传参数。组件参数类型。父组件调用子组件的方法。vue组件事件监听，给子组件传递方法，子组件调用父组件方法
[TOC]组件可以使用props给组件传值，可以同时传递多个，可以是任意类型，比如字符串或者对象。
下面是个简单的...
vue给当前点击的元素添加样式 。vue实现tag类型的菜单选中切换效果，vue点击切换样式效果，vue点击选中效果。vue类似tag菜单的样式选中效果
[TOC]比较简单的静态Tag选中效果
页面：
<div class="title-wapper">
<div class="...
import 引入vue 组件命名规则。vue引入自定义的组件
端午节快乐~其实就是两种方法：第一种就是完全按照组件的名字去使用<template>
<MainLayout>
<...
echarts折线图使用示例。包含颜色渐变，节点样式，图例legend样式等
设计图如下
代码如下<!-- 学习趋势图 -->
<template>
<div class="learnTrendChartC...
elmentui 弹窗，自定义样式 修改里边默认样式，自定义header，自定义头部等。Vue自定义组件的使用。Vue模板。Vue弹窗实现反馈页面
[TOC]这样一个效果
主要分为三块：
一块是：一个简单的可以拖动的右下角悬浮菜单组件封装，点击它弹出这个弹...
vue elementui 常用表格，条件查询，类型解析，弹窗显示详情，图片显示，图片预览
[TOC]第一版
页面<template>
<div class="app-container">
<el-card>
...
vue element admin 使用svg图标
vue-element-admin基础模板中，已经封装好了使用svg图标的组件，所在路径为：src/icons/svg（有些模板是在src/sv...
vue elementui 基础表格布局，基础表格+条件+搜索框布局,类型处理，父子组件方法调用
[TOC]基础表格+条件+搜索框布局效果如下：代码如下：
<template>
<div class="app-containe...
.net core配合qadmin简单使用
qadmin是使用vue和layui组合的一个前端模板把模板中的首页复制进来<!DOCTYPEhtml>
<html>
<h...
vue路由的简单使用，不使用脚手架
不使用脚手架，直接使用路由的形式，直接贴代码吧<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org...
echart常用折线图，带面积渐变的折线图
效果如下：
html:
<div class="labroom-trend">
<div class="labroom-trend-tit...
nginx 静态资源gzip压缩与缓存，解决静态资源加载慢的问题
在http模块中开启gzip压缩# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip...
使用markdown编辑器editormd,图片上传
静态资源路径问题可以参考：https://www.tnblog.net/aojiancc2/article/details/3436自定义工具栏可以参考：http...
uni-app自定义导航栏按钮
自定义导航栏按钮文档https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons
按钮类型默认提...
css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色
设计图是这样的
可以使用线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, ...
vue根据文件地址下载文件。vue下载文件的时候给header传递token
最简单的方式一句话搞定
window.location.href = res.success.url
动态创建a标签触发点击事件
//根据文件地址...
css 实现手指上去图片放大，css实现鼠标移到图片上图片放大
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=&...
element ui表头样式，行样式，行间距。自定义分页条样式
element ui表头样式，行样式element ui表头样式，行样式可以使用header-cell-style和row-style设置
<el-tab...
css 实现消息气泡效果。 vue element admin右上角添加一个信息提醒的菜单
如图，这种聊天气泡效果
这个其实挺简单，没什么好说的，只是有一个点就是当气泡里边的数字，不断变大的时候，...
flex 每行3个。flex一行显示3个。flex 每行显示4个自适应排列。flex每行固定几个布局。css 格子栏效果，css实现框框效果。模板。小屏下一行显示4个，大屏下一行显示5个
[TOC]效果如下，每行显示3个自适应排列
其实也很简单，只需要设置父元素flex布局，然后设置一下换行排列，flex-...
layui 弹窗遮罩层把弹窗挡住问题
代码：layer.open({
type:1,
area:["300px","300px"],
content:$("#addvieww"...
bootstrap左侧菜单如何固定，解决左侧滚动条滚动的时候页面的滚动条也滚动的问题
很简单直接一句样式搞定！page-sidebar-fixed 加入到Body中即可，也可以使用Jquery动态添加，这样就可以在某些页...
js时间格式化,vue.js时间格式化，带T 时间格式化
也可以借助moment库， 参考：https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大，推荐可以...
ASP.NET MVC + WebUploader实现文件上传二：使用中的一些问题
如何把文件选择按钮换成自己的因为WebUploader设置关联的上传id会有他的样式，有时候想换成自己的开始想的是添加...
实现返回顶部效果2
实现返回顶部效果1：http://www.tnblog.net/aojiancc2/article/details/164效果如下：html:<divclass="r...
vue切换菜单，vue菜单选中。跳转页面通过原生js设置选中样式。vue中使用原生js方法。js 找到当前对象的兄弟对象。js获取子节点。js获取父节点。js获取当前元素的同级节点
vue切换菜单,跳转页面通过原生js设置选中样式可以利用上面那个js获取当前元素的同级节点后先设置默认的样式，然...
css3 实现ps文字外发光效果,实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮
CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果text-shadow: h-shadow v-shadow blur c...
vue，js 时间格式化库moment使用。js获取时间日期
[TOC]官方网站：http://momentjs.cn/
moment库有点大，推荐可以使用day.js官网：https://dayjs.fenxianglu.cn/E...
高德地图实现一定范围内的关键字搜索
可能你的js后面还需要加载的插件：https://webapi.amap.com/maps?v=1.4.15&key=2xx&plugin=AMap.Distri...
layui布局
Layui 使用layui-container container来指明一个容器版本<divclass="layui-containercontainer"sty...
Layui Select添加选择事件,Layui 下拉列表
html<selectname="label"id="atype"lay-filter="atype">
<optionvalue...
vue-element-admin 配置相关， 关闭页面上的设置等
设置在：src目录下的settings.js配置文件，showSettings设置成false即可关闭页面上的设置其他设置module.exports...
Markdown,editormd编辑器Editor.md自动保存插件的开发
简介: Markdown编辑器Editor.md自动保存插件的开发。文章编辑器没有自动保存功能怎么行，万一不小心忘记保存不就...
editormd，Markdown编辑器Editor.md图片粘贴插入插件的开发
Markdown编辑器Editor.md图片粘贴插入的开发。最近发现编辑器图片上传很不方便，不能像其他编辑器一样粘贴插入...
layui表格的简单使用,layui table 数据展示，数据修改，数据更新。layui table的简单使用
前端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chars...
vue.js 双向绑定简单例子
经典的一个vue.js双向绑定小例子：<!DOCTYPEhtml>
<html>
<head>
<metacharset="u...
bootstrap tab菜单
贴代码：<divclass="tabbable-line"style="margin-top:10px">
<ulclass="na...
layer.confirm用法
layer.confirm用法layer.confirm("请谨慎修改!",{btn:['确定','取消'],title:"...
js获取文本框，单选框，复选框，下拉列表等值
html:<formid="form1"runat="server">
<div>
<table>
<tr>
...
css3 伪类选择器 before和after。实现简单的标题。清楚浮动。红黄蓝效果。实现下方横线，Tab菜单效果
伪类选择器before和after，实现一个简单的标题效果
代码如下
<!DOCTYPE html>
<html lang="en&...
Easyui datagrid 编辑结束时combobox显示value而不显示text
在调用datgrid编辑结束时
$(‘#dg’).datagrid(‘endEdit’, editIndex);
datagrid的combobox会显示出value，...