未验证 提交 a84791d6 编写于 作者: L lkjh3214 提交者: GitHub

fix(backtop,badge,button,popover,tag,watermark): 文档调整,demo修改 (#1624)

上级 508f84c8
......@@ -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 |
\ No newline at end of file
| click | Emitted when component is clicked | event: MouseEvent |
### Slots
| Name | Description |
|---------|--------------|
| default | The default slot is used to customize the content |
\ No newline at end of file
......@@ -48,10 +48,23 @@ app.use(Icon);
<div class="text-data">我是测试数据22</div>
<div class="text-data">我是测试数据23</div>
<div class="text-data">我是测试数据24</div>
<nut-backtop ></nut-backtop>
<nut-backtop @click="handleClick" ></nut-backtop>
</div>
</template>
<script>
export default {
setup() {
const handleClick = () => {
console.log('触发返回顶部');
};
return {
handleClick
};
}
};
</script>
<style lang="scss" scoped>
.demo {
.text-data {
......@@ -190,81 +203,11 @@ app.use(Icon);
```
:::
### click事件
:::demo
```html
<template>
<div class="demo" id="elId">
<div class="text-data">我是测试数据1</div>
<div class="text-data">我是测试数据2</div>
<div class="text-data">我是测试数据3</div>
<div class="text-data">我是测试数据4</div>
<div class="text-data">我是测试数据5</div>
<div class="text-data">我是测试数据6</div>
<div class="text-data">我是测试数据7</div>
<div class="text-data">我是测试数据8</div>
<div class="text-data">我是测试数据9</div>
<div class="text-data">我是测试数据10</div>
<div class="text-data">我是测试数据11</div>
<div class="text-data">我是测试数据12</div>
<div class="text-data">我是测试数据13</div>
<div class="text-data">我是测试数据14</div>
<div class="text-data">我是测试数据15</div>
<div class="text-data">我是测试数据16</div>
<div class="text-data">我是测试数据17</div>
<div class="text-data">我是测试数据18</div>
<div class="text-data">我是测试数据19</div>
<div class="text-data">我是测试数据20</div>
<div class="text-data">我是测试数据21</div>
<div class="text-data">我是测试数据22</div>
<div class="text-data">我是测试数据23</div>
<div class="text-data">我是测试数据24</div>
<nut-backtop @click="handleClick" ></nut-backtop>
</div>
</template>
<script>
export default {
setup() {
const handleClick = () => {
console.log('触发返回顶部');
};
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
| 字段 | 说明 | 类型 | 默认值 |
|-----------------|------------------------------------------|---------|---------|
......@@ -276,7 +219,13 @@ app.use(Icon);
| is-animation | 是否有动画,和duration参数互斥 | Boolean | `true` |
| duration | 设置动画持续时间 | Number | `1000` |
### Event
### Events
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| click | 按钮点击时触发事件 | event: MouseEvent |
\ No newline at end of file
| click | 按钮点击时触发事件 | event: MouseEvent |
### Slots
| 名称 | 说明 |
|---------|--------------|
| default | 默认slot,用以自定义内容 |
\ No newline at end of file
......@@ -197,7 +197,7 @@ export default {
### API
### Prop
### Props
| 字段 | 说明 | 类型 | 默认值 |
|-----------------|------------------------------------------|---------|---------|
......@@ -207,7 +207,14 @@ export default {
| distance | 页面垂直滚动多高后出现 | Number | `200` |
| z-index | 设置组件页面层级 | Number | `10` |
### Event
### Events
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| click | 按钮点击时触发事件 | event: MouseEvent |
\ No newline at end of file
| click | 按钮点击时触发事件 | event: MouseEvent |
### Slots
| 名称 | 说明 |
|---------|--------------|
| content | 滚动容器中包含的内容 |
| icon | 返回到顶部,按钮内容 |
\ No newline at end of file
......@@ -21,7 +21,7 @@ export default create({
default: 10
},
elId: {
type: [String, Element],
type: [String],
default: 'body'
},
......
......@@ -210,7 +210,7 @@ app.use(Badge);
:::
### Prop
### Props
| Attribute | Description | Type | Default |
|---------|--------------------------------------------|---------|-----------|
......
......@@ -211,7 +211,7 @@ app.use(Badge);
:::
### Prop
### Props
| 字段 | 说明 | 类型 | 默认值 |
|---------|--------------------------------------------|---------|-----------|
......
......@@ -189,7 +189,7 @@ The color of the button can be customized through the color property.
## API
### Prop
### Props
| Attribute | Description | Type | Default |
| -------- | ------------------------------------------------------------ | ------- | --------- |
......@@ -205,7 +205,7 @@ The color of the button can be customized through the color property.
| icon-class-prefix `v3.1.17` | Custom icon class name prefix for using custom icons | String | `nut-icon` |
| loading | Whether to show loading status | Boolean | `false` |
### Event
### Events
| Event | Description | Arguments |
| ------ | -------------- | ----------------- |
......
<template>
<div class="demo">
<h2>{{ translate('title1') }}</h2>
<h2>{{ translate('title') }}</h2>
<nut-row type="flex">
<nut-col :span="8">
......@@ -24,7 +24,7 @@
</nut-col>
</nut-row>
<h2>{{ translate('title2') }}</h2>
<h2>{{ translate('title1') }}</h2>
<nut-row type="flex">
<nut-col :span="8">
......@@ -43,7 +43,7 @@
</nut-col>
</nut-row>
<h2>{{ translate('title3') }}</h2>
<h2>{{ translate('title2') }}</h2>
<nut-popover v-model:visible="visible.Customized" location="bottom-start">
<template #reference>
<nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
......@@ -59,7 +59,7 @@
</template>
</nut-popover>
<h2>{{ translate('title4') }}</h2>
<h2>{{ translate('title3') }}</h2>
<nut-row type="flex" justify="center">
<nut-col :span="24" style="text-align: center">
......
......@@ -15,6 +15,8 @@ import { Popover, Popup } from '@nutui/nutui';
import { Popover, Popup } from '@nutui/nutui-taro';
const app = createApp();
app.use(Popup);
app.use(Popover);
```
......@@ -283,7 +285,7 @@ export default {
### Prop
### Props
| Attribute | Description | Type | Default |
|----------------|---------------------------------|---------|------------|
......
......@@ -15,6 +15,8 @@ import { Popover, Popup } from '@nutui/nutui';
import { Popover, Popup } from '@nutui/nutui-taro';
const app = createApp();
app.use(Popup);
app.use(Popover);
```
......@@ -283,7 +285,7 @@ export default {
### Prop
### Props
| 字段 | 说明 | 类型 | 默认值 |
|----------------|---------------------------------|---------|------------|
......
......@@ -134,7 +134,7 @@ export default {
### Prop
### Props
| Attribute | Description | Type | Default |
|------------|--------------------------------------------------|---------|-----------|
......@@ -153,7 +153,7 @@ export default {
|---------|--------------|
| default | Label display content |
### Event
### Events
| Event | Description | Arguments |
|----------|----------|----------|
......
......@@ -136,7 +136,7 @@ export default {
### Prop
### Props
| 字段 | 说明 | 类型 | 默认值 |
|------------|--------------------------------------------------|---------|-----------|
......@@ -155,7 +155,7 @@ export default {
|---------|--------------|
| default | 标签显示内容 |
### Event
### Events
| 事件名称 | 说明 | 回调参数 |
|----------|----------|----------|
......
......@@ -113,13 +113,13 @@ app.use(Watermark);
| height | Height of watermark | `number` | `64` |
| rotate | Rotation angle when drawing watermark | `number` | `-22` |
| image | Image source, it is recommended to export 2x or 3x images, and the image rendering watermark is preferred | `string` | - |
| imageWidth | Width of image | `number` | `120` |
| imageHeight | Height of image | `number` | `64` |
| zIndex | Z-index of the appended watermark element | `number` | `2000` |
| image-width | Width of image | `number` | `120` |
| image-height | Height of image | `number` | `64` |
| z-index | Z-index of the appended watermark element | `number` | `2000` |
| content | Watermark text content | `string` | - |
| fontColor | Watermark text color | `string` | `rgba(0, 0, 0, .15)` |
| fontSize | Watermark text font size | `string \| number` | `16` |
| gapX | Horizontal spacing between watermarks | `number` | `24` |
| gapY | Vertical spacing between watermarks | `number` | `48` |
| fullPage | Overwrite entire page | `boolean` | `true` |
| fontFamily | Watermark text font family | `boolean` | `true` |
| font-color | Watermark text color | `string` | `rgba(0, 0, 0, .15)` |
| font-size | Watermark text font size | `string \| number` | `16` |
| gap-x | Horizontal spacing between watermarks | `number` | `24` |
| gap-y | Vertical spacing between watermarks | `number` | `48` |
| full-page | Overwrite entire page | `boolean` | `true` |
| font-family | Watermark text font family | `boolean` | `true` |
......@@ -118,15 +118,15 @@ app.use(Watermark);
| height | 水印的高度 | `number` | `64` |
| rotate | 水印绘制时,旋转的角度 | `number` | `-22` |
| image | 图片源,建议导出 2 倍或 3 倍图,优先使用图片渲染水印 | `string` | - |
| imageWidth | 图片宽度 | `number` | `120` |
| imageHeight | 图片高度 | `number` | `64` |
| zIndex | 追加的水印元素的 z-index | `number` | `2000` |
| image-width | 图片宽度 | `number` | `120` |
| image-height | 图片高度 | `number` | `64` |
| z-index | 追加的水印元素的 z-index | `number` | `2000` |
| content | 水印文字内容 | `string` | - |
| fontColor | 水印文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| fontSize | 文字大小 | `string \| number` | `16` |
| gapX | 水印之间的水平间距 | `number` | `24` |
| gapY | 水印之间的垂直间距 | `number` | `48` |
| fullPage | 是否覆盖整个页面 | `boolean` | `true` |
| fontFamily | 水印文字字体 | `boolean` | `true` |
| font-color | 水印文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| font-size | 文字大小 | `string \| number` | `16` |
| gap-x | 水印之间的水平间距 | `number` | `24` |
| gap-y | 水印之间的垂直间距 | `number` | `48` |
| full-page | 是否覆盖整个页面 | `boolean` | `true` |
| font-family | 水印文字字体 | `boolean` | `true` |
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册