Dong8508的博客

需要放在生命周期位置，和mounted同级，非方法里面。//记录离开时的位置 beforeRouteLeave (to, from, next) { //保存滚动条元素div的scrollTop值 let scrollTop = document.querySelector('.page-content').scrollTop; from.meta.scrollTop = scrollTop; next(); }, .

import QRCode from "qrcode"; QRCode.toDataURL('XXX', (err, url) => { this.url = url; this.drawImage(); });//使用canves 画图带logo drawImage(){ let canvas = document.createEle.

场景：一个表单设计流程，为了传值开发方便，很大程度上都是使用单页面开发，过程中产品需要回退（返回功能）。解决思路：使用锚点。打开全屏弹窗的时候，改变url添加锚点，关闭的时候去除锚点。返回的时候使用this.$router.back();如果涉及多弹窗之间的记录，需要使用watch监听路由变化。watch: { '$route.hash' (val){ let configWhiteList = ['#config','#option']; //con.

<div class="drag-con" @dragover="fileDragover" @dragenter="dragenter" @dragleave="dragleave" @drop="fileDrop"> <div class="icon"> <svg-icon class="svg-upload" ico..

1、官网地址 https://www.npmjs.com/package/vue-draggable2、表格使用 <draggable slot="body" class="syllable_ul" element="tbody" ...

1、安装npm install vue-quill-editor –save2、引入全局引入//main.jsimport VueQuillEditor from 'vue-quill-editor'; //富文本Vue.use(VueQuillEditor);// require stylesimport 'quill/dist/quill.core.css'impo...

1、安装npm install v-viewer2、全局引入import 'viewerjs/dist/viewer.css';import Viewer from 'v-viewer';Vue.use(Viewer);3、使用 （1）指令式使用，只需要将 v-viewer 指令添加到任意元素即可，该元素下的所有 img 元素都会被 viewer 自动处理。...

1、大型项目 枚举接口的使用，把枚举字段存放在vuex中，并在使用到的地方，使用mapState辅助函数 获取，mapState 介绍使用方便状态及配置的管理。2、页面渲染，带html标签的使用v-html或者 v-text。3、状态映射//两个字段的映射<div>{{item.status==1?'通过':'拒绝'}}</div>//多个字段的映射&l...

总结: vue中混入是是实现类继承的重要方式。1、minix会在引入文件 中进行 属性和方法的合并（混入）minix优先执行，相同字段名 熟悉会覆盖。相同函数名会合并为一个数组，数组会优先执行minix.demo:// minix.jsexport default { data () { return { name: 'min...

使用场景官网介绍:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { mapState } from 'vuex'export default { // ... computed...

收集大佬整理https://blog.youkuaiyun.com/weixin_39876634/article/details/88562183

Drag.vue<style lang="less" scoped> .drag-wraper{ position:fixed; opacity: 0; display: block; z-index: 999; transform:translate(0px,0px) translateZ(0); }</style&...

功能介绍：1、icon拖拽位移 2、边界判断 （仅在可视区域滑动，防止Icon丢失）3、吸边处理（仅处理X轴方向）开发遇到的问题：1、ios 上拖拽时，body跟随滚动：     解决办法：在move的时候，阻止事件默认行为2、使用transform的时候，再次拖拽出现icon不跟随鼠标现象导致icon不可控      解决办法：transform的值基于DOM的起...

&lt;template&gt; &lt;div&gt; &lt;div @click="changeOn" :class="isOff?'isOff':'isOn'"&gt; &lt;/div&gt; &lt;audio id="audio" :src="require('../assets/mp3/themass.mp3

1、首先注意，input的type="serch" &lt;input @keypress="searchGoods" type="serch" placeholder="搜索商品"&gt;2、监听keypress事件（1）KeyDown、KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI ...

1、在main.js同级目录下 新建api.jsimport axios from 'axios';import qs from 'qs';//设置默认请求方式，指定Content-Typeaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';const instanc...

1、在工作当中，经常遇到编辑数据回显问题，在使用iview的时候，针对select和i-switch的值，需要转换了布尔类型的值。2、实际上数据库不会保存一个布尔值到数据库，而是存0 or 1，需要前端自己做下转换。转换方法：1、 this.status = new Boolean(this.status )2、三目运算符this.status =this.status...

1、iview的对话框，点击确认后就直接关闭了，当我们需要进行表单确认的时候，就需要特殊处理了 &lt;template&gt; &lt;Button type="primary" @click="modal = true"&gt;设置汇率&lt;/Button&gt; &lt;Modal v-model="modal" title="设置汇率"

1、直接上代码。 :value="form.regiestTimeStart"  用于数据的双向绑定  @on-change="timeFormatStar" 选择时间后，针对数据进行转换，用于数据提交 format="yyyy-MM-dd HH:mm:ss" 指定数据展示格式 :options="startTimeOptions" 设置规则（时间段） &...

在微信中搜索的时候， 我们通常使用keycode=13来判断客户是否点击了确定。在安卓上，唤醒搜索框为确认键没问题，而ios就不敢苟同了，ios显示为换行，对于客户使用体验非常不好。解决方案：html代码。 &lt;form @submit.prevent action="#"&gt; &lt;input class="search_input" ref="...

做列表缓存的时候，受益于@ vonvon_chris 这篇文章原文链接https://blog.youkuaiyun.com/akony/article/details/79203745实现了返回不刷新页面，当需要局部刷新的时候，使用activated的生命周期activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在 。 ...

1、在main.js中初始化项目var Main = { init:function (){ this.initVue() this.initBeforeEach(); }, initSession :async function (){ let result = await Vue.prototype.$ajax.post('/getUserInfo'); if(!r...

1、上传效果（含添加和删除设计图）： 达到上传上限，隐藏上传图标，删除后，数量小于上限会自动显示。2、html代码//使用前，要在JS中先把组件引入并挂载import updatefile from "../common/uploadfile";components: { updatefile },//使用<updatefile :multiple...

问题描述：          在项目中，一个订单可能含有多个物流轨迹，查看包裹轨迹时，共用了popup组件，发现一个问题，弹窗内部滚动的位置无法重置，检查了css代码,没有什么特殊的，起初搞了一个临时方案，关闭的时候高度置为0，打开的时候重新赋值，总感觉不舒服。&lt;mt-popup v-model="popupVisible" v-if="popupVisible" &gt; ...

 1、组件内部，属性值地址空间内引用地址改变，DOM不能渲染。     问题举例：this.items = [[],[],[],[]] 1、在items 中，修改任意一项数组中的值，DOM是不会更新的，2、解决方案： this.items = [...this.items]。通过解构赋值，重新给items赋值。2、组件之间传值，父组件传data改变,子组件未更新。...