• vue

1.场景 btnB下的button位于btnB组件之中 2.点击btnA，触发btnB组件内的button的事件 <div ref="btnA" @click="clickA">直接点击</div> <div ref="btnB"> <button @click="clickB">被点击</button> </div> this.$refs.btnB.$el.firstChild.click()

<el-link class="link" type="warning" href="/static/商品资料导入文件.xlsx" download>下载excel模板(商品资料)</el-link> 文件实际存放路径public/static/商品资料导入文件.xlsx

1.说明 ‘Content-Type’为’multipart/form-data’ 数据添加使用new FormData() <input type="file" accept=".xlsx, .xls" @change="handleClick"> import axios from ‘axios’ handleClick(e){ const files = e.target.files const rawFile = files[0] let formData = new FormData() formData.append("files", rawFile) axios({ method: ‘post’, url: ‘/SZM/WuZiGuanLi/UpLoadWuZiImgExcel’, data: formData, headers: { ‘Content-Type’: ‘multipart/form-data’, ‘Authorization’: localStorage.getItem("authorization") } }) } 2.jquery上传文件 <form> <input type=&q…

import axios from ‘axios’ const CancelToken = axios.CancelToken const requestMap = new Map() let lastUniqueCode = ” const apiAxios = axios.create({ baseURL:’/’, timeout:10000 }) apiAxios.interceptors.request.use(function (config) { const uniqueCode = config.method + config.baseURL + config.url lastUniqueCode = uniqueCode if(requestMap.get(uniqueCode)){ config.cancelToken = new CancelToken(cancel => cancel(‘请不要重复提交！’)) } else { config.cancelToken = new CancelToken(cancel => requestMap.set(uniqueCode, cancel)) } return config; }) apiAxios.interceptors.response.use(func…

<div class="editor-slide-upload" :class="multiple==false&&imgCount>0?’disabled’:”"></div> 方法一 icon可以是变量也可以是常亮，isLike只能是字符串，是类名,且likeClass为true时才有 <i :class="[icon,{‘isLike’:likeClass}]"></i> 方法二： classB和classC都是类名，都是字符串 <i :class=" { classB: true, classC: isC }"></i> 方法三： class绑定一个三元表达式 <i :class=" isRed?’class1′, ‘class2’ "></i>

.disabled /deep/ .el-upload–picture-card { display: none; }

1.修改需要显示的标签与值 <el-cascader :show-all-levels="false" v-model="cascaderData" :options="mainItemsOne" :props="{children:’twocountytown’,label:’name’,value:’code’,checkStrictly:true}" @change="handleChange" ref="cascader"> </el-cascader> 2.获取选中列的其它值 let codetype = this.$refs.cascader.getCheckedNodes()[0].data.codetype 3.递归处理，设置某一属性不可选中 treeFix (tree) { tree.forEach(item=>{ if(item.codetype==’3′){ item.disabled = true } if(item.twocountytown){ this.treeFix(item.twocountytown) } }) }

父created–>子created–>子mounted–>父mounted

unpkg是一个快速的全球内容交付网络，适用于npm上的所有内容。 语法：unpkg.com/:package@:version/:file 例子： 使用固定版本： unpkg.com/react@16.7.0/umd/react.production.min.js unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js 使用version范围 unpkg.com/react@^16/umd/react.production.min.js 如果省略文件路径（即使用“裸”URL），则unpkg将提供unpkg字段指定的文件，或者回退到。 package.json main unpkg.com/jquery 在URL的末尾附加一个以查看包中所有文件的列表。 unpkg.com/lodash/

this.$message.closeAll()

1.问题描述 默认情况，v-html中的class并不生效 2.原因 scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.解决的话把scoped属性去掉就行了 2.解决方案 类名前添加>>> 参考链接:https://blog.csdn.net/weixin_42412046/article/details/80804285

1.子元素中checkbox绑定的v-model属性如果在初始化时候没有值，会导致后面值无法选中，所以如果checkbox绑定的值为后期添加，就需要在list渲染之前进行添加

1.问题描述 chrome和edge都正常，ie11中打开一片空白，控制台报错 2.处理步骤 安装babel-polyfill问题依旧 所有的函数写法fn(){}改为fn:function(){}问题依旧 main.js中挨个注释所有的第三方组件发现是一个库导致

<el-date-picker v-model="due_date" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOptions0" placeholder="pick date"> </el-date-picker> 1.今日以后 pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() – 8.64e7 } } 2.前一个月 pickerOptions0: { disabledDate(time) { const lastMonthTime = new Date().setMonth(new Date().getMonth() – 1) return time.getTime() > Date.now() || time < lastMonthTime } } 3.后一个月 pickerOptions0: { disabledDate(time) { const lastMonthTime…

1.新建.htaccess <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /demo/index.html [L] </IfModule> 注意最后一行demo替换为自己项目的子路径 2.将.htaccess文件放入项目所在的目录中 3.无需重启apache

1.问题描述 运行npm run unit报错 2.修改单元测试配置文件 路径： test/unit/jest.conf.js 移除： mapCoverage: true, 添加： "verbose": true, "testURL": "http://localhost/" 参考资源： aip：https://jestjs.io/docs/zh-Hans/using-matchers 配置参数：https://jestjs.io/docs/zh-Hans/configuration#collectcoverage-boolean 其它：https://www.jianshu.com/p/9786e3c66848

1.问题描述 404页面本身来源复杂，通过this.$router.go(-1)及this.$router.go(-2)或者history.back()都很难覆盖所有场景， 而且上面的方案很容易导致死循环-上一个页面出错跳到404，返回回去又继续跳到404。 2.问题根源 此时问题关键点，上一个路由到底是什么，此时就需要用到组件内的路由守卫 3.知识点 beforeRouteEnter中无法通过this获取到组件实例，但是可以在回调函数next中访问组件实例 4.相关代码 页面返回上一级按钮绑定back事件 data () { return { fromPathName: ” } }, beforeRouteEnter: (to, from, next) => { next(vm => { vm.fromPathName = from.name }) }, methods: { back: function () { if (this.fromPathName === ‘details’ || this.fromPathName === ‘video’) { this.$router.push({name: ‘library’}) } else { this.$router.push({name: this.fromPathNa…

外层容器添加类名swiper-no-swiping

destroyed: function () { // code }

mounted: function () { window.addEventListener(‘scroll’, () => { let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop if (scrollTop > 60) { // 1 } else { // 2 } }) }

问题原因： name: ‘myFooter’, components: { myFooter } name部分和components部分重名导致，修改不同即可

1.问题描述 直接修改数组某一项的值，数据变化后ui并不跟着变化 2.解决方案，要用到，数组更新检测 错误的代码 setOptionVal: function (index, val) { this.SubjectListData[index].optionIdStringResult = val } 正确的代码 setOptionVal: function (index, val) { let tempVal = this.SubjectListData[index] tempVal.optionIdStringResult = val this.$set(this.SubjectListData, index, tempVal) } 3.方案总结，可采取下面三种解决方案： Vue.set() Object.assign() $forceUpdated() Vue.set() this.$set(this.item,’newProperty’,’新值’) Object.assign() 直接使用Object.assign()添加到对象的新属性不会触发更新 比如这样 Object.assign(this.item,{newProperty:’新值’}) 应创建一个新的对象，合并原对象和混入对象的属性 this.item = Object.as…

1.相关文件 src/App.vue 2.相关代码 <template> <div id="app" class="loading"> <router-view/> </div> </template> mounted: function () { let ele = document.getElementById(‘app’) setTimeout(function () { ele.classList.remove(‘loading’) }, 1500) } #app{ height: 100%; } .loading:before{ content: ”; position: fixed; width: 100%; height: 100%; left:0; top:0; background:#fff url(/static/img/loading.gif) center center no-repeat; z-index: 99999999; }

1.问题描述 轮播处于子组件中，数据通过props从父组件异步获取，父组件中用了async函数 2.问题所在及解决方案 后来发现是因为，data部分list数组中写入了静态的数据，删除后空白轮播消失，但是loop无效 父组件中引用子组件的地方的加入判断v-if="swiperBannerData.length>0"，问题消失