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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue +typescript (用的 vue-class-component)写自定义指令drag
    49
    0
    在export default中是可以运行的自定义指令directives代码,但是写到export default class Draw extends Vue{}里却报错,显示el未定义。难道是因为是vue+ts,所以写的格式不对?不明白为什么,求救。export default {methods: {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 (el, binding, vnode) { let oDiv = el oDiv.onmousedown = function (e) { e.stopPropagation() }}}/ end of export /}}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 笑的歇斯里底ヘ 普通会员 1楼

      在Vue中,你可以使用typescript编写自定义指令drag。以下是一个简单的示例:

      首先,你需要安装typescript和vue-class-component:

      bash npm install typescript vue-class-component

      然后,你可以创建一个新的组件,如dragItem.js:

      ```typescript import { Component, Prop } from 'vue';

      @Component({ props: ['item'], }) export default class DragItem extends Component { @Prop() item: any;

      drag() { // 在这里,你可以执行拖动操作 console.log(this.item); } } ```

      接下来,你可以创建一个拖拽事件处理器,如dragHandler.ts:

      ```typescript import { Component, Prop } from 'vue';

      @Component({ props: ['dragItem'], }) export default class DragItem extends Component { @Prop() dragItem: any;

      dragHandler() { // 在这里,你可以执行拖动操作 console.log(this.dragItem); } } ```

      最后,你可以将DragItem组件添加到你的Vue应用中:

      ```typescript import DragItem from './dragItem.vue';

      export default { components: { DragItem, }, }; ```

      现在,你可以使用dragItem的drag方法来实现拖动操作。例如,你可以在模板中使用dragItem的drag方法来模拟拖动:

      ```html

      ```

      这只是一个基本的示例,你可以根据你的需求来扩展和定制dragItem。例如,你可以在dragItem的drag方法中添加更多的逻辑,或者添加一个拖动进度条。

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