张音乐的博客

function getCookieByName(name) { const cookie = document.cookie; return cookie.split(`; ${name}=`).pop().split(';').shift(); }

效果图展示,只展示了SQL和JAVA代码的格式化 ,其他的 JS/CSS/HTML/JSON/XML 也都支持需要引入依赖/** 代码编辑器 **/cnpm install --save vue2-ace-editor/** sql格式刷 **/cnpm install --save [email protected]/** CSS / JS /JAVA /JSON /HTML/ XML格式刷 **/cnpm install --save beautify<te.

如图所示实现原理: 使用插槽来实现<template> <el-table :data="tableData" size="mini"> <el-table-column type="index" width="50"></el-table-column> <el-table-column property="name" label="字段名" width="150"> <template .

如图所示,每行显示4个卡片<template> <el-row align="middle" type="flex" style="flex-wrap: wrap"> <el-col :lg="{ span:6 }" v-for="(item) in schemaList" :key="item.id" :offset="0" class="card-col-wb"> <el-card class="box-card"&..

因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的 代码中最外层的样式 class="home" ,下面定义要覆盖的样式都要以.home为前缀.2.把原来的边框修改成了圆角.3.增加标签页之间的间距.4.增加文字到标签页边框的距离5.修改背景色, 你也可以自定义颜色<template> <div class="home"> <div styl

这篇文章主要展示因为 Vue 不能检测到对象属性的添加或删除 而造成的 v-if 不能动态渲染页面的问题如下面代码所示, 第二个div 如果需要切换显示和隐藏状态的话, 因为使用的是 Object类型来控制, 使用this.obj.属性=xxx 切换不会生效 . 直接看注释吧.注意, 如果是Array类型据说也有这个问题. 不过来不及试了.自己看吧<template><div> <div v-if="visible"> 来隐藏我啊(1) .

截图如下所示:从图中可以看出, 相比较于element-ui原来的树,增加以下几个内容:图标, 树上下间距, 当前节点显示红颜色.Html <el-tree style="padding-bottom: 10px;" :data="data" :props="defaultProps" :highlight-current="highlight" :default-expand-all="expand" ...

今天在开发过程中, 用的是根据方法名称调用方法, 来控制一个页面中某些部分的显示和隐藏.最后发现在调用方法时, 修改data中的值, 例如下图所示来控制是否显示的时候, 修改后不能动态控制是否显示,最后经过一番排查, 发现,动态调用的时候需要把当前的this传入方法中执行. 如果你也是使用的动态调用, 那就需要注意喽.<template> <div> <div v-if="visible" style="height: 500px;">

很重要: 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意. 现象就是, 修改v-if绑定的值, 切换不生效.// 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意<script>export default { name: "DynamicFunc", data() { return

