mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-07 13:48:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(message-provider): add placement prop (#851)

Browse Source 
* feat:n-input Support hidden password

* feat(form): support require-mark-placement(#171)

* Revert "feat(form): support require-mark-placement(#171)"

This reverts commit 0627777693.

* Revert "feat:n-input Support hidden password"

This reverts commit ea6491783d.

* feat(message provider): add placement prop(wip)

* feat(message provider): add placement prop

* feat: add demo

* feat: fix demo code

* feat: fix code

* feat: fix code

* Update CHANGELOG.en-US.md

* feat: fix style code
This commit is contained in:
doom-9 2021-08-16 01:15:06 +08:00 committed by GitHub
parent 95d0efa4d3
commit 3d7f96dd00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 316 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.en-US.md
View File

@ -9,7 +9,8 @@
### Feats
- `n-message-provider` add `container-style` prop
- `n-message-provider` add `container-style` prop.
- `n-message-provider` add `placement` prop.
### Fixes

1
CHANGELOG.zh-CN.md
View File

@ -9,6 +9,7 @@
### Feats
- `n-message-provider` 新增 `container-style` 属性
- `n-message-provider` 新增 `placement` 属性
### Fixes

2
src/message/demos/enUS/index.demo-entry.md
View File

@ -45,6 +45,7 @@ modify-content
manually-close
about-theme
multiple-line
placement
```
## API
@ -56,6 +57,7 @@ multiple-line
| closable | `boolean` | All messages whether to show close icon. |
| duration | `number` | `3000` | All messages's default duration. |
| max | `number` | `undefined` | Limit the number of message to display. |
| placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | All message's placement. |
| to | `string \| HTMLElement` | `'body'` | Container node of message container. |
### MessageProvider Injection API

119
src/message/demos/enUS/placement.demo.md Normal file
View File

@ -0,0 +1,119 @@
# Placement
```html
<n-message-provider :placement="placement">
<Buttons @changePlacement="changePlacement" />
</n-message-provider>
```
```js
import { useMessage, NButton } from 'naive-ui'
import { h, ref } from 'vue'
const Buttons = {
emits: ['changePlacement'],
setup() {
const message = useMessage()
return {
message
}
},
render() {
return [
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'top')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => 'Top' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'bottom')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => 'Bottom' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'top-left')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => 'TopLeft' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'top-right')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => 'TopRight' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'bottom-left')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => 'BottomLeft' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'bottom-right')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => 'BottomRight' }
)
]
}
}
export default {
components: {
Buttons
},
setup() {
const placement = ref('top')
return {
placement,
changePlacement: (val) => {
placement.value = val
}
}
}
}
```

2
src/message/demos/zhCN/index.demo-entry.md
View File

@ -45,6 +45,7 @@ modify-content
manually-close
about-theme
multiple-line
placement
```
## API
@ -56,6 +57,7 @@ multiple-line
| closable | `boolean` | 所有 Message 是否显示 close 图标 |
| duration | `number` | `3000` | 所有 Message 默认的持续时长 |
| max | `number` | `undefined` | 限制提示信息显示的个数 |
| placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | 所有 Message 显示的位置 |
| to | `string \| HTMLElement` | `'body'` | Message 容器节点的位置 |
### MessageProvider Injection API

119
src/message/demos/zhCN/placement.demo.md Normal file
View File

@ -0,0 +1,119 @@
# 位置
```html
<n-message-provider :placement="placement">
<Buttons @changePlacement="changePlacement" />
</n-message-provider>
```
```js
import { useMessage, NButton } from 'naive-ui'
import { h, ref } from 'vue'
const Buttons = {
emits: ['changePlacement'],
setup() {
const message = useMessage()
return {
message
}
},
render() {
return [
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'top')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => '顶部' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'bottom')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => '底部' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'top-left')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => '左上' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'top-right')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => '右上' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'bottom-left')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => '左下' }
),
h(
NButton,
{
onClick: () => {
this.$emit('changePlacement', 'bottom-right')
this.message.info('How many roads must a man walk down')
},
style: {
marginRight: '10px'
}
},
{ default: () => '右下' }
)
]
}
}
export default {
components: {
Buttons
},
setup() {
const placement = ref('top')
return {
placement,
changePlacement: (val) => {
placement.value = val
}
}
}
}
```

10
src/message/src/Message.tsx
View File

@ -106,7 +106,8 @@ export default defineComponent({
'--line-height': lineHeight,
'--border-radius': borderRadius
}
})
}),
placement: messageProviderProps.placement
}
},
render() {
@ -122,7 +123,12 @@ export default defineComponent({
return (
<div
class={`${mergedClsPrefix}-message-wrapper`}
style={cssVars as CSSProperties}
style={{
...(cssVars as CSSProperties),
alignItems: this.placement.startsWith('top')
? 'flex-start'
: 'flex-end'
}}
>
<div class={`${mergedClsPrefix}-message`}>
<div

16
src/message/src/MessageProvider.tsx
View File

@ -72,6 +72,17 @@ const messageProviderProps = {
default: 3000
},
max: Number,
placement: {
type: String as PropType<
| 'top'
| 'top-left'
| 'top-right'
| 'bottom'
| 'bottom-left'
| 'bottom-right'
>,
default: 'top'
},
closable: Boolean,
containerStyle: [String, Object] as PropType<string | CSSProperties>
}
@ -164,7 +175,10 @@ export default defineComponent({
{this.messageList.length ? (
<Teleport to={this.to ?? 'body'}>
<div
class={`${this.mergedClsPrefix}-message-container`}
class={[
`${this.mergedClsPrefix}-message-container`,
`${this.mergedClsPrefix}-message-container--${this.placement}`
]}
key="message-container"
style={this.containerStyle}
>

42
src/message/src/styles/index.cssr.ts
View File

@ -29,6 +29,7 @@ export default c([
margin: var(--margin);
z-index: 0;
transform-origin: top center;
display: flex;
`, [
fadeInHeightExpand({
overflow: 'visible',
@ -108,13 +109,48 @@ export default c([
cB('message-container', `
z-index: 6000;
position: fixed;
top: 12px;
left: 0;
right: 0;
height: 0;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
`, [
cM('top', `
top: 12px;
left: 0;
right: 0;
`),
cM('top-left', `
top: 12px;
left: 12px;
right: 0;
align-items: flex-start;
`),
cM('top-right', `
top: 12px;
left: 0;
right: 12px;
align-items: flex-end;
`),
cM('bottom', `
bottom: 4px;
left: 0;
right: 0;
justify-content: flex-end;
`),
cM('bottom-left', `
bottom: 4px;
left: 12px;
right: 0;
justify-content: flex-end;
align-items: flex-start;
`),
cM('bottom-right', `
bottom: 4px;
left: 0;
right: 12px;
justify-content: flex-end;
align-items: flex-end;
`)
])
])