| 1 |
- import{c as t,o as e,C as l}from"./vendor.0d0a34e4.js";const n={class:"markdown-body"},o=l('<h1>Drag 拖拽</h1><h3>介绍</h3><p>实现可拖拽的任意元素</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Drag } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Drag);\n</code></pre><h2>基本用法</h2><pre><code class="language-html"><nut-drag>\n <div class="touch-dom">可点击，可拖拽</div>\n</nut-drag>\n</code></pre><h2>限制拖拽方向</h2><pre><code class="language-html"><nut-drag direction="x">\n <div class="touch-dom">只能在X轴拖动</div>\n</nut-drag>\n</code></pre><h2>自动吸边</h2><pre><code class="language-html"><nut-drag direction="x" :attract="true">\n <div class="touch-dom">拖动我</div>\n</nut-drag>\n</code></pre><h2>限制拖拽边界</h2><pre><code class="language-html"><nut-drag\n :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"\n :attract="true"\n>\n <div class="touch-dom">拖动我</div>\n</nut-drag>\n<script>\n setup() {\n function right() {\n return document.documentElement.clientWidth - 300 - 9;\n }\n function bottom() {\n return document.documentElement.clientHeight - 559;\n }\n return {\n right,\n bottom\n };\n }\n</script>\n</code></pre><h2>Prop</h2><table><thead><tr><th style="text-align:left;">字段</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;">attract</td><td style="text-align:left;">是否开启自动吸边</td><td style="text-align:left;">Boolean</td><td style="text-align:left;">false</td></tr><tr><td style="text-align:left;">direction</td><td style="text-align:left;">拖拽元素的拖拽方向限制，<strong>x</strong>/<strong>y</strong>/<strong>all</strong>三选一</td><td style="text-align:left;">String</td><td style="text-align:left;">‘all’</td></tr><tr><td style="text-align:left;">boundary</td><td style="text-align:left;">拖拽元素的拖拽边界</td><td style="text-align:left;">Object</td><td style="text-align:left;">{top: 0,left: 0,right: 0,bottom: 0}</td></tr></tbody></table>',15),a={setup:l=>(l,a)=>(e(),t("div",n,[o]))};export default a;
|