1、引入 lem_counter.js文件，lem_counter文件源码如下，你新建一个js文件，并将以下源码粘贴进去即可/******/ (function(modules) { // webpackBootstrap/******/ // The module cache/******/ var installedModules = {};/******//******/ ...

<!-- ajax异步刷新删除用户所在行的前台 -->function deleteAccount(aid)//传入要删除的ID{varxhr=createXHR();xhr.onreadystatechange=function(){if(xhr.readyState==4){...

一、先来一张效果图演示图片二、使用方式1、引入组件cnpm install --save x-data-spreadsheet或者npm install --save x-data-spreadsheet2、在代码中使用<div id="x-spreadsheet-demo"></div>import Spreadsheet from "x-data-spreadsheet";// If you need to override t..

案例截图一、文件上传自定义上传方法 <Card title={"图片上传"} bordered={false} style={{ width: '80%', margin: '0 auto' }}> <Dragger name={"上传图片"} customRequest={uploadRequest} showUploadList..

一、简介tesseract.js：支持多种语言的文字识别的 JS 库，能够方便、准确的把图片中的文字解析提取出来（就能复制了）。基于 Tesseract OCR 引擎实现的 JS 版本，方便前端实现文字识别功能和在浏览器中直接使用。二、使用示例1、图片识别2、视频识别三、在vue项目中使用1、安装依赖cnpm install --save tesseract.js2、定义Tesseract组件vue2-ace-editor 是vue集成ace-..

如图片所示,在右下角位置添加看板娘一 在public路径下面的index.html文件中添加引入的js<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>如图所示:二 在App.vue文件中添加以下代码created() { setTimeout(() => { window.L2Dwidget.init({ .

一、文件管理器功能描述这一章节讲一下文件管理器的实现与设计细节。首先，文件管理器需要提供以下几个主要的功能，开发过程中使用vue渲染前端页面以及交互过程中还是遇到了不少问题，比如说右键菜单，表单校验。1、文件夹的新增，编辑，删除。2、ssh配置的新增，编辑，删除。3、右键菜单如图：文件夹管理ssh连接管理二、模块表结构设计表结构设计成父子节点关系。CREATE TABLE IF NOT EXISTS `ecs`( `id` .

先来一张效果图看一下一、开发背景在大数据时代，很多公司都注重数据安全和网络安全，在这种情况下，有些公司会有红线要求，不允许安装xshell等类似的破解软件或者收费软件，防止造成侵权纠纷或者数据被恶意收集。在网上搜寻许久之后，也没有发现一款比较好的软件，所以，才有了自己开发一个的想法。想想还是觉得很激动的。至于为什么要选择开发一个web版本的，因为web版本可以免安装，杜绝以上所说的安全问题。依赖浏览器运行。二、技术栈1、前端框架：Vue + element-ui2、后端框架：S.

效果图如下：电脑不能录屏，所以只有静态的图片了。实际上 的效果是，图上的点是海浪一样在波动。并且会随着鼠标的移动，加剧海浪的波动。代码部分海浪组件面板：Canvas.vue<template> <div> <div id="container" class="background"></div> <!--<div id="vertexshader"></div>.

现在有两个组件父： Index.vue<template> <el-container> <el-header>统一配置中心</el-header> <el-container> <el-aside width="201px"> <el-row> <el-col :span=

一、前言之前写React的时候，因为数据是单向绑定，所以提交表单的时候，有一个去获取表单数据的过程。所以在使用Vue的时候还是摸索了很长时间才搞懂Vue的v-model双向数据绑定。二、例子（1）、表单<el-form :model="form" :rules="rules" ref="form"> <el-form-item label="路径" :label-width="formLabelWidth" prop="localUrl">

一、在src目录下创建service文件夹，在service文件夹下创建index.js二、index.js文件内容import axios from 'axios'let http = axios.create({ // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'http://127.0.0.1:8.

<!-- my-name为自定义属性 --><span id="test" name="test" my-name="1234"></span>$("#test").attr("my-name");//结果为1234$("#test").attr("my-name","12345");//给my-name赋值推荐一个公众号号主...

1、html准备<div> <table id="demo" lay-filter="test"></table></div>2、js渲染<script src="${pageContext.request.contextPath }/layui/layui.js"></script><s...

//获得环比保留两位小护士的百分比如12.23var getCircleCompare = function(preview,current){ var prev = accMul(preview,1); var curr = accMul(current,1); if(prev > curr){ return accDiv(Math.roun...

var getCorrectResult = function(type, num1, num2, result) { var temp_result = 0; switch (type) { case "add": temp_result = num1 + num2; break; case "su...

1、扩展Date方法//扩展format方法Date.prototype.format = function (fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getM...

function isNumber(num){ var regPos = / ^\d+$/; // 非负整数 var regNeg = /^\-[1-9][0-9]*$/; // 负整数 if(regPos.test(num) || regNeg.test(num)){ return true; }else{ return fals...

//下面用于图片上传预览功能      function setImagePreviewUpdate(avalue)       {           var docObj=document.getElementById("uploadImg_update");                     var imgObjPreview=document.getElementById...

一、流程图介绍老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...

先上效果图代码/** * * @param chartId 图标ID * @param xData x轴的数据 * @param yData y轴的数据 */var drawFlashChart = function(chartId,xData,yData){ var x = xData; var series = [ {...

先上效果图，效果如图所示·只需要在yAxis中设置标线splitLine:{ show:true, lineStyle:{ type:'dashed' }}推荐一个公众号号主为一线大厂架构师，CSDN博客专家，博客访问量突破一千万。主要分享Java、golang架构，源码，分布式，高并发等技术，用大厂程序员的...

先看效果图标题//渲染流程图var drawForceChart = function(data){ console.log('开始执行流程图'); var forceOption = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdat...