xiaoqingqing的博客

项目场景：对于后端返回为空的数据，前端文本需要显示为两个中划线–。想到了应用Vue的过滤器。但是实际应用中发现同一个过滤器有的正常返回，有的展示的是0问题描述：前端展示时需要将模板字符串过滤器拼接起来展示，这种情况下，过滤器返回的时0。我想要的是–分钟，而返回的是0分钟。<template> <span>{{ `${ msg | formatText }${ times_unit }` }}</span></template>filters:

打包后 opacity渲染为1%背景项目打包部署后opacity渲染为1%，本地localhost的透明度为50%无异常解决搜索资料发现opacity设置为百分比的时候，打包后数值被强制改成了1%进一步查看 MDN发现属性值时0-1.0之间的数字值，方案将属性值改为0.5打包后就没问题...

问题: 使用elementui后，Vue 项目打包后，对应的图标不显示，只有一个小方块。解决方法： 修改build/utils.js 文件，新增publicPath 配置项 publicPath: '../../'。 // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.use

安装Vue cli3.x由Vue-cli 2.x 升级到Vue-cli3,需要全局卸载2.x版本。命令：npm uninstall vue-cli -g安装Vue-cli3.x。使用命令（错误示范）：npm install -g @vue/cli使用命令vue -V或者vue --version检查已经安装的版本。结果发现版本号是4.5.9。使用命令：npm install -g @vue/cli全局卸载vue-cli，安装指定版本的vue-cli。去官网查看，发现3.x最新版本是3.12

个人学习node.js 思维导图

elementUI单选多选框动态绑定显示内容和绑定值，挺简单的内容，总是不熟练，小小记录一下。单选：<!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}</el-radio>

一、场景描述：项目中使用到了elementUI的el-cascader组件，先一次获取所有数据，根据不同类型，级联选择器加载对应数据。<!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}&lt

前端中大部分的数据都是由访问后台接口获取到。所以我们需要将获取到的数据再绑定到对应的组件中。其中接口对应的字段和组件中要绑定的字段不一样完全一致，所以我们要设置相应的属性，实现联动，一一对应。后台返回的数据格式如下[{ value: 'zhinan', name: '指南', children: [{ value: 'shejiyuanze', name: '设计原则',

问题部署好的项目在chrome中打开，出现了黑色边框。界面用的是elementUI，使用抽屉组件是出现了这种情况，其他的表单组件均正常原因通过搜索资料，确定是chrome浏览器本身问题。资料显示这是最近chrome浏览器更新83新版本产生的问题：Chrome83版本对表单控件进行了视觉效果的更新，当文本输入框处于焦点以及选定下拉菜单中的选项时，浏览器会在它们周围显示一个“黑框”，以突出表单中的这些内容。后来在优快云上看见有个童鞋发帖说：这个问题已经反馈给了Google，在Chrome84 D

问题描述选择器加载时默认选中第一个选项遇到问题el-option的v-model 绑定data中的值。显示的不是文本值而是索引解决方案： 问题所在： 两处的值一样但是类型不同导致。正确结果如下：...

一、目的？使用Vscode编辑器，创建文件很是常见，使用模板文件可以提高效率。下面以创建Vue模板文件为例。并附上Html配置的代码二、使用步骤1.打开VsCode–>首选项–>用户片段。2.搜索Vue–>打开Vue.json文件并添加以下代码Vue.json代码如下：{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div c

一、问题描述为了实现点击侧边栏中一项，改变当前选中项的背景图片效果。原本使用循环遍历清除样式再单独添加样式可以实现，但是总感觉会有更简洁的方式实现。今天找到了方法，故而小小记录一下。template对应内容<ul> <li class="siderBarItem" v-for="item in sideBarItems" :key="item.value" :value="item.value" @click="goToProductOption(ite

Vue 引入Ueditor修改样式仿照Word文档前言Vue 引入Ueditor仿照word文档进行样式修改合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言项目中有涉及到对文本生成和文本内容编辑的需求，选择了百度的Ueditor。项目

vue 2.x 引用svg-sprite-loader简述大部分和参考链接的操作步骤相同，只有在修改配置文件是有所区别：在./build/webpack.base.conf.js文件中的module的rules下面添加以下代码段：{ test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[

layui导航栏二级菜单不显示问题描述在使用layui 中的导航栏组件时，除了 默认打开的第一个，其他的导航只能显示出一次的导航，原因查看layui 的官方文档，可以发现layui 的导航目录时依赖于element 的，所以我们需要创建一个element解决方法撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：...