ddx2019的博客

**需求：**将原项目中所有用Element的Message 消息提示组件的地方，改为如下样式：message消息提示：demo见：demo地址

这里说的时间字符串格式是："2021-01-15T14:44:40.001+08:00" 或者 "2021-01-15 14:44:40" 一、原生js function diffSecond(start, end) { const startTime = new Date(start); const endTime = new Date(end); const second_time = Math.abs(startTime - endTime) / 1000; // 得到相差的秒数

文章目录一、安装插件二、在组件中测试是否引入成功三、踩坑合集1. 需手动设置workerSrc一、安装插件yarn add pdfjs-dist二、在组件中测试是否引入成功const PDFJS = require("pdfjs-dist");console.log("成功：",PDFJS )打印结果：三、踩坑合集1. 需手动设置workerSrc报错信息如下： Uncaught SyntaxError: Unexpected token '<' "Cannot rea

文章目录一、安装 ant-design-vue ，并引入其Icon组件1. 在项目中安装antd-design-vue2. 按需加载 ，引入并注册它的Icon组件二、封装 AntdIcons.vue四、使用刚刚封装的 AntdIcons.vue嗯，项目开发到后期，甲方提了一个需求，说要一个文章末尾那样子的图标选择器（要求图标基本与它一致），哇哦，这边让项目基于vue+element开发，甲方后来提的icon的需求确实基于ant,也只好将其集成进项目咯。值得注意的是，这里最好是将antd的组件按需引入，样式

一、前景

一、解决办法把你的接口地址重新敲一遍二、唠嗑唠嗑%E2%80%8B 这兄弟有一个艺名，Zero-width space，简称 ZWSP，中文名 零宽空格；学习之路任重而道远啊。这是我复制的

方法一：获取过去的那个时间的标准日期格式，来确定年月日注意： new Date(yy,mm-4,dd); ，是为了得到过去时间的标准日期格式。这里得到的mm,即月份加了1，故这里是mm-4 而不是-3 哈。 function getThreeMonthDate(){ let currDate=new Date().toLocaleDateString();// 2020/11/6 let arrs=currDate.split('/'); let yy=parseInt(

自定义获取元素焦点的指令，v-focus一、局部注册的写法需求：当页面加载时，该元素将获得焦点；第一种，通过input的自带autofocus属性实现（autofocus在移动版Safari上不工作）第二种 利用自定义指令实现<template> <div class="test-directives"> <input v-focus /> </div></template><script>expo

小tip：当网页中有多种情况的操作按钮，这些按钮的功能和样式相同，但每个页面的所需的功能不同，且后续对按钮功能可能还会有相应的更改，故做了这样的封装。一、封装OperateBtn.vue<template> <el-button v-for="btn in btns" :key="btn.value" @click="handleClickBtn(btn.value)" :type="btn.type" :icon

svg-sprite-loader 的作用： 将加载的 svg 图片拼接成 雪碧图，放到页面中，其它地方通 复用一、安装 svg-sprite-loaderyarn add svg-sprite-loader -D二、配置webpackvue.config.js文件yarn add svg-sprite-loader -D

标题

一、封装SvgIcon组件SvgIcon.vue文件<template> <div> <img v-if="svg" :src="svg" :class="cssModuleA.noSelect" height="24px" /> </div></template><style module="cssModuleA">/* CSS Modules： */.noSelect { user-select:

在css中，currentColor是一个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父元素继承而来。.svg-icon { /*将icon大小设置和字体大小一致 */ width: 1em; height: 1em; vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效

一、css Module 简单写法<style module>* 这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。可在模板中通过一个动态类绑定来使用它，因为 $style 是一个计算属性，所以它也支持绑定class的 :class 对象/数组语法：<template> <div> <p :class="$style.red">我是一段文字&

一、警告信息如下：vue+element项目中，解决chrome下的passive警告问题element-ui.common.js?5c96:9972 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://ww

公共的<template> <div> <el-dialog class="comn_dialog" :title="dialogTitle" :visible.sync="visible" width="415px" top="23vh" > <slot> <p>弹窗内容</p> </slot>

<template> <div :class="{ hidden: hidden }" class="pagination-container" > <span class="refresh_icon el-icon-fa-refresh" title="刷新" @click="handleRefreshTable" ></span> <el-pagi

一、数组去重 function unique(arr){ return Array.from(new Set(arr)); }你也可以这样写: function unique(arr){ return [...new Set(arr)]; }

<template> <div class="tree-container"> <el-tree class="_tree" :data="treeList" :props="defaultProps" @node-expand="handleNodeExpand" :lazy="true" @node-click="handleNodeClick" @node-contextmen

<template> <div class="serachform-conatiner"> <el-form :model="queryForm" :inline="true" ref="queryForm" label-width="80px" class="query-form" > <slot> <el-form-item label="编码

动态路由中，有一步需将后端传回的component 的字符串模式，改为我们前端路由需要的component模式一、import写法 报错动态路由 Cannot find module '@/views/Home.vue'function loadPageByRoutes(str) { // 传入的str为 '@/views/Home.vue' 这种格式 return () => import(`${str}`);// 要报错 }二、改为require写法,并返回一个resolve

在vscode中安装LOC插件安装了，按 Ctrl+Shift+p ，再输入命令 LineCount 就可以了此时会在你的项目下生成一个out文件夹，文件夹下有两个文件，里面记载了你代码行数等相关的的详细信息以上操作是按默认设置统计 ，也可以在vscode的 setting.json 文件中，新增它的配置信息，详细配置，参考 **LOC**插件 的文档。...

//修改排序号时，id为键，sequence为值 ,的数据格式传给后端 mounted() { let arrs = [ { key: "A", name: "答案A" }, { key: "B", name: "答案B" }, { key: "C", name: "答案C" } ]; console.log(this.convertData(this.arrs));// [{A: "答案A", B: "答案B", C: "答案C"}] }

安装 mavon-editor npm install mavon-editor --save 一、vue中，按照官网，全局注册mavonEditor报错参考mavonEditor的github地址给出的全局注册 use 示例，报错：Unknown custom element: <mavon-editor> - did you register the component correctly?mavonEditor.jsimport Vue from "vue";import

function getName(name){ let map = new Map([ ["添加", "add"], ["修改", "update"], ["删除", "delete"], ["移动", "move"], ["启用", "enable"], ["禁用", "disable"], ["保存排序号", "saveNum"] ]); return map.get(name

function treeConvertToArr(tree) { var arrs = []; var result = []; arrs = arrs.concat(tree); while (arrs.length) { let first = arrs.shift(); // 弹出第一个元素 if (first.children) { //如果有children arrs = arrs.concat(first.children);

<template> <div> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 10

function getRandomNum(n) { let rdmNum= ""; for (let i = 0; i < n; i++) { rdmNum+= Math.floor(Math.random() * 10); // [0,10)的整数 } return rdmNum;}// let id = "T" + RndNum(6); //生成以T开头的七位随机数 ,如：T419075

weekDays: ["天", "一", "二", "三", "四", "五", "六"].map( val => "星期" + val ), 此时weekDays 为， ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]

将驼峰法转为下划线连接的小写格式在排序时，后端要求，将驼峰命名的字段，如 fullName 等数据，更改为 full_name 的写法（数据库写法），传给他。export function changeHumpToLowerCase(str) { // str ====> fullName let arrs = str.split(""); // 将字符串用split拆为单个字母为元素的数组，fullName ====> ["f", "u", "l", "l", "N", "a

一、代码实现：@row-click="handleRowClick" 给表格绑定一个点击事件，该行被单击时，触发该事件遍历从后台获取的 tableData,给它的每一个item加上一个控制该行展开与否的标志 expanded在刚刚绑定的点击事件中，调用表格的 toggleRowExpansion(row, expanded) 方法，第一个参数是点击的那行的数据，第二个参数是展开与否 （为true时展开，为false则收起）<template> <el-table :

一、在App.vue 中，通过provide来提供变量vue 刷新页面，父组件中通过provide来提供变量，在子组件中通过inject来注入变量。<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div></template><script>export default { name: "A

代码实现注意：路由传参的参数是一个对象的时候，最好先序列化一下再传过去，避免刷新页面的时候，参数格式问题引起报错问题 MaintainOperate(row) { let link = this.$router.resolve({ path: "/table-matain", //要跳转的路由 query: { currTableItem: JSON.stringify(row) //query方式传的参数，这里传的是一个对象，所以序

一、问题描述 <el-form-item label="默认值：" prop="category"> <el-select v-model="FormInAddPopup.category" placeholder="请选择" > <el-option label="" value=""> <sp

<template> <div class="collapse-container"> <el-collapse accordion v-model="activeNames" @change="handleCollapseChange"> <el-collapse-item name="collapsePanel"> <template slot="title"> <i class

一、从后端拿到的数据结构要求：code为 main 的是顶层节点， perentId为另一个的id时候，parentId那方为子节点 const arrs = [ { id: 1, parentId: "", name: "111", hasChildren: 2, code: "main"

一、问题描述我左侧的树形菜单和弹框中的格式一样，组件也是一样的，左侧的树形菜单能渲染出来，但是弹窗中的树形菜单并未渲染。代码如下：<template> <comn-tree :treeList="treeList" @handleNodeClick="handleNodeClick" @handleRightClick="handleRightClick" @handleNodeEx

一、问题描述append-to-body属性，导致内层弹框样式设置不上二、解决办法，自然是 去除 append-to-body 属性,内层弹框样式设置上了，且正常显示

一、问题描述代码： <el-pagination :background="background" :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size.sync="pageSize" :layout="layout" :total="total" :pager-count="4" v-bind="$attrs"

一、问题描述代码：//multipleSelection 是当前选中的表格数据（是数组），FormInAddPopup 是弹框中的数据（是对象） this.FormInAddPopup = this.multipleSelection[0]; // 浅拷贝二、解决办法 this.FormInAddPopup = JSON.parse(JSON.stringify(this.multipleSelection[0])); // 深拷贝...