账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    有没有大佬帮我改一下js转ts格式,有偿
    74
    0
    有偿一瓶快乐水,大瓶的!就改两个方法的格式就好。谢谢大佬!1.自定义指令,2.缩放1.自定义指令拖拽(总是显示el未定义)directives: {drag (el) { let oDiv = el let self = this document.onselectstart = function () { return false } oDiv.onmousedown = function (e) { // 鼠标按下,计算当前元素距离可视区的距离 let disX = e.clientX - oDiv.offsetLeft let disY = e.clientY - oDiv.offsetTop document.onmousemove = function (e) { // 通过事件委托,计算移动的距离 let l = e.clientX - disX let t = e.clientY - disY // 不超出可视范围 if (l <= 0) { l = 5 // 设置成5,离边缘不要太近 } else if (l > document.documentElement.clientWidth - el.clientWidth) { // document.documentElement.clientWidth屏幕可视区宽度 l = document.documentElement.clientWidth - el.clientWidth - 5 } if (t <= 0) { t = 5 } else if (t > document.documentElement.clientHeight - el.clientHeight) { t = document.documentElement.clientHeight - el.clientHeight - 5 } // 移动当前元素 oDiv.style.left = l + 'px' oDiv.style.top = t + 'px' } document.onmouseup = function (e) { document.onmousemove = null document.onmouseup = null } // return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效 return false }},/* 阻止拖拽 */stopdrag: { inserted: function (el, binding, vnode) { let oDiv = el oDiv.onmousedown = function (e) { e.stopPropagation() } }}2.鼠标点击缩放 dragEagle: function (e) { var targetDiv = document.getElementById('eagleMapContainer') // e.target.parentNode.parentNode;.children[0] // 得到点击时该地图容器的宽高: var targetDivWidth = targetDiv.offsetWidth var targetDivHeight = targetDiv.offsetHeight var startX = e.clientX var startY = e.clientY // var _this = this document.onmousemove = function (e) { console.log('move') e.preventDefault() // 得到鼠标拖动的宽高距离:取绝对值 var distX = Math.abs(e.clientX - startX) var distY = Math.abs(e.clientY - startY) // 往右上方拖动: if (e.clientX > startX && e.clientY < startY) { targetDiv.style.width = targetDivWidth + distX + 'px' targetDiv.style.height = targetDivHeight + distY + 'px' } // 往左下方拖动: if (e.clientX < startX && e.clientY > startY) { targetDiv.style.width = (targetDivWidth - distX) + 'px' targetDiv.style.height = (targetDivHeight - distY) + 'px' }// 往右下方拖动: if (e.clientX > startX && e.clientY > startY) { targetDiv.style.width = (targetDivWidth + distX) + 'px' targetDiv.style.height = (targetDivHeight + distY) + 'px' } // 往左上方拖动: if (e.clientX < startX && e.clientY < startY) { targetDiv.style.width = (targetDivWidth - distX) + 'px' targetDiv.style.height = (targetDivHeight - distY) + 'px' } } document.onmouseup = function () { document.onmousemove = null }}mounted: function () { },刚开始实习就让我写项目,我真的不会,这个月都是边写边百度的。大佬们有vue+ts的学习视频推荐吗?谢谢大佬们
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 擱湹牟蕼 普通会员 1楼

      在JavaScript转为TypeScript的过程中,我们需要使用TypeScript的解析器来识别JavaScript中的变量、函数、对象等类型。以下是一个简单的示例,展示了如何使用JavaScript和TypeScript的解析器将JavaScript代码转换为TypeScript代码:

      ```typescript // JavaScript code let a = 10; let b = 20;

      function addNumbers(a, b) { return a + b; }

      let result = addNumbers(a, b); console.log(result); // 输出:30 ```

      在这个例子中,我们首先定义了两个变量ab,并定义了一个函数addNumbers,它接受两个参数ab,并返回它们的和。然后,我们调用addNumbers函数并将结果赋值给变量result

      接下来,我们使用TypeScript的解析器将JavaScript代码转换为TypeScript代码:

      ```typescript // TypeScript code let a = 10; let b = 20;

      interface AddNumbers { (a: number, b: number): number; }

      let result = AddNumbers.of(a, b); console.log(result); // 输出:30 ```

      在这个例子中,我们首先导入了AddNumbers接口,这是一个类型定义。然后,我们定义了一个名为AddNumbers的接口,它包含一个函数of,它接受两个参数ab,并返回一个新的AddNumbers实例,该实例包含ab的值。在转换后的代码中,我们使用AddNumbers.of函数将JavaScript中的addNumbers函数转换为一个名为AddNumbers的类型定义,然后将ab的值作为参数传递给of函数,生成一个新的AddNumbers实例,并将其赋值给变量result

      注意,TypeScript的解析器会自动识别变量的类型,包括数组、函数、对象等,并将它们转换为对应的TypeScript类型。此外,TypeScript还支持将函数的参数和返回值类型转换为any类型,这样可以允许函数在接收未知类型的参数时,直接返回一个any值。例如:

      ```typescript function addNumbers(a: number, b: number): number { return a + b; }

      let result = addNumbers(a: 10, b: 20); console.log(result); // 输出:30 ```

      在这个例子中,我们首先定义了一个函数addNumbers,它接受两个参数ab,并返回它们的和。然后,我们调用addNumbers函数并将结果赋值给变量result

      接下来,我们使用TypeScript的解析器将JavaScript代码转换为TypeScript代码,并将ab的值作为参数传递给addNumbers函数,生成一个新的AddNumbers实例,并将其赋值给变量result,并将其类型设置为any类型,这样addNumbers函数就可以接受未知类型的参数,并返回一个any值。

    • 点寂寞、抽孤单 普通会员 2楼

      在JavaScript转为TypeScript的过程中,我们需要使用TypeScript的解析器来识别JavaScript中的变量、函数、对象等类型。以下是一个简单的示例,展示了如何使用JavaScript和TypeScript的解析器将JavaScript代码转换为TypeScript代码:

      ```typescript // JavaScript code let a = 10; let b = 20;

      function addNumbers(a, b) { return a + b; }

      let result = addNumbers(a, b); console.log(result); // 输出:30 ```

      在这个例子中,我们首先定义了两个变量ab,并定义了一个函数addNumbers,它接受两个参数ab,并返回它们的和。然后,我们调用addNumbers函数并将结果赋值给变量result

      接下来,我们使用TypeScript的解析器将JavaScript代码转换为TypeScript代码:

      ```typescript // TypeScript code let a = 10; let b = 20;

      interface AddNumbers { (a: number, b: number): number; }

      let result = AddNumbers.of(a, b); console.log(result); // 输出:30 ```

      在这个例子中,我们首先导入了AddNumbers接口,这是一个类型定义。然后,我们定义了一个名为AddNumbers的接口,它包含一个函数of,它接受两个参数ab,并返回一个新的AddNumbers实例,该实例包含ab的值。在转换后的代码中,我们使用AddNumbers.of函数将JavaScript中的addNumbers函数转换为一个名为AddNumbers的类型定义,然后将ab的值作为参数传递给of函数,生成一个新的AddNumbers实例,并将其赋值给变量result

      注意,TypeScript的解析器会自动识别变量的类型,包括数组、函数、对象等,并将它们转换为对应的TypeScript类型。此外,TypeScript还支持将函数的参数和返回值类型转换为any类型,这样可以允许函数在接收未知类型的参数时,直接返回一个any值。例如:

      ```typescript function addNumbers(a: number, b: number): number { return a + b; }

      let result = addNumbers(a: 10, b: 20); console.log(result); // 输出:30 ```

      在这个例子中,我们首先定义了一个函数addNumbers,它接受两个参数ab,并返回它们的和。然后,我们调用addNumbers函数并将结果赋值给变量result

      接下来,我们使用TypeScript的解析器将JavaScript代码转换为TypeScript代码,并将ab的值作为参数传递给addNumbers函数,生成一个新的AddNumbers实例,并将其赋值给变量result,并将其类型设置为any类型,这样addNumbers函数就可以接受未知类型的参数,并返回一个any值。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部