|
|
@@ -48,10 +48,22 @@ app.use(Icon);
|
|
|
<div class="text-data">test data22</div>
|
|
|
<div class="text-data">test data23</div>
|
|
|
<div class="text-data">test data24</div>
|
|
|
- <nut-backtop ></nut-backtop>
|
|
|
+ <nut-backtop @click="handleClick" ></nut-backtop>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ setup() {
|
|
|
+ const handleClick = () => {
|
|
|
+ console.log('backtop');
|
|
|
+ };
|
|
|
|
|
|
+ return {
|
|
|
+ handleClick
|
|
|
+ };
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.demo {
|
|
|
.text-data {
|
|
|
@@ -189,82 +201,9 @@ app.use(Icon);
|
|
|
</style>
|
|
|
```
|
|
|
:::
|
|
|
-
|
|
|
-### Click
|
|
|
-
|
|
|
-:::demo
|
|
|
-```html
|
|
|
-<template>
|
|
|
- <div class="demo" id="elId">
|
|
|
- <div class="text-data">test data1</div>
|
|
|
- <div class="text-data">test data2</div>
|
|
|
- <div class="text-data">test data3</div>
|
|
|
- <div class="text-data">test data4</div>
|
|
|
- <div class="text-data">test data5</div>
|
|
|
- <div class="text-data">test data6</div>
|
|
|
- <div class="text-data">test data7</div>
|
|
|
- <div class="text-data">test data8</div>
|
|
|
- <div class="text-data">test data9</div>
|
|
|
- <div class="text-data">test data10</div>
|
|
|
- <div class="text-data">test data11</div>
|
|
|
- <div class="text-data">test data12</div>
|
|
|
- <div class="text-data">test data13</div>
|
|
|
- <div class="text-data">test data14</div>
|
|
|
- <div class="text-data">test data15</div>
|
|
|
- <div class="text-data">test data16</div>
|
|
|
- <div class="text-data">test data17</div>
|
|
|
- <div class="text-data">test data18</div>
|
|
|
- <div class="text-data">test data19</div>
|
|
|
- <div class="text-data">test data20</div>
|
|
|
- <div class="text-data">test data21</div>
|
|
|
- <div class="text-data">test data22</div>
|
|
|
- <div class="text-data">test data23</div>
|
|
|
- <div class="text-data">test data24</div>
|
|
|
- <nut-backtop @click="handleClick" ></nut-backtop>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- setup() {
|
|
|
- const handleClick = () => {
|
|
|
- console.log('backtop');
|
|
|
- };
|
|
|
-
|
|
|
- return {
|
|
|
- handleClick
|
|
|
- };
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.demo {
|
|
|
- .text-data {
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding-left: 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 46px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 7px;
|
|
|
- box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
|
|
|
- line-height: 19px;
|
|
|
- font-size: 13px;
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-```
|
|
|
-:::
|
|
|
-
|
|
|
-
|
|
|
### API
|
|
|
|
|
|
-### Prop
|
|
|
+### Props
|
|
|
|
|
|
| Attribute | Description | Type | Default |
|
|
|
|-----------------|------------------------------------------|---------|---------|
|
|
|
@@ -276,7 +215,13 @@ app.use(Icon);
|
|
|
| is-animation | Whether there is animation, mutually exclusive with the duration parameter | Boolean | `true` |
|
|
|
| duration | Set animation duration | Number | `1000` |
|
|
|
|
|
|
-### Event
|
|
|
+### Events
|
|
|
| Event | Description | Arguments |
|
|
|
|-------|----------|-------------|
|
|
|
-| click | Emitted when component is clicked | event: MouseEvent |
|
|
|
+| click | Emitted when component is clicked | event: MouseEvent |
|
|
|
+
|
|
|
+### Slots
|
|
|
+
|
|
|
+| Name | Description |
|
|
|
+|---------|--------------|
|
|
|
+| default | The default slot is used to customize the content |
|