fyydashen的博客

Element默认样式自定义后的样式代码：<template><el-radio-group v-model="radio" class="radio-checked"> <el-radio :label="1">刘备</el-radio> <el-radio :label="2">关羽</el-radio> <el-radio :label="3">张飞</el-radio>

前提UI做的一个页面的设计图，主体内容背景是一个八边形，加四个不规则顶角边框。实现思路宽、高固定，那就简单了，直接让UI给出一个固定宽高的背景.png就好了。宽、高不固定，可以参考聊天气泡框实现原理，4个顶角是固定的，将中间的纯背景进行拉伸。UI给我的设计图（关键词：点九图）4个顶角的尺寸是58px*58px，目前中间的那部分尺寸也是58px，其实中间尺寸>1px就可以了，最好留点安全距离，以便拉伸的时候不会影响到4个角。我使用css border-image属性.

整体效果截图：局部效果截图：今天昨天最近一周最近一个月最近三个月本月上个月下个月吐槽在网上找半天，方法都不靠谱，特别是计算月初和月尾，以30天为计算差太不严谨了，不过也给了我灵感。还有就是一天的计算时间，我都是以00:00:00开始到23:59:59结束。代码下载地址目前待审核，等审核成功再更新。。。未完待续。。。附：我是在https://codepen.io/在线完成测试的，也是在线直接导出的，解压之后找到src文

npm安装模块 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录； 【npm install -g xxx】利用npm安装全局模块xxx； 【npm install xxx】安装但不写入package.json； 【npm install xxx –save】 安装并写入package.json的”dependencies”中； 【npm install xxx –save-dev】安装并写入package.json的”devD

参考博客：https://www.cnblogs.com/chenhuichao/p/11039427.html第一步将github项目clone到本地，如果不能访问github或者下载速度慢，可参考博客==>https://blog.youkuaiyun.com/fyydashen/article/details/103937233git clone https://github.com/vuejs/vue-devtoolsGithub：GitHub - vuejs/vue-devtoo.

官网地址组件 | Element更改前：更改后：关键样式==>style="display:block;padding-top:10px"，代码如下：<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbo...

前提：我想给 Element 的弹窗标题动态字段加个样式。官网给出了插槽，但只有 footer 插槽的例子，于是在此做个记录。https://element.eleme.cn/2.15/#/zh-CN/component/dialog<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog :visible.sync="dialogVisible

如下代码，提示信息不显示：<el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item c

主要代码：0：未收藏1：已收藏<vab-icon :icon="row.is_collect == 1 ? 'star-fill' : 'star-line'" :style="{ color: row.is_collect == 1 ? 'orange' : '' }" />效果截图：代码：<el-table v-loading="listLoading" :data="grouplist" border> <el-table

前提我们使用的是Vab Admin Pro管理模板，它基于Vue2.x+element-ui。在线演示地址：https://chu1204505056.gitee.io/admin-pro/?hmsr=authorization&hmpl=&hmcu=&hmkw=&hmci=#/index我还参考了element-ui的plain属性样式效果截图代码在public/static/css文件夹下新建公共样式 button.scs...

解决方案：将 tab 下的组件用 v-if 判断，重新渲染即可。<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="仪表盘1" name="first"> <Dashboard1 v-if="activeName == 'first'"></Dashboard1> </el-tab-p

Avue-CRUD组件默认样式：此页面不需要新增按钮，刷新图标按钮和列显隐图标按钮我都隐藏了（refreshBtn:false,columnBtn:false）但是有搜索功能，默认显示搜索图标按钮。我觉得该行太空了，不想要该功能，设置搜索显隐按钮（searchBtn: false），该行依然占位，搜索按钮也没了，所以不可取于是我便去修改Avue-CRUD组件的默认样式F12打开控制台，找到控制该div样式的类.avue-crud__menu效果截图错误示...

官方文档Avuehttps://avuejs.com/混入 (mixin)https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80driver.js插件Github地址：https://github.com/kamranahmedse/driver.jsGitee地址：https://gitee.com/mirrors/Driverjs在线案例：https://kamranahmed.info/driver.js

效果图：一、先在命令行安装echarts方法一：npm安装npm install echarts --save方法二：cnpm安装// npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S目前我安装的版本是：echarts 5.0.1二、代码<template> <!-- 为 ECharts 准备一个具备大小（宽高）的

