1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <div id="dragView">
- <header @mousedown="mousedown">
- <span>头部</span>
- <span class="close_btn" @click="close">X</span>
- </header>
- <main>
- <iframe :src="iframeSrc" frameborder="0"></iframe>
- </main>
- </div>
- </template>
- <script>
- export default {
- name: 'Window',
- props: {
- "iframeSrc": String
- },
- data() {
- return {
- title: '标题',
- selectElement: ''
- }
- },
- methods: {
- mousedown(event) {
- this.selectElement = document.getElementById('dragView')
- var div1 = this.selectElement
- this.isDowm = true
- var distanceX = event.clientX - this.selectElement.offsetLeft
- var distanceY = event.clientY - this.selectElement.offsetTop
- 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
- }
- },
- close(){
- this.$emit('closeDrag')
- }
- }
- }
- </script>
- <style lang="less" scoped>
- #dragView{
- position: absolute;
- z-index: 2001;
- top: 332px;
- left: 449px;
- width: 300px;
- height: 300px;
- text-align: center;
- border: 1px solid rgb(102, 102, 153);
- background-color: rgb(255, 255, 255);
- overflow: hidden;
- header{
- position: absolute;
- width: 100%;
- text-align: left;
- height: 25px;
- padding: 3px 3px 3px 10px;
- margin: 0px;
- color: rgb(255, 255, 255);
- border: 1px solid rgb(102, 102, 153);
- cursor: move;
- background-color: rgb(102, 102, 153);
- .close_btn{
- color: #fff;
- font-size: 15px;
- cursor: pointer;
- float: right;
- margin-right: 23px;
- }
- }
- main{
- width: 100%;
- height: 100%;
- iframe{
- width: 100%;
- height: 100%;
- }
- }
- }
- </style>
|