0.1.6 • Published 3 months ago
aism-ui v0.1.6
Project Coding
aims ui 组件
样式
UI 框架(https://www.antdv.com/components/overview)
Project setup
npm install引入
import aismUi from 'aism-ui'
import 'aism-ui/lib/aism-ui.css'
createApp(App).use(aismUi)aismPreView 图片预览组件
样式
入参
| 字段 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| visible | Boolean | false | 控制是否显示图片预览模态框 |
| img-data | Array or String | {src:'url地址',key1:value1,key2:value2} or string | 需要展示的图片列表 |
| defIndex | Number | 0 | 当预览图片为列表时默认选中的索引 |
Events
| 事件名称 | 说明 |
|---|---|
| handleCloseImgPreView | 关闭图片预览的回调方法 |
| selectChange | 当预览图片为列表时选中索引改变时的回调 |
默认插槽
右侧自定义描述具名插槽 #operation
<template #operation>
操作 -- 增删改查
</template> 示例
<aismPreView :visible="imgData?.visible" :img-data="arr" @handleCloseImgPreView="handleCloseImgPreView">
<div class="right_describe">
<div class="right_describe_top">
<div>
<p>创作时间</p>
<p v-if="imgData?.createDate">{{ imgData?.createDate }}</p>
<p class="noData" v-else>暂无</p>
</div>
<div>
<p>图片比例</p>
<p v-if="imgData?.proportion">{{ data?.proportion }}</p>
<p class="noData" v-else>暂无</p>
</div>
<div>
<p>风格</p>
<p v-if="imgData?.styleLibraryImg" class="style"><img :src="imgData?.styleLibraryImg" alt=""> <span>{{
imgData?.styleLibraryName }}</span> </p>
<p class="noData" v-else>暂无</p>
</div>
</div>
<div class="right_describe_btm">
<div class="copybtn">
<div>prompt:</div>
<div v-if="imgData?.forwardPrompt" @click="copy(imgData?.forwardPrompt)" class="copy">
<CopyOutlined /> 复制
</div>
<div v-else class="NoCopy">
<CopyOutlined /> 复制
</div>
</div>
<div class="prompt">
{{ imgData?.forwardPrompt }}
</div>
</div>
</div>
<template #operation>
<div style="height: 40px;width: 100%;text-align: end;">
增删改查
</div>
</template>
</aismPreView>