Vue2+Tsx 的一个问题
const userInfo: any = UserService.getUserInfo()
const userId = userInfo?.userId || 0如上，userId 最后没有使用，会报什么问题？
分类 Vue 下的文章
Vue JSX/TSX $attrs用法
<el-table
data={this.data}
height={this.height}
{...{
props: this.$attrs,
on: this.$listeners,
}}
></el-table>
html 导出 pdf
import html2canvas from "html2canvas"
import JSPDF from "jspdf"封装 printPdf.js
// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {
// eslint-disable-next-line
install (Vue, options) {
Vue.prototype.ExportSavePdf = function (...
Element Plus 表格中的图片预览层级问题
https://github.com/element-plus/element-plus/issues/6712复现链接
Nodejs+Express+Vue 分片上传文件
Vue<template>
<div class="upload">
<el-upload
:before-upload="befUpload"
class="upload-demo"
drag
action="/"
:show-file-list="false"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div cla...
Axios封装 2.0
import axios from "axios";
import { Notify } from 'vant'; // 这个是异常提醒弹框. vant或者ele的,在或者其他的
import router from '@/router'; // 做跳转
//下面三个是错误处理. 底下的拦截判断出异常. 这里通过 errorCreate new一个Error, 然后在使用 errorLog 打印出来在页面提示一下. 可以直接写成提示的
function errorCreate(msg) {
const error = new Er...
Vue移动端轮播图 中间大,两边露一点
npm install vue-awesome-swiper@3
npm install swiper<template>
<div v-if="items.length" class="full-page-slide-wrapper">
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<template v-for="(item, i) in items">
...
Vant List组件一直触发onload问题
在当前页面的最高层元素添加样式 overflow-y: auto;
height: 100vh;
IOS封装的H5移动端页面底部小黑条
ios封装的web端应用, 滚动到底部后还能继续朝下滚动,出现空白通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。App.vue页面
created() {
document.body.addEventListener(
"touchmove",
(e) => {
if (e._isScroller) return;
e.preventDefault();
},
{
passive: false,
}...
H5打电话发短信
<meta name="format-detection" content="telephone=yes"/>
<a href="tel:13660007710">13660007710</a>
<a href="sms:13660007710">13660007710</a>
粘贴图片 ctrl+v
document.addEventListener("paste", function (event) {
var isChrome = false;
if (event.clipboardData || event.originalEvent) {
//某些chrome版本使用的是event.originalEvent
var clipboardData =
event.clipboardData || event.originalEvent.clipboard...
Element 设置不能选择今天以前的日期或以后的日期
<el-date-picker
:picker-options="pickerOptions0"
style="width: 200px"
v-model="poolData.targetTime"
type="datetime"
placeholder="设置截止时间"
value-for...
Vue axios返回文件流
responseType:"blob", 请求接口的时候加上
let blob = new Blob([res], {
type: "application/vnd.ms-excel",
});
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.download = 'zz.xlsx'
link....
OSS分片式上传文件
Vuenpm i ali-oss配置oss.js import OSS from 'ali-oss'
const client = new OSS({
region: 'oss-cn-hangzhou',
accessKeyId: '---',
accessKeySecret: '---',
bucket: '---'
})
export default client使用 <div
v-loading.fullscreen.lock="fullscreenLoading"
:el...
Vue v-html CSS样式没有
方法一去掉style标签内的scoped方法二在有scoped的情况下 使用 >>>选择器
elementui resetFields属性未定义
我目前遇到的情况是 this.$refs["ruleForm"].resetFields(); 提示未定义没有这个方法。但是我第二天重新打开项目就又好了。当时报错解决方法是this.$nextTick(() => {
this.$refs["ruleForm"].resetFields();
});
Vue关闭eslint
// vue.config.js 配置文件
module.exports = {
lintOnSave: false
}
Vue路由跳转
1. router-link2. this.$router.push()3. this.$router.replace() (用法同push)4. this.$router.go(n)router-link<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
<router-link :to="{name:'home', params: {id:1}}">
类似于post，第一次有效，刷新就消失
<router-link :t...
ElementUI
表单验证// 整个表单验证
this.$refs.dialogRef.validate(()=>{});
// 单个字段 code是字段
this.$refs.dialogRef.validateField('code',()=>{})表单验证rulerules:{
code: [
{ required: true, message: "请输入商品编码", trigger: "blur"
},
{
min: 1,
max: 2...
Electron-vue
需要运行环境和打包程序
npm i -g electron
npm i -g electron-builder
项目安装
vue init simulatedgreg/electron-vue my-project其中--platform是配置打包成什么平台的安装文件，下面是可选的值win系统： win或者win32，即--platform=win或者--platform=win32mac系统：mac或者darwin，即--platform=mac或者--platform=darwinLinux系统：linux， 即--platform=linu...