qq_38969618的博客

（1）粘贴上传图片，不点击输入框，点击粘贴元素所在的行空白处，然后按ctrl+v也会触发粘贴paste事件，即也会自动上传，但此时点击确定所在行，再按ctrl+v又不触发了，失焦导致？：使用el-upload组件，自定义上传方法（调后台接口），传图片file给后台，后台返回对应阿里云的oss链接，前端临时保存，最后点击页面提交按钮，再传后台oss数组链接。

el-select下拉框不随滚动条滚动

nodejs构建错误

vue中使用可选链操作符构建报错。

问题原因：我安装错了库名！！！我直接在npm上搜，看到第一个显示的sortable.js，就直接错误安装npm install --save sortable.js，导致在我的vue+ts项目某个el-dialog页面使用时，拖拽一直不起作用。实际正确的应该是：sortablejs, 正确的库名是没有小数点分隔。正确使用如下：第一步：先安装插件npm install sortablejs --save第二步：在页面中引入插件&使用即可。// demo.vue<tem

一、解决el-select下拉选项在ios点击2次才能选中（通过css解决，需确保css样式全局作用域）。// App.vue<style lang="scss"> // to fix 在ios设备中，el-select组件下拉框，点击2次才能选中问题。 .el-scrollbar { .el-scrollbar__bar { opacity: 1 !important; } }</style>二、解决el-select添加f

原因：项目中使用了@vue/cli-plugin-pwa插件导致。修改mainfest.json中的icons也无效，只需在vue.config.js中配置pwa选项的iconPaths属性即可。// public目录下的index.html....<link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="manifest" href="/mainfest.json" />...// v

本地git clone新项目地址后，忘了下载依赖包导致，运行下载包命令即可：npm install

解决方案1：可能本地有多个nodeJS版本（本地使用了nvm），之前切到另一个版本编译node-sass后，再切换到另外一个nodeJS版本，导致的问题。注意：node-sass是一个绑定libsass（sass的一种版本）的nodeJS库。具体解决方法：重新编译下node-sass即可。npm rebuild node-sass解决方案2: 因本地使用nvm管理node, 且当前使用的node版本为低版本v12导致。复现环境：node: v12.22.0"sass-loade.

在vue.config.js文件中设置productionSourceMap和filenameHashing项为false即可。// vue.config.js文件module.exports = { outputDir: 'dist', assetsDir: 'assets', publicPath: './', // 需注意是相对路径，不然dist打包访问后就会出现空白问题。 productionSourceMap: false, // 去除Vue打包后js目录下生成的一些.ma

在head标签之间添加：<metaname="google"content="notranslate"/>

添加自定义类型声明文件xx.d.ts并在tsconfig.json中配置即可。

在public文件夹下新建excel文件夹-》新建“xxx.xls”表格-》使用window.location.href方法即可。// template<el-button size="medium" type="primary" icon="el-icon-download" :loading="downloadTemplateLoading" @click="downloadAddMemberTemplate">下载导入模板&lt..

进入iconfont官网，选中图片-》“复制SVG代码”-》在项目的icons/svg文件夹中新增xxx.svg文件，将之前复制的svg代码直接粘贴-》运行"npm run svg"命令，系统自动生成对应的xxx.ts声明文件-》在页面中通过svgicon组件（name = "xxx"）使用即可。// main.tsimport SvgIcon from 'vue-svgicon'Vue.use(SvgIcon, { tagName: 'svg-icon', defaultWidth: '

事件命名需全部小写，多单词使用中横线分隔。// 子组件this.$emit('get-list-after-add', question_id)// 父组件<child @get-list-after-add="getUpdatedListAfterAdd" ></child>

原因：默认源码中关于指令的el声明的是HTMLElement类型，但是该类型是没有disabled属性的。解决如下：// db-click.tsimport { DirectiveOptions } from 'vue'// To prevent the double click on the button, you can use this directive like: v-dbClick.interface HTMLElementPlus extends HTMLElement {

在src文件下新建axios.d.ts文件：// axios.d.tsimport * as axios from 'axios'declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> }}提示：如果此时编辑器仍报错，记得要关闭重启下IDE！参照：https://blog.csdn.net/weixin_42164539/art

在utils文件夹下新建工具函数get-page-title.ts-》在permission.ts的全局路由拦截器中设置document.title = getPageTitle(to.meta.title)即可。（注：setting.ts文件中可设置默认值。）// setting.tsinterface ISettings { title: string // Overrides the default title showSettings: boolean // Controls set

先创建应用站点-》系统自动生成pid编号-》 下载包（npm install alife-logger --save）-》在main.ts中配置即可。// main.tsconst BrowserLogger = require('alife-logger')const __bl = BrowserLogger.singleton({ pid: 'xxxxxxxxxxxxxxx', // 项目Id，新建一个应用站点后，系统自动生成。 appType: 'web', imgUrl:..

在src-》shims.d.ts文件中，添加第三方插件声明即可。// shims.d.tsdeclare module 'alife-logger' // npm install alife-logger --save

在.eslintrc.js文件中：将校验驼峰命名的规则关闭即可（camelcase: 'off'）。// eslintrc.jsmodule.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard', '@vue/typescript/recommended' ], parserOptions: { e

1.新建xxx.ts混入文件。// mixins/get-zone-lane-layer.tsimport { Component, Vue } from 'vue-property-decorator'import { get1To99ZoneList, getAToZLaneList } from '@/utils/index'@Component({ name: 'GetZoneLaneLayerMixin'})export default class GetZoneLaneL

listQuery: { page: 1, pageSize: 10, city_id: 321, user_name: ''}this.listQuery = this.$options.data().listQuery; // 重置列表查询对象