提交 76a47f01 编写于 作者: 1 18148764734

补充:

上级 d4849f33
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
`template` 中使用组件 `template` 中使用组件
```html ```html
<uni-tooltip :content="tooltip显示的内容"> <uni-tooltip :content="tooltip显示的内容" placement="left">
<button>被包裹的组件</button> <button>被包裹的组件</button>
</uni-tooltip> </uni-tooltip>
``` ```
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| :-------: | :----: | :----: | :---------------------------------: | | :-------: | :----: | :----: | :---------------------------------: |
| content | String | | 弹出层显示的内容 | | content | String | | 弹出层显示的内容 |
| placement | String | left | Tooltip 的出现位置, 目前只支持 left | | placement | String | left | Tooltip 的出现位置, 支持 left,right,top,bottom |
### Tooltip Slots ### Tooltip Slots
...@@ -62,11 +62,21 @@ ...@@ -62,11 +62,21 @@
<uni-section title="基础用法" type="line" padding> <uni-section title="基础用法" type="line" padding>
<uni-tooltip content="提示文字" /> <uni-tooltip content="提示文字" />
</uni-section> </uni-section>
<uni-section title="插槽用法" type="line" padding> <uni-section title="自定义弹出层方向" type="line" padding>
<uni-tooltip content="提示文字">一段文字</uni-tooltip> <view class="direction-container">
</uni-section> <uni-tooltip content="示例文字" placement="top">
<uni-section title="自定义弹层宽度" type="line" padding> <view class="item"></view>
<uni-tooltip content="提示文字">一段文字</uni-tooltip> </uni-tooltip>
<uni-tooltip class="item" content="示例文字" placement="bottom">
<view class="item"></view>
</uni-tooltip>
<uni-tooltip class="item" content="示例文字" placement="left">
<view class="item"></view>
</uni-tooltip>
<uni-tooltip class="item" content="示例文字" placement="right">
<view class="item"></view>
</uni-tooltip>
</view>
</uni-section> </uni-section>
</view> </view>
</template> </template>
...@@ -80,7 +90,25 @@ ...@@ -80,7 +90,25 @@
}; };
</script> </script>
<style lang="scss"></style> <style lang="scss">
.direction-container {
display: flex;
width: 100px;
margin: 0 auto;
flex-wrap: wrap;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #ebebeb;
border-radius: 10px;
margin: 5px;
}
</style>
``` ```
::: :::
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册