|
|
@@ -2,14 +2,14 @@
|
|
|
<div class="demo full">
|
|
|
<h2>基础用法</h2>
|
|
|
<nut-drag :style="{ top: '100px', left: '8px' }">
|
|
|
- <div class="drag-demo">触摸移动</div>
|
|
|
+ <nut-button type="primary">触摸移动</nut-button>
|
|
|
</nut-drag>
|
|
|
<h2 style="top:30px;position:relative">限制拖拽方向</h2>
|
|
|
<nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
|
|
|
- <div class="drag-demo">只能X轴拖拽</div>
|
|
|
+ <nut-button type="primary">只能X轴拖拽</nut-button>
|
|
|
</nut-drag>
|
|
|
<nut-drag direction="y" :style="{ top: '200px', right: '50px' }">
|
|
|
- <div class="drag-demo">只能Y轴拖拽</div>
|
|
|
+ <nut-button type="primary">只能Y轴拖拽</nut-button>
|
|
|
</nut-drag>
|
|
|
<h2 style="top:70px;position:relative">自动吸边</h2>
|
|
|
<nut-drag
|
|
|
@@ -17,7 +17,7 @@
|
|
|
:attract="true"
|
|
|
:style="{ top: '300px', left: '8px' }"
|
|
|
>
|
|
|
- <div class="drag-demo">拖动我</div>
|
|
|
+ <nut-button type="primary">拖动我</nut-button>
|
|
|
</nut-drag>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -31,28 +31,4 @@ export default createDemo({
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.drag-demo {
|
|
|
- width: 148px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background: linear-gradient(
|
|
|
- 135deg,
|
|
|
- rgba(250, 44, 25, 1) 0%,
|
|
|
- rgba(250, 63, 25, 1) 45%,
|
|
|
- rgba(250, 89, 25, 1) 83%,
|
|
|
- rgba(250, 100, 25, 1) 100%
|
|
|
- );
|
|
|
- border-radius: 24px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.drag {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- display: inline-block;
|
|
|
- background: red;
|
|
|
- transform: translate3d(0, 0, 1px);
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style lang="scss" scoped></style>
|