mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-21 13:59:15 +08:00
feat(Notify): support component call (#6453)
This commit is contained in:
neverland
GitHub
parent
61919d0bec
commit
97541eedfa
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
图片放大预览，支持函数调用和组件调用两种方式
|
||||
图片放大预览，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
ImagePreview 是一个函数，调用函数后展示图片预览
|
||||
ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
@ -16,7 +16,7 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 ImagePreview 时，可以通过下面的方式进行注册
|
||||
通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
直接传入图片数组，即可展示图片预览
|
||||
直接传入图片数组，即可展示图片预览。
|
||||
|
||||
```js
|
||||
ImagePreview([
|
||||
@ -48,7 +48,7 @@ ImagePreview([
|
||||
|
||||
### 传入配置项
|
||||
|
||||
通过传入配置对象，可以指定初始图片的位置、监听关闭事件
|
||||
通过传入配置对象，可以指定初始图片的位置、监听关闭事件。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
@ -65,7 +65,7 @@ ImagePreview({
|
||||
|
||||
### 展示关闭按钮
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
@ -79,7 +79,7 @@ ImagePreview({
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览
|
||||
通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。
|
||||
|
||||
```js
|
||||
const instance = ImagePreview({
|
||||
@ -97,7 +97,7 @@ setTimeout(() => {
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件。
|
||||
|
||||
```html
|
||||
<van-image-preview v-model="show" :images="images" @change="onChange">
|
||||
|
||||
@ -46,7 +46,7 @@ function Notify(
|
||||
class={[bem([props.type]), props.className]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{props.message}
|
||||
{slots.default?.() || props.message}
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
@ -41,9 +41,9 @@ Notify({
|
||||
});
|
||||
```
|
||||
|
||||
### \$notify Method
|
||||
### Global Method
|
||||
|
||||
After import the Notify component, the \$notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
After import the Notify component, the `$notify` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -53,6 +53,34 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Component Call
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="Component Call" @click="showNotify" />
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>Content</span>
|
||||
</van-notify>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Methods
|
||||
|
||||
@ -1,12 +1,36 @@
|
||||
# Notify 消息提示
|
||||
|
||||
### 引入
|
||||
### 介绍
|
||||
|
||||
在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
|
||||
Notify('通知内容');
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Notify } from 'vant';
|
||||
|
||||
// 全局注册
|
||||
Vue.use(Notify);
|
||||
|
||||
// 局部注册
|
||||
export default {
|
||||
components: {
|
||||
[Notify.Component.name]: Notify.Component,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
@ -19,7 +43,7 @@ Notify('通知内容');
|
||||
|
||||
### 通知类型
|
||||
|
||||
支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
|
||||
支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。
|
||||
|
||||
```js
|
||||
// 主要通知
|
||||
@ -37,7 +61,7 @@ Notify({ type: 'warning', message: '通知内容' });
|
||||
|
||||
### 自定义通知
|
||||
|
||||
自定义消息通知的颜色和展示时长
|
||||
自定义消息通知的颜色和展示时长。
|
||||
|
||||
```js
|
||||
Notify({
|
||||
@ -52,9 +76,9 @@ Notify({
|
||||
});
|
||||
```
|
||||
|
||||
### 组件内调用
|
||||
### 全局方法
|
||||
|
||||
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 \$notify 方法，便于在组件内调用。
|
||||
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 `$notify` 方法，便于在组件内调用。
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -64,6 +88,36 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="组件调用" @click="showNotify" />
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>通知内容</span>
|
||||
</van-notify>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 方法
|
||||
|
||||
@ -42,6 +42,19 @@
|
||||
@click="showCustomDuration"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('componentCall')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('componentCall')"
|
||||
@click="showComponentCall"
|
||||
/>
|
||||
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>{{ t('content') }}</span>
|
||||
</van-notify>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -57,6 +70,7 @@ export default {
|
||||
notifyType: '通知类型',
|
||||
customColor: '自定义颜色',
|
||||
customNotify: '自定义配置',
|
||||
componentCall: '组件调用',
|
||||
customDuration: '自定义时长',
|
||||
},
|
||||
'en-US': {
|
||||
@ -68,10 +82,17 @@ export default {
|
||||
notifyType: 'Notify Type',
|
||||
customColor: 'Custom Color',
|
||||
customNotify: 'Custom Notify',
|
||||
componentCall: 'Component Call',
|
||||
customDuration: 'Custom Duration',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.$notify(this.t('content'));
|
||||
@ -98,6 +119,13 @@ export default {
|
||||
type,
|
||||
});
|
||||
},
|
||||
|
||||
showComponentCall() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-notify {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: @notify-padding;
|
||||
color: @notify-text-color;
|
||||
|
||||
@ -89,6 +89,8 @@ Notify.install = () => {
|
||||
Vue.use(VanNotify as any);
|
||||
};
|
||||
|
||||
Notify.Component = VanNotify;
|
||||
|
||||
Vue.prototype.$notify = Notify;
|
||||
|
||||
export default Notify;
|
||||
|
||||
@ -21,5 +21,10 @@ exports[`renders demo correctly 1`] = `
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">自定义时长</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">组件调用</span></div>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
2
types/notify.d.ts
vendored
2
types/notify.d.ts
vendored
@ -1,4 +1,5 @@
|
||||
import Vue from 'vue';
|
||||
import { VanComponent } from './component';
|
||||
|
||||
export type NotifyMessage = string | number;
|
||||
|
||||
@ -30,6 +31,7 @@ export interface Notify {
|
||||
defaultOptions: NotifyOptions;
|
||||
setDefaultOptions(options: NotifyOptions): void;
|
||||
resetDefaultOptions(): void;
|
||||
Component: typeof VanComponent;
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user