Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/markdown/en/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,6 @@ new Vue({ i18n }).$mount('#app')
| Korean (South Korea) | ko-KR |
| Portuguese (Brazil) | pt-BR |
| Persian (Iran) | fa-IR |
| Hungarian | hu |

If your target language is not included, you are more than welcome to contribute: just add another language config to [here](https://github.com/AT-UI/at-ui/blob/master/src/locale/lang/) and create a pull request.
1 change: 1 addition & 0 deletions docs/markdown/zh/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,6 @@ new Vue({ i18n }).$mount('#app')
| 韩语(韩国) | ko-KR |
| 葡萄牙语(巴西) | pt-BR |
| 波斯语(伊朗) | fa-IR |
| 匈牙利 | hu |

如果您需要使用其他的语言,欢迎贡献 PR:只需要在 [这里](https://github.com/AT-UI/at-ui/blob/master/src/locale/lang/) 添加一个语言配置文件即可
27 changes: 26 additions & 1 deletion docs/markdown/zh/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,19 @@
```
:::

## 关闭前

- 通过属性 `before-close` 监听 `Modal` 关闭前的事件,会暂停 `Modal` 的关闭
- 参数为event事件和回调函数,调用函数将关闭 `Modal` ,传递 `false` 参数可以阻止 `Modal`的关闭
- 点击按钮、icon、遮罩、esc均会触发该钩子,手动修改value的值不触发

:::demo
```html
<at-button @click="modal7=true">打开modal</at-button>
<at-modal v-model="modal7" title="标题" :before-close="handleBeforeClose">这里是文本</at-modal>
```
:::

## Modal 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
Expand All @@ -247,6 +260,7 @@
| width | 模态框的宽度 | Number / String | - | `520` |
| closeOnPressEsc | 点击 `ESC` 是否可以关闭模态框 | Boolean | - | true |
| styles | 模态框的自定义样式 | Object | - | - |
| before-close | 关闭前的回调,会暂停 `Modal` 的关闭,手动修改 `value` 的值不会触发 | Function(event, done),`done` 用于关闭 `Modal`,传递 `false` 参数可以阻止 `Modal` 关闭 | - | - |

## Modal 事件

Expand All @@ -272,7 +286,8 @@
modal3: false,
modal4: false,
modal5: false,
modal6: false
modal6: false,
modal7: false
}
},
methods: {
Expand Down Expand Up @@ -332,6 +347,16 @@
},
closeModal2 () {
this.modal2 = false
},
handleBeforeClose (evt, done) {
this.$Modal.confirm({
content: '确定关闭吗?',
styles: {
top: '300px'
}
}).then(done).catch(() => {
done(false)
})
}
}
}
Expand Down
31 changes: 18 additions & 13 deletions src/components/modal/src/modal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@
<slot>
<p>{{ content }}</p>
<div class="at-modal__input" v-if="showInput">
<at-input v-model="inputValue" :placeholder="inputPlaceholder" @keyup.enter.native="handleAction('confirm')" ref="input"></at-input>
<at-input v-model="inputValue" :placeholder="inputPlaceholder" @keyup.enter.native="handleAction('confirm', $event)" ref="input"></at-input>
</div>
</slot>
</div>
<div class="at-modal__footer" v-if="showFooter">
<slot name="footer">
<at-button v-show="showCancelButton" @click.native="handleAction('cancel')">{{ localeCancelText }}</at-button>
<at-button type="primary" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ localeOKText }}</at-button>
<at-button v-show="showCancelButton" @click.native="handleAction('cancel', $event)">{{ localeCancelText }}</at-button>
<at-button type="primary" v-show="showConfirmButton" @click.native="handleAction('confirm', $event)">{{ localeOKText }}</at-button>
</slot>
</div>
<i v-if="isIconType" class="icon at-modal__icon" :class="iconClass"></i>
<span v-if="showClose" class="at-modal__close" @click="handleAction('cancel')"><i class="icon icon-x"></i></span>
<span v-if="showClose" class="at-modal__close" @click="handleAction('cancel', $event)"><i class="icon icon-x"></i></span>
</div>
</transition>
</div>
Expand Down Expand Up @@ -96,7 +96,8 @@
return {}
}
},
type: String
type: String,
beforeClose: Function
},
data () {
return {
Expand Down Expand Up @@ -159,7 +160,13 @@
}
},
methods: {
doClose () {
doBeforeClose (evt) {
this.beforeClose ? this.beforeClose(evt, this.doClose) : this.doClose()
},
doClose (result) {
if (result === false) {
return
}
this.visible = false
this.$emit('input', false)
this.$emit('on-cancel')
Expand All @@ -170,28 +177,26 @@
},
handleMaskClick (evt) {
if (this.maskClosable) {
this.doClose()
this.doBeforeClose(evt)
}
},
handleWrapperClick (evt) {
if (this.maskClosable) {
this.doClose()
this.doBeforeClose(evt)
}
},
handleAction (action) {
handleAction (action, evt) {
this.action = action
this.doBeforeClose(evt)

if (action === 'confirm') {
this.$emit('input', false)
this.$emit('on-confirm')
}

this.doClose()
},
handleKeyCode (evt) {
if (this.visible && this.showClose) {
if (evt.keyCode === 27) { // Escape
this.doClose()
this.doBeforeClose()
}
}
}
Expand Down
28 changes: 28 additions & 0 deletions src/locale/lang/hu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export default {
at: {
select: {
placeholder: 'Kiválasztás',
notFoundText: 'Nincs ilyen adat'
},
modal: {
okText: 'OK',
cancelText: 'Mégsem'
},
pagination: {
prevText: 'Előző oldal',
nextText: 'Következő oldal',
total: 'Összesen',
item: 'tétel',
items: 'tétel',
pageSize: '/ oldal',
goto: 'Ugrás',
pageText: '',
prev5Text: 'Előző 5 oldal',
next5Text: 'Következő 5 oldal'
},
table: {
emptyText: 'Nincs adat'
}
}
}