EleimagesArticle 组件使用
友情提示
一般用在根目录
index.md文件中使用sidebar设置为false
md
---
title: EleimagesArticle
editLink: true
lastUpdated: false
sidebar: true
docFooter: false
tags:
- EleimagesArticle
author:
name: supbose
link: https://github.com/supbose
---
<EleimagesArticle :list="listImagesArticle"></EleimagesArticle>
<script>
const listImagesArticle = [
{
img: 'http://www.masonjs.cn/columns/Html.png',
text: 'H5',
url: '/pages/index'
},
{
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
text: '易软',
url: '/pages/index'
}
,
{
// img: '/images/logo.png',
text: '易软',
url: '/pages/index'
}
,
{
img: 'https://img.anfensi.com/upload/2021-11/20211151554522506.png',
text: '易软',
url: '/pages/index'
}
,
{
img: '/images/logo.png',
text: '易软',
url: '/pages/index'
}
]
</script>基本使用
多个使用
多个使用
多个使用
<template>
<div>
<imagesArticle :list="list"></imagesArticle>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
const list = reactive([
{
img: 'http://www.masonjs.cn/columns/Html.png',
text: '易软',
url: '/pages/index'
},
{
// img: '/images/logo.png',
text: '易软',
url: '/pages/index'
}
,
{
img: '/images/logo.png',
text: '易软',
url: '/pages/index'
}
,
{
img: '/images/logo.png',
text: '易软',
url: '/pages/index'
}
,
{
img: '/images/logo.png',
text: '易软',
url: '/pages/index'
}
]
)
</script>