上好佳的博客

vue引入iconfont阿里巴巴矢量图标库官网，自定义图标

问题描述：在data中声明了多个变量：如（tagEdit :false）。因为变量名后半部分重复，触发点击事件时，只传前缀（如 tagEdit，@click="click('tag')"）HTML部分：解决方案：接收后获取并且改变变量值，`${变量}`是一种字符串拼接的写法//正常获取时：this.tagEdit = true，拼接字符串获取：this[`${tag+"Edit"}`] = true实现效果：通过点击事件控制页面内容显隐，(click方法中，变量为..

问题（如图）：文本超出显示范围，尝试其他几种情况后发现，当文本中无空格和中文时，才会出现下图中的情况解决方案：设置 div 强制换行<div style="word-break: break-all"> zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq</div>其他：举例一下几种可以正常换行的情.

（ps:npm 安装教程可参考以下地址：https://www.cnblogs.com/goldlong/p/8027997.html）项目搭建1.选择新建项目磁盘目录及文件夹：C:\Users\LENOVO>E:E:\>cd IdeaProjects2.新建目录：vue init webpack test-project,选择项目配置以上选项不清楚的，可参考以下地址：https://www.jianshu.com/p/32beaca25c0d3.搭建完..

功能需求根据后台接口返回数据中的文件路径区分文件类型，并将对应的图标（缩略图）显示在文件名称前实现效果代码片段HTML：（以下为项目中截取的部分代码） <div class="item" v-for="(item, index) in dataList" :key="index"> <div class="flex itemsCenter justifyBetween"> <svg-icon v-if=

将URL作为参数传递，需将URL进行转义，可以使用JS中提供转义字符串和解析字符串的方法转义字符串（encodeURIComponent）let url = 'http%3A%2F%2Fm.test.com%2Flogin'url = encodeURIComponent(url)console.log(url) // http://m.test.com/login解析字符串（decodeURIComponent）let url = 'http://m.test.com/log.

在开发中经常遇到关于子父组件之间传值和方法调用的问题，因此将上述两种方式结合作为例子记录下来。功能需求：通过切换左侧侧边栏（以下简称left），右侧对应显示相关内容（以下简称right）实现思路：将left和right分别封装为自定义组件，left切换时调用change事件，将id值传回父页面，再由父页面调用right中获取列表的方法代码片段：left.vue<template> <div class="left-content"> <

功能需求：演播室预约申请后，以视图（日历）形式显示当天各个录课室的占用情况实现过程：安装插件npm install --save @fullcalendar/core npm install --save @fullcalendar/resource-timeline npm install --save @fullcalendar/timeline引入import FullCalendar from '@fullcalendar/vue'import resourceTi

1、数组变异方法可触发vue重新渲染如push()、pop()、shift()、unshift()、splice()、sort()、reverse()等例：letauto=this.page.records[i]; auto.compressSchedule=ret.data; this.page.records.splice(i,1,auto);2、使用vuekey实现标签中传递:key="变量",每次需要重新渲染时改变变量值即可3、强制更新数据this.$...

给标签添加属性 :transfer="true" 即可<DatePicker format="yyyy-MM-dd" split-panels placeholder="选择日期" :options="options" :transfer="true" v-model="item.saleEndTime"></DatePicker>

功能需求：在同一页面引用多个富文本编辑器问题：最开始考虑使用wangEditor，但发现上传图片时位置错乱，每次都会上传到最后一个编辑器上（如图1所示）于是更换vue-quill-editor插件，问题得到解决。图 1解决方案：1.安装npm install vue-quill-editor --save2.在 main.js 引入import VueQuillEditor from 'vue-quill-editor'Vue.use(VueQuillEdito

实现效果：

1.安装npm install --save qrcode2.引入<el-button type="primary" style="float:right" @click="downLoad">立即下载</el-button>import QRCode from 'qrcodejs2' data() { return { callUrl:'https://www.baidu.com/' } },created() {

本例应用场景为，二维码链接复制1.安装npm install clipboard --save2.新建js文件 clipboard.jsimport Vue from 'vue'import Clipboard from 'clipboard'function clipboardSuccess() { Vue.prototype.$message({ message: '复制成功', type: 'success', duration: 1500 ..