一、前言
项目开发过程中,组件通过render()
函数渲染生成,并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。
另一个逻辑处理页面由Vue
实现,该页面可以实时展示元素相关属性信息(包括size、width、height
及left
、top
等属性)。
二、思路
- 监听器方式实现;
Vuex state
实现;
三、代码实现
.js
// 鼠标按下事件
el.onmousedown = function (e) {
document.onmouseup = function (e) {
// Vuex state实现方式
store.commit('domAzimuth/SET_DOMAZIMUTION', el.style.cssText);
// 监听器实现方式
// window.postMessage({domStyle: domStyle}, '*')
}
}
.vue
computed: {
...mapGetters('domAzimuth', ['directProps']),
domStyle () {
return this.directProps
}
},
// 监听器方式中,务必在页面销毁前释放掉监听器,否则会造成内存泄漏!
beforeDestroy () {
// window.removeEventListener('message', this.listenerMessage)
},
mounted () {
// window.addEventListener('message', this.listenerMessage)
},
}
四、效果
五、延伸阅读
在JS 向 Vue 传值过程中,当使用axios
请求后台时,后台无法获取前端传参数据。
qs
是一个增加了一些安全性查询字符串解析和序列化字符串的库。首先使用如下语句安装:
npm install qs
在组件中应用
import qs from 'qs'
或定义为全局组件:
//在main.js引入qs
import qs from 'qs'
//配全局属性配置,在任意组件内可以使用this.$qs获取qs对象
Vue.prototype.$qs = qs
主要使用qs.parse(),qs.string
。
-
qs.parse()
是将URL
解析成对象形式; -
qs.stringify()
是将对象序列化成URL
的形式,以&
进行拼接;
具体例子如下:
let data = qs.stringify({
"username":this.username,
"password":this.password
});
序列化后的结构如下:
username=renping&password=123456
六、拓展阅读
原文链接:https://juejin.cn/post/7245191376358457404 作者:NoSilverBullet