使用场景宏命令输入验证，宏命令格式如下：{$xxx}，xxx暂为任意字母、数字、下划线组合的字符串，但{$}是固定的格式。动态表单验证需要用到prop属性，可参考官方文档：动态增减表单项局部代码如下<template> <el-form :model="add_host_Form" size="small"> <el-form-item label="macros"> <el-row style="font-size: 13px" v-

代码要实现一个动态添加和删除的时间控件列表，列表第一个不能删除，属性为disabled。<ul style="list-style: none"> <li v-for="(item, index) in run_datetime" :key="index"> <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="item.day"

将常用的数据字典封装成配置文件(devicetype.js)，代码如下：// 数据显示时使用export const deviceType = { 11: "服务器", 12: "数据库", 13: "网络设备", 14: "企业应用", 15: "打印机", 16: "UPS", 17: "PC终端", 19: "虚拟设备"}// 数据搜索传参时使用export const deviceSearch = [{

要实现的功能：1. 当我初次打开一个页面时，就开始循环执行定时任务，定时刷新页面列表；2. 当我离开或关闭当前页面时，销毁定时器任务；3. 当我再一次进入打开的页面时，又开始循环执行定时任务。因为页面之间是路由跳转，所以用beforeDestroy方法并不能执行销毁定时器。所以我使用的是监听路由跳转来操作。mounted() { // 初次打开页面执行获取列表方法和定时任务 this.getNatRule(); // methods里的方法 this.timer = set

一、单选模式下选择任意节点在单选模式下，只能选择叶子节点，是因为父子节点存在关联。官方文档中写道：“可通过props.checkStrictly = true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。”使用示例：<el-cascader :props="{ checkStrictly: true }" :options="options"></el-cascader>二、单选模式下选中节点后，关闭下拉框在单选模式下，选中节点后，下拉框不会...

今天下午在写代码的时候，VSCode编译器右下角突然报错，报错内容如下：Vetur find `tsconfig.json`/`jsconfig.json`, but they aren't in the project root.而且不能进行格式化vue文件操作了，我这人有强迫症，找到是Vetur插件在一个小时前更新造成的结果，我采用的是版本回退的方法解决的这个问题。在Vetur插件进行鼠标右键，选择==>安装另一个版本。选择之前的版本，然后重启VSCode编译器。我选择的是0

父页面代码，传值操作：goToDetail(row) { this.$router.push({ path: "assetdetail", query: { alias: row.name, id: row.id } })}子页面代码，取值操作：// 取query对象值this.$route.query// 取query具体属性值this.$route.query.aliasthis.$route.query.id...

场景：父页面A，子页面B。从父页面A跳转到子页面B，进行添加操作，添加完成，关闭子页面B，跳转回父页面A。因为新增一条数据，需要重新加载列表。父页面A局部代码如下：watch: { $route(to, from) { // console.log("到哪个页面去", to.path); // console.log("从哪个页面来", from.path); if (to.path == "/asset/allasset" && from.path =

在这里只贴出局部代码<el-form-item :label="[triggerForm.recovery_mode == 1 ? '问题表现形式' : '表达式']" prop="expression"> <el-input type="textarea" v-model="triggerForm.expression"></el-input></el-form-item>...

在项目中，将a赋值给b，b改变，a值也会发生改变。我是使用强制改变变量指向的地址来解决的。var str1 = "abc";var str2 = "";// str2 = str1;str2 =JSON.parse(JSON.stringify(str1));

遇到的问题：在编辑时，回显的数据为数字。因为巡检周期字段是按约定好的数字传参的，而前端需要根据数字展示文字。常见的情况还有性别，数字0表示男，数字1表示女。1 ==> 日巡检2 ==> 周巡检3 ==> 月巡检4 ==> 单次巡检修改前的效果：修改前的代码：<el-select v-model="editTaskForm.run_style" placeholder="请选择"> <el-option label="日巡..

在使用Vue+ElementUI做项目的过程中，在table列表中使用Popover弹出框出现的BUG让我头都大了，官网没有给出具体的解决方案，于是在百度这片肥沃的土壤里寻找答案。试了好多种方案，最终在下面博客的评论里找到了解决办法。参考博客下面贴出我的代码局部代码：<!-- 删除用户弹窗 --><el-popover placement="top" width="160" :ref="`deluser-popover-${scope.$index}`">.

运行截图：复制下面代码，直接可以运行<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>博客列表</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> #show-blogs{ max-wid