Browse Source

style: modify button type

richard1015 4 years ago
parent
commit
c6c19b9e04
1 changed files with 5 additions and 29 deletions
  1. 5 29
      src/packages/drag/demo.vue

+ 5 - 29
src/packages/drag/demo.vue

@@ -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>