El-Plus-Crud

Appearance

ElPlusFormImage 图片 ​

名称 ​

组件名称：ElPlusFormImage

被引用类型: image

TIP

被引用类型是指：当该组件作为子组件被 form 或者 table 组件引用时， formDesc 中对应的 type 类型。

基础用法 ​

先看效果

代码
html
 <div class="demo">
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100' }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'large' }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'default' }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'small' }" />
  </div>
<div class="demo">
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'fill' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'contain' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'cover' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'none' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'scale-down' } }" />
</div>

<script lang="ts" setup>
  const testImageList = [
    {  furl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',previewUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  ]
</script>
 <div class="demo">
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100' }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'large' }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'default' }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'small' }" />
  </div>
<div class="demo">
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'fill' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'contain' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'cover' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'none' } }" />
    <ElPlusFormImage class="item" :modelValue="testImageList" :desc="{ size:'100', attrs:{ fit:'scale-down' } }" />
</div>

<script lang="ts" setup>
  const testImageList = [
    {  furl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',previewUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  ]
</script>

API 属性 ​

这里只列举除官方组件以外的属性，官网属性参考 官网 Image API

desc 属性说明 ​