时间:2021-07-01 10:21:17 帮助过:4人阅读
背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用。
由于不是很难,就不做过多解释了,直接上代码:
- <template>
- <el-container v-bind:id="id"
- v-if="dialogVisible">
- <el-header>
- <div @mousedown="mousedown">
- <h2 v-html="title"></h2>
- <div @click.stop="closeDialog()" style="position: absolute;top: 0px; right: 20px;">
- <span>
- <svg class="icon" aria-hidden="false">
- <use xlink:href='#el-icon-ext-close'></use>
- </svg>
- </span>
- </div>
- </div>
- </el-header>
- <el-main>
- <slot>这里是内容</slot>
- </el-main>
- <el-footer>
- <span class="dialog-footer">
- <el-button @click="closeDialog">取 消</el-button>
- <el-button type="primary" @click="closeDialog">确 定</el-button>
- </span>
- </el-footer>
- </el-container>
- </template>
- <script>
- export default {
- name: 'Window',
- props: {
- titlex: String,
- id: [String, Number]
- },
- data() {
- return {
- title: '标题',
- selectElement: ''
- }
- },
- computed: {
- dialogVisible: {
- get: function () {
- return this.$store.state.dialogVisible
- },
- set: function (newValue) {
- this.$store.commit('newDialogVisible', newValue)
- }
- }
- },
- methods: {
- closeDialog(e) {
- this.dialogVisible = false
- // alert(this.dialogVisible)
- this.$store.commit('newDialogVisible', false)
- },
- mousedown(event) {
- this.selectElement = document.getElementById(this.id)
- var div1 = this.selectElement
- this.selectElement.style.cursor = 'move'
- this.isDowm = true
- var distanceX = event.clientX - this.selectElement.offsetLeft
- var distanceY = event.clientY - this.selectElement.offsetTop
- // alert(distanceX)
- // alert(distanceY)
- console.log(distanceX)
- console.log(distanceY)
- document.onmousemove = function (ev) {
- var oevent = ev || event
- div1.style.left = oevent.clientX - distanceX + 'px'
- div1.style.top = oevent.clientY - distanceY + 'px'
- }
- document.onmouseup = function () {
- document.onmousemove = null
- document.onmouseup = null
- div1.style.cursor = 'default'
- }
- }
- }
- }
- </script>
- <style scoped>
- .el-container {
- position: absolute;
- height: 500px;
- width: 500px;
- border: 1px;
- top: 20%;
- left: 35%;
- border-radius: 2px;
- }
- .dialog-footer {
- text-align: right;
- }
- .el-main {
- background-color: white;
- }
- .el-footer {
- background-color: white;
- }
- .el-header {
- background-color: white;
- color: #333;
- line-height: 60px;
- }
- .el-aside {
- color: #333;
- }
- </style>
备注:解决了鼠标拖动过快移除窗口后终端问题,其它优点请自测,如有问题请留言!
以上这篇VUE实现可随意拖动的弹窗组件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。