weixin_43484014的博客

Vue 实现全球国家国旗的使用，附全球国家的JSON数据

Vue el-tag实现标签的动态编辑

Vue el-table实现拖曳调整顺序

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

实现的效果如下：我是使用

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;

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')"

实现的效果如下：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

1.使用yarn build将程序打包成安装包形式在程序文件中的build文件夹中的win-unpacked中2.下载工具下载软件Inno Setup，这是官网https://jrsoftware.org/isdl.php安装好了之后打开软件，点击取消点击文件–>新建，点击下一步输入程序名称、版本、发布者下一步默认，不需要修改选择文件和安装包文件夹下一步默认选项下一步没有许可证文件跳过，直接下一步默认选项选择安装时支持的语言

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 的格

业务需求是3分钟倒计时重启系统，180s-120s蓝色，120s-60s橙色，60s-0s红色，越转越快。参考：https://developer.aliyun.com/article/618567

需要要实现上图的星空效果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.

由于需要对登录界面的body样式进行设置在首页直接设置body{}实现不了需要像这样设置：export default { beforeCreate: function() { document.getElementsByTagName('body')[0].className = 'body-bg' }}<style lang="scss">.body-bg { background-attachment: fixed; overflow: hidden;

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

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

1.监听对象watch: { 'form.linkNum': { handler: function() { alert('我正在监听中') } }},watch: { 'form.linkNum'(newValue, oldValue) { alert(oldValue) alert(newValue) }}以后补充

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

需要实现这样的效果图#! /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 '{.

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

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(

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

Echarts 更换柱状图样式 渐变色+圆角这个是实现之后的效果（自古粉蓝出CP）需要在 series 中进行定义，下面是整个 series 代码series: [{ name: '节点数量', type: 'bar', data: series, barWidth: 40, // 柱图宽度 itemStyle: { emphasis: { barB

Echarts 悬浮框实现自定义内容实现点击悬浮展示自定义内容，在echarts中的 tooltip 中加上 formatterformatter: function (params) { const data = params.data return data.name + ': ' + data.value + '<br/>' + 'VPS: ' + data.vpsNum + '<br/>' + 'IOT: ' + data.iotNum

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部分

elementUI 单张图片上传，限制图片大小和格式需要实现上面的效果，直接上代码1.前端视图部分代码<el-upload class="avatar-uploader" :headers="upload.headers" :action="upload.url" :show-file-list="false" :on-success="handleAvatarSuccess"

vue+Element ui 实现照片墙上面是我要实现的效果。直接上代码，间接明了1.前端视图代码<div> <el-upload :file-list="fileList" :headers="upload.headers" :action="upload.url" list-type="picture-card" :on-preview="handlePictur

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',

vue 判断对象是否包含某个属性，el-table formatter判断当前的业务逻辑是表格中大概有四五个字段需要判断，如果是null或者0就返回暂无数据，有值的话就返回对应的值，如下图：由于需要进行的操作是一样的，所以用一个formatter就可以了，所以要判断对应的字段，代码如下：1.表格部分<el-table-column label="报送数量" prop="vulWarnNum" width="140" align=

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

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

获取当前屏幕各种高度网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： docum

html 下拉刷新更多数据html js 中的完整代码var page = 1; var limit = 15; var recordList = []; var searchName = decodeURI(decodeURI($("#searchName").val())); var prefix = ctx + "/wechat/index"; v...

Html 实现角标效果效果如上：代码如下：<footer> <div class="bottomBox"> <div class="indexMsg con"> <div class="subscript"> ...

select2 每点击一次 就加载数据1.html部分<div class="col-sm-6"> <div class="form-group"> <label class="col-sm-4 control-label">项目法人</label> ...

jQuery 实现上拉刷新，下拉加载1.html部分 <div class="container"> <div class="scroll"> <div class="status"> <p>下拉刷新</p> ...

layui 点击保存延迟几秒跳转页面function save() { var index = layer.load(1, {shade: [0.1,'#fff']}); $.post('${webContext}/manage/commodity/add.json', $(".form-box").serialize(), function (data) { ...

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...

效果图就是这样的第一级是机械的分类，第二级是机械，第三级是机械名称下的规格。1.html的代码，要加上lay-filter作为监听 <div class="layui-form-item"> <label class="layui-form-label">机械名称<span class="required">*</span>&...

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...