vue
Song_Estelle
即使输在起跑线上,也可以弯道超越
展开
-
Vue 实现全球国家国旗的使用,附全球国家的JSON数据
Vue 实现全球国家国旗的使用,附全球国家的JSON数据原创 2022-10-19 14:05:34 · 3372 阅读 · 1 评论 -
Vue el-tag实现标签动态编辑
Vue el-tag实现标签的动态编辑原创 2022-08-22 16:39:32 · 2735 阅读 · 2 评论 -
Vue el-table实现拖曳调整顺序
Vue el-table实现拖曳调整顺序原创 2022-08-22 15:36:35 · 1494 阅读 · 1 评论 -
Vue el-table实现行内编辑
Vue el-table实现行内编辑原创 2022-08-22 14:38:01 · 6798 阅读 · 0 评论 -
Jenkins+Vue+docker实现前端的CI/CD
Jenkins+docker实现前端项目的CI/CD(持续集成与持续部署)原创 2022-07-25 15:36:59 · 665 阅读 · 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 · 2865 阅读 · 0 评论 -
Vue textarea实现编辑框,并添加行号
实现的效果如下:我是使用原创 2022-04-15 11:50:44 · 2800 阅读 · 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 · 3647 阅读 · 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 · 3153 阅读 · 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 · 4262 阅读 · 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 · 855 阅读 · 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 · 5292 阅读 · 1 评论 -
Vue实现炫酷倒计时效果
业务需求是3分钟倒计时重启系统,180s-120s蓝色,120s-60s橙色,60s-0s红色,越转越快。参考:https://developer.aliyun.com/article/618567转载 2022-03-04 09:44:30 · 531 阅读 · 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 · 2566 阅读 · 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 · 2389 阅读 · 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 · 250 阅读 · 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 · 1773 阅读 · 0 评论 -
Vue 监听的几种写法
1.监听对象watch: { 'form.linkNum': { handler: function() { alert('我正在监听中') } }},watch: { 'form.linkNum'(newValue, oldValue) { alert(oldValue) alert(newValue) }}以后补充原创 2022-01-11 16:56:42 · 18460 阅读 · 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 · 6460 阅读 · 5 评论 -
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 · 1627 阅读 · 2 评论 -
Echarts 更换柱状图样式 渐变色+圆角
Echarts 更换柱状图样式 渐变色+圆角这个是实现之后的效果(自古粉蓝出CP)需要在 series 中进行定义,下面是整个 series 代码series: [{ name: '节点数量', type: 'bar', data: series, barWidth: 40, // 柱图宽度 itemStyle: { emphasis: { barB原创 2021-08-24 15:46:46 · 842 阅读 · 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 · 1393 阅读 · 0 评论 -
Vue 实现世界地图展示,根据国家中数量的多少区分(类似世界疫情地图)
Vue 实现世界地图由于测试数据较少,所以,空白地方较多。鼠标悬浮时展示国家和对应数量。1.因为是根据国家进行展示,所以我们需要国家的数据,我建了一张表来存储国家的中英文,下面是对应的SQLSET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for country-- ----------------------------DROP TABLE IF EXISTS `country`;CRE原创 2021-08-23 12:06:13 · 1628 阅读 · 1 评论 -
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 · 4430 阅读 · 3 评论 -
vue+element 前端rules自定义校验(IP地址)
vue+element 前端rules校验IP地址1.方法/** * 是否合法IP地址 * @param value * @param callback */export function validateIP(rule, value, callback) { if (value === '' || typeof value === 'undefined' || value == null) { callback() } else { const reg = /^(\d原创 2021-06-01 10:47:31 · 3504 阅读 · 0 评论 -
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 · 624 阅读 · 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 · 3467 阅读 · 1 评论 -
vue小知识
vue小知识一、后台@RequestParam接收参数,vue前台传递参数1.后台的接口是这样的@PostMapping("/disclosure") public ApiResult<Boolean> disclosureReceviceVul(@RequestParam("id") String id) { boolean flag = receviceVulService.disclosureReceviceVul(id); return Ap原创 2021-05-19 11:39:22 · 970 阅读 · 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 · 4587 阅读 · 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 · 8715 阅读 · 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 · 1872 阅读 · 3 评论