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>