Modal 模态框，在浮层中显示，引导用户进行相关操作。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 urls 属性设置图片数据，show 属性控制显示隐藏，@hide 为点击时触发，控制 show 进行隐藏。

<!--按钮用于触发显示预览-->
<wui-button type="gray" width="400rpx" height="84rpx" text="自定义Gallery" bold :margin="['24rpx']" @click="showGallery"></wui-button>

<wui-gallery :urls="urls" :show="show" @hide="hideGallery"></wui-gallery>

 const urls = ref<any>([
    {
      src: 'https://specialdisease-oss.gjwlyy.com/prileImg/1654065014280_.jpg',
      descr:
        'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
    },
    {
      src: 'https://specialdisease-oss.gjwlyy.com/prileImg/1658906684053_.jpg',
    },
    {
      src: 'https://specialdisease-oss.gjwlyy.com/prileImg/1655876485413_.jpg',
    },
  ]);
  const show = ref<any>(false);
  const showGallery = () => {
    show.value = true;
  };
  const hideGallery = () => {
    show.value = false;
  };

// urls 数据格式说明

//第一种格式，字符串数组
urls:['https://specialdisease-oss.gjwlyy.com/prileImg/1654065014280_.jpg']

//第二种格式，以下为约定属性，其他属性值可自行扩展
urls:[{
	//图片链接地址
	src: 'https://specialdisease-oss.gjwlyy.com/prileImg/1654065014280_.jpg',
	//文字描述，可选
	descr: 'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
}]

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
urls	Array	图片数据，具体格式见下方说明	[ ]	-
show	Boolean	是否显示预览	false	-
current	Number, String	当前所在滑块的索引值	0	-
ellipsis	Boolean	文字描述超出一行是否隐藏省略	false	-
zIndex	Number, String	层级z-index值	1001	Nvue端不支持，默认越靠后的元素层级越高
safeArea	Boolean	是否适配底部安全区	true	-

Events

事件名	说明	回调参数
@change	图片左右切换时触发	{ index:当前滑块索引值 }
@hide	点击图片或滑块时触发，通过控制属性 show 关闭预览	-