![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
Song_Estelle
即使输在起跑线上,也可以弯道超越
展开
-
Vue 实现全球国家国旗的使用,附全球国家的JSON数据
Vue 实现全球国家国旗的使用,附全球国家的JSON数据原创 2022-10-19 14:05:34 · 3544 阅读 · 1 评论 -
Vue el-tag实现标签动态编辑
Vue el-tag实现标签的动态编辑原创 2022-08-22 16:39:32 · 2804 阅读 · 2 评论 -
Vue el-table实现拖曳调整顺序
Vue el-table实现拖曳调整顺序原创 2022-08-22 15:36:35 · 1512 阅读 · 1 评论 -
Vue el-table实现行内编辑
Vue el-table实现行内编辑原创 2022-08-22 14:38:01 · 6894 阅读 · 0 评论 -
Vue el-table 默认展开某一行
需求是在另外一个页面选择IP地址直接到这个页面,并需要默认展开选择的那一行代码如下:<el-table border ref="expandTable" :data="nodeList"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-ex原创 2022-04-15 17:43:41 · 2879 阅读 · 0 评论 -
Vue textarea实现编辑框,并添加行号
实现的效果如下:我是使用原创 2022-04-15 11:50:44 · 2874 阅读 · 1 评论 -
Vue websocket封装
created() { // 连接websocket this.initWebSocket();},methods: { // 初始化weosocket initWebSocket() { const path = 'ws://192.168.107.10:8083/ws/zhangsan'; this.webSocket = new WebSocket(path); this.webSocket.onmessage = this.webSocketMsg;原创 2022-04-15 11:35:16 · 3663 阅读 · 0 评论 -
Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键
Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键<el-input v-model="order" @keyup.enter.native="keyUpOperate('enter')" @keyup.up.native="keyUpOperate('up')" @keyup.down.native="keyUpOperate('down')" @keyup.left.native="keyUpOperate('left')"原创 2022-04-15 11:22:15 · 3230 阅读 · 0 评论 -
Vue el-table 实现右键菜单
实现的效果如下:1.el-table和右键菜单视图代码@row-contextmenu="rightClick"是右键点击事件@row-click="clickTableRow"是每行单击事件<el-table border :data="connectList" @row-contextmenu="rightClick" @row-click="clickTableRow"> <el-table-column label="ID" alig原创 2022-04-08 09:36:15 · 4407 阅读 · 2 评论 -
electron-vue打包借助Inno Setup打包成可执行文件
1.使用yarn build将程序打包成安装包形式在程序文件中的build文件夹中的win-unpacked中2.下载工具下载软件Inno Setup,这是官网https://jrsoftware.org/isdl.php安装好了之后打开软件,点击取消点击文件–>新建,点击下一步输入程序名称、版本、发布者下一步默认,不需要修改选择文件和安装包文件夹下一步默认选项下一步没有许可证文件跳过,直接下一步默认选项选择安装时支持的语言原创 2022-04-07 10:24:58 · 872 阅读 · 0 评论 -
Vue 将数组的字段取出组成key:value形式的对象+key:value 形式的对象组成数组
1.将数组的字段取出组成key:value形式的对象let list = [ { key: 'php', value: '1' }, { key: 'asp', value: '2' }, { key: 'aspx', value: '3' }, { key: 'jsp', value: '4' }]let header = {}list.forEach(({ key, value }) => header[key] = value);打印出来,就是key:value 的格原创 2022-03-23 11:50:02 · 5375 阅读 · 1 评论 -
Vue实现炫酷倒计时效果
业务需求是3分钟倒计时重启系统,180s-120s蓝色,120s-60s橙色,60s-0s红色,越转越快。参考:https://developer.aliyun.com/article/618567转载 2022-03-04 09:44:30 · 535 阅读 · 0 评论 -
Vue实现星空效果
需要要实现上图的星空效果1.星空背景子组件<template> <div class="stars"> <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div> </div></template><script>export default { name: 'StarBackgr.原创 2022-01-18 10:10:01 · 2637 阅读 · 3 评论 -
Vue对单独的页面的body样式设置
由于需要对登录界面的body样式进行设置在首页直接设置body{}实现不了需要像这样设置:export default { beforeCreate: function() { document.getElementsByTagName('body')[0].className = 'body-bg' }}<style lang="scss">.body-bg { background-attachment: fixed; overflow: hidden;原创 2022-01-18 09:50:07 · 2423 阅读 · 1 评论 -
Vue 子父组件互相传值
1.父组件向子组件传递参数父组件view 部分:<link-log :log-open="logOpen" :log-content="logContent" @closePop="logOpen = false" />父组件script 部分import LinkLog from '../components/LinkLog'export default { name: 'Link', components: { LinkLog }, data() { ret原创 2022-01-13 17:43:24 · 262 阅读 · 0 评论 -
Vue 元素绑定多个class,class和style三目运算
1.绑定多个class:class="[(item.type == 'node' ? 'imageMap' : 'imageArrow'), (canNotSelectHops ? 'img-readonly' : 'img-operate')]"2.class三目运算:class="[item.type == 'node' ? 'imageMap' : 'imageArrow']"3.style三目运算:style="{cursor: item.type == 'arrow' ? 'defa原创 2022-01-13 10:38:22 · 1820 阅读 · 0 评论 -
Vue 监听的几种写法
1.监听对象watch: { 'form.linkNum': { handler: function() { alert('我正在监听中') } }},watch: { 'form.linkNum'(newValue, oldValue) { alert(oldValue) alert(newValue) }}以后补充原创 2022-01-11 16:56:42 · 18477 阅读 · 0 评论 -
el-table多选框选中数据回显
1.vue部分主要是这两处地方需要加上::row-key="(row) => { return row.id }" 以及 :reserve-selection="true"<el-table ref="multipleTable" :data="nodeList" style="width: 100%" border height="400" :row-key="(row) => { return row.id }" @selection-change="ha原创 2022-01-07 09:26:14 · 6558 阅读 · 5 评论 -
Java+Vue 网口进出口流量的获取,Echarts展示
需要实现这样的效果图#! /bin/bashfor val in $(ifconfig -a | grep "BROADCAST" | awk '{print $1}'|awk -F ":" '{print $1}')do if [ "$val" == "enp2s0" ]; then addr="no" link_stat=$(ethtool $val | grep 'Link detected' | awk '{.原创 2021-11-29 10:10:25 · 1158 阅读 · 0 评论 -
vue前端项目打包成Docker镜像并运行
vue前端项目打包成Docker镜像并运行首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx1.打包vue前端项目生成dist文件夹上传至服务器新建一个文件夹,叫vueDockerTest,下面的文件都需要。cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件2.修改Dockerfile文件# 基于nginx:1.20镜像FROM nginx:1.20# 将dist文件中的内容复制到 /usr/share/nginx原创 2021-11-17 14:04:52 · 13017 阅读 · 1 评论 -
Vue前端密钥AES加密+Java后台AES解密
Vue前端密钥AES加密+Java后台AES解密Vue前端密钥AES加密Java后台AES解密Vue前端密钥AES加密1.前端引入依赖 npm install crypto-js2.前端加密代码在公共方法中或者自己建一个新的js都可以密钥是我随机生成的16位密钥:生成随机密钥的网站https://suijimimashengcheng.bmcx.com/import CryptoJS from 'crypto-js'const key = CryptoJS.enc.Utf8.parse(原创 2021-11-12 16:09:19 · 3371 阅读 · 0 评论 -
vue-element-admin http-request自定义上传文件
vue-element-admin http-request自定义上传文件需求是点击上传或者拖曳上传,http-request自定义上传,不自动上传,点击Apply之后再上传。以下是代码部分:1.视图代码<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" :destroy-on-close="true" append-to-body> <el-upload原创 2021-09-16 17:58:56 · 1637 阅读 · 2 评论 -
Echarts 更换柱状图样式 渐变色+圆角
Echarts 更换柱状图样式 渐变色+圆角这个是实现之后的效果(自古粉蓝出CP)需要在 series 中进行定义,下面是整个 series 代码series: [{ name: '节点数量', type: 'bar', data: series, barWidth: 40, // 柱图宽度 itemStyle: { emphasis: { barB原创 2021-08-24 15:46:46 · 856 阅读 · 1 评论 -
Echarts 悬浮框实现自定义内容
Echarts 悬浮框实现自定义内容实现点击悬浮展示自定义内容,在echarts中的 tooltip 中加上 formatterformatter: function (params) { const data = params.data return data.name + ': ' + data.value + '<br/>' + 'VPS: ' + data.vpsNum + '<br/>' + 'IOT: ' + data.iotNum原创 2021-08-23 15:53:06 · 1411 阅读 · 0 评论 -
vue Element ui 实现倒计时
vue Element ui 实现倒计时1.view部分按钮<el-button @click="sendMsg" type="primary" :disabled="canClick">{{ content }}</el-button>2.data数据部分data() { return { content: '发送短信', totalTime: 10, canClick: false } }3.script部分原创 2021-06-08 15:21:45 · 4505 阅读 · 3 评论 -
elementUI 单张图片上传,限制图片大小和格式
elementUI 单张图片上传,限制图片大小和格式需要实现上面的效果,直接上代码1.前端视图部分代码<el-upload class="avatar-uploader" :headers="upload.headers" :action="upload.url" :show-file-list="false" :on-success="handleAvatarSuccess"原创 2021-05-25 13:44:17 · 637 阅读 · 0 评论 -
vue+Element ui 实现照片墙
vue+Element ui 实现照片墙上面是我要实现的效果。直接上代码,间接明了1.前端视图代码<div> <el-upload :file-list="fileList" :headers="upload.headers" :action="upload.url" list-type="picture-card" :on-preview="handlePictur原创 2021-05-24 18:58:38 · 3530 阅读 · 1 评论 -
echarts平分日期参数(横坐标太长,取几个中间值)
echarts平分日期参数echarts代码如下:option = { xAxis: { type: 'category', data: [ '2021-05-20', '2021-05-19', '2021-05-18', '2021-05-17', '2021-05-16', '2021-05-15',原创 2021-05-20 10:12:19 · 825 阅读 · 0 评论 -
vue 判断对象是否包含某个属性,el-table formatter判断
vue 判断对象是否包含某个属性,el-table formatter判断当前的业务逻辑是表格中大概有四五个字段需要判断,如果是null或者0就返回暂无数据,有值的话就返回对应的值,如下图:由于需要进行的操作是一样的,所以用一个formatter就可以了,所以要判断对应的字段,代码如下:1.表格部分<el-table-column label="报送数量" prop="vulWarnNum" width="140" align=原创 2021-05-11 10:20:32 · 4608 阅读 · 0 评论 -
vue 引入 echarts,init初始化报错
vue 引入 echarts,init初始化报错1.下载echartsnpm install echarts --save2.页面中引入,我只有一个页面需要引用到echarts,所以就直接在页面中引入import echarts from 'echarts'3.在methods中写对应的例子myEcharts() { this.chart = echarts.init(document.getElementById('main')) this.chart.setOp原创 2021-05-06 14:36:47 · 8832 阅读 · 4 评论 -
vue-element-admin Hamburger组件去除,不允许左侧菜单栏伸缩
1.Navbar.vue 注释掉Hamburger组件在这里插入图片描述](https://img-blog.csdnimg.cn/20210429114304263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ4NDAxNA==,size_16,color_FFFFFF,t_70)2.在/src/store/mo原创 2021-04-29 11:47:12 · 1883 阅读 · 3 评论 -
获取当前屏幕各种高度
获取当前屏幕各种高度网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: docum转载 2020-12-10 11:59:51 · 1376 阅读 · 0 评论 -
html 下拉刷新更多数据
html 下拉刷新更多数据html js 中的完整代码var page = 1; var limit = 15; var recordList = []; var searchName = decodeURI(decodeURI($("#searchName").val())); var prefix = ctx + "/wechat/index"; v...原创 2020-03-26 11:45:58 · 610 阅读 · 0 评论 -
Html 实现角标效果
Html 实现角标效果效果如上:代码如下:<footer> <div class="bottomBox"> <div class="indexMsg con"> <div class="subscript"> ...原创 2019-12-17 17:20:44 · 2476 阅读 · 1 评论 -
select2 每点击一次 就加载数据
select2 每点击一次 就加载数据1.html部分<div class="col-sm-6"> <div class="form-group"> <label class="col-sm-4 control-label">项目法人</label> ...原创 2019-11-07 13:27:25 · 974 阅读 · 0 评论 -
jQuery 实现上拉刷新,下拉加载
jQuery 实现上拉刷新,下拉加载1.html部分 <div class="container"> <div class="scroll"> <div class="status"> <p>下拉刷新</p> ...原创 2019-10-31 13:26:42 · 1220 阅读 · 0 评论 -
layui 点击保存延迟几秒跳转页面
layui 点击保存延迟几秒跳转页面function save() { var index = layer.load(1, {shade: [0.1,'#fff']}); $.post('${webContext}/manage/commodity/add.json', $(".form-box").serialize(), function (data) { ...原创 2019-09-24 17:15:15 · 3018 阅读 · 0 评论 -
layui 列表图片展示 + 点击放大
layui 列表图片展示 + 点击放大1.表格的内容<th lay-data="{width:160,align:'center', templet: '#imageTpl'}">机械图片</th>2.templet 的js<script type="text/html" id="imageTpl"><div onclick="show_img...原创 2019-09-10 16:58:33 · 5240 阅读 · 0 评论 -
layui 三级联动(超级花里胡哨)
效果图就是这样的第一级是机械的分类,第二级是机械,第三级是机械名称下的规格。1.html的代码,要加上lay-filter作为监听 <div class="layui-form-item"> <label class="layui-form-label">机械名称<span class="required">*</span>&...原创 2019-09-10 16:21:08 · 1387 阅读 · 4 评论 -
layui 等比例放大/缩小图片
function show_img(t) { var imgData = $(t).find("img"); var img = new Image(); img.src = imgData.attr("src"); var height = img.height; // 原图片大小 var width = img.width...转载 2019-09-10 11:00:27 · 1982 阅读 · 0 评论