QilinView组件

QilinView组件是一个展示型组件，主要用于展示详情页。

基本使用

<template>
    <QilinView v-model:viewConfig="viewConfig">
        <template v-slot:custom="slotData">
            <div style="display:inline;width:auto;">{{ slotData.data.data }}</div>
        </template>
    </QilinView>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const viewConfig=reactive({
    globalConfig:{
        isTable:true,
        // borderColor:"red",
        labelBackgroundColor:"#FAFAFA",
        labelColor:"rgba(0,0,0,0.85)",
        valueColor:"rgba(0,0,0,0.65)"
    },
    headerConfig:{
        hideHeader:false,
        headerText:""
    },
    itemConfig:[
        {
            label:"姓名",
            value:"name",
            type:"text",
            class:"qilin-text-success",
            customStyle:{
                color:"red",
                fontSize:"20px",
                fontWeight:"bolder"
            },
            col:8
        },
        {
            label:"简介",
            value:"description",
            type:"text",
            valueEllipsis:true,
            col:16
        },
        {
            label:"Qilin官网作者Qilin官网作者Qilin官网作者",
            value:"detail",
            type:"text",
            labelEllipsis:true,
            col:24
        },
        {
            label:"生辰",
            value:"birthday",
            type:"date",
            format:"chinese",
            valueEllipsis:true,
            col:12
        },
        {
            label:"Qilin官网",
            value:"qilinWeb",
            type:"link",
            valueStyle:"color:red !important;",
            click:(item,value)=>{
                console.log(item,value);
                window.open(value);
            },
            valueEllipsis:true,
            col:12
        },
        {
            label:"最喜欢颜色",
            value:"color",
            type:"color",
            col:24
        },
        {
            label:"换行文本",
            value:"lineText",
            type:"text",
            newLine:true,
            col:24,
        },
        {
            label:"富文本",
            value:"car",
            type:"richtext",
            valueEllipsis:true,
            col:24
        },
        {
            label:"作者图片1",
            value:"imageArrayString",
            type:"image",
            isImageArrayString:true,
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片2",
            value:"imageArrayObj",
            type:"image",
            isImageArrayString:false,
            imageIp:"https://www.qilin-web.cn/qilin",
            // imageIp:"https://szxy.jsisi.cn/qilin",
            // imageIp:"http://szxy.jsisi.cn",
            imageOptions:{
                serverUrl:"fileName"
            },
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片3",
            value:"imageArrayObj2",
            type:"image",
            isImageArrayString:false,
            imageFit:"fill",
            imageOptions:{
                serverUrl:"name"
            },
            col:24
        },
        {
            label:"作者文档1",
            value:"fileArrayString",
            type:"file",
            isImageArrayString:true,
            valueEllipsis:true,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:8
        },
        {
            label:"作者文档2",
            value:"fileArrayObj",
            type:"file",
            isImageArrayString:false,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:16
        },
        {
            label:"作者文档3",
            value:"fileArrayObj2",
            type:"file",
            isImageArrayString:false,
            imageOptions:{
                serverOriginalName:"name"
            },
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"插槽",
            value:"custom",
            type:"slot",
            slotName:"custom",
            valueEllipsis:true,
            col:12
        },
        {
            label:"作者介绍",
            value:"detail",
            type:"text",
            textarea:true,
            rows:3,
            col:12
        }
    ],
    viewData:{
        name:"Qilin",
        description:"Qilin组件的创始者，前端插件的搬运工",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        birthday:"1996-05-12",
        qilinWeb:"https://www.qilin-web.cnQilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端",
        color:"yellow",
        lineText:"请完成三化二级平台24年商务工作。建议步骤如下。报账进入流程可完成任务。\n（1）11月份，完成全部费…分与计算，完成工作量评审。\n（3）11月或12月，完成订单验收 \n（4）12月，完成整体付款工作。",
        car:"<b>永恒转动的机械，助我突破自身的限制，我......长安univ，即是黑暗，也是天选，转子发动机，启动！永恒转动的机械，助我突破自身的限制，我......长安univ，即是黑暗，也是天选，转子发动机，启动！</b>",
        imageArrayString:["https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"],
        imageArrayObj:[
            {
                fileName:"/uploads/image_20230918151155.jpeg",
                url:"http://szxy.jsisi.cn/profile/upload/2025/05/28/watermarked_20250528160812A001.jpg"
            },
            {
                fileName:"/uploads/image_20230918151155.jpeg",
                url:"http://szxy.jsisi.cn/profile/upload/2025/05/28/watermarked_20250528160812A001.jpg"
            }
        ],
        imageArrayObj2:[
            {
                name:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        fileArrayString:["dhadadjasdjafjak.doc","dhadadjasdjafjak1.doc"],
        fileArrayObj:[
            {
                originalFilename:"dhadadjasdjafjak.doc"
            }
        ],
        fileArrayObj2:[
            {
                name:"dhadadjasdjafjak.doc"
            }
        ],
        custom:"作者的自定义插槽~Qilin组件的创始者作者的自定义插槽~Qilin组件的创始者作者的自定义插槽~Qilin组件的创始者",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
</style>

示例：

Props 参数

viewConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
globalConfig	object	组件全局样式和展示行为配置，详见 globalConfig	-	-
headerConfig	object	头部显示设置，详见 headerConfig	-	-
itemConfig	array	显示字段配置，详见 itemConfig	-	-
viewData	object	显示数据对象，详见 viewData	-	-

globalConfig object

组件的全局样式和展示行为配置。

属性	类型	说明	默认值
isTable	boolean	是否以表格形式展示	true
labelBackgroundColor	CssColor	label标签背景颜色	#FAFAFA
labelColor	CssColor	label标签字体颜色	rgba(0,0,0,0.85)
valueColor	CssColor	value字体颜色	rgba(0,0,0,0.65)
borderColor	CssColor	表格边框颜色	#E9E9E9

headerConfig object

头部显示设置。

属性	类型	说明	默认值
hideHeader	boolean	是否隐藏头部标题	false
headerText	string	头部标题文本	"基本信息"

itemConfig array

显示字段配置。

属性	类型	说明	可取值	默认值
label	string	字段显示标题	-	-
value	string	对应数据字段名称	-	-
type	string	显示数据类型	text, date, link, slot,image,file,color	text
hideLabel	boolean	是否隐藏label	true,false	false
isHide	boolean	是否隐藏该项	true,false	false
isHideFn	function	是否隐藏该项的函数，优先级低于isHide	(item,value)=>{return true/false;}	-
textarea	boolean	text类型是否是多行文本，当且仅当type为text时生效	true,false	false
newLine	boolean	是否识别value值中的\n换行符，当且仅当type为text时生效	true,false	false
rows	number	textarea的高度，1对应40px，当textarea为true时生效	-	2
slotName	string	自定义插槽名称	-	-
format	string	日期格式配置项，具体配置项请参考QilinUtils工具库中Date方法中的formatDate()方法，当且仅当type为date时生效	-	yyyy-MM-dd hh:mm:ss
valueEllipsis	boolean	是否省略超出value文本	true,false	false
col	number	栅格宽度	6,8,12,16,18,24	8
className	string	额外添加在el-col元素上的类名	-
labelSuffix	string	label标签后缀符号	-
labelEllipsis	boolean	label标签是否超出悬浮展示	true,false	false
labelEllipsisPlacement	string	label标签设置悬浮提示的位置	top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end	left
labelEllipsisEffect	string	label标签超出悬浮框的样式主题	dark,light	dark
class	string	value值的自定义类名，取值为字符串，当且仅当type为text时生效	-
customStyle	object	value值的自定义样式，取值为对象，当且仅当type为text时生效	{}
click	function	点击事件，当type为link或file时生效	(item,value)=>{}	-
isImageArrayString	boolean	传入的图片或文件数据类型是字符串数组还是对象数组，默认为对象数组	true,false	false
imageFit	string	图片填充模式	fill,contain,cover,none,scale-down	contain
imageIp	string	设置查看图片或文件的服务器IP地址	-	-
imageOptions	object	查看图片或文件时的设置配置项--仅当type=image/type=file且isImageArrayString为false时生效，详见 imageOptions	-	-

imageOptions object

配置项	类型	说明	可取值	默认值
serverOriginalName	string	原始文件名称，用以对应后台返回的字段名称	-	originalFileName
serverName	string	回显文件名称，用以对应后台返回的字段名称	-	newFileName
serverUrl	string	回显文件url，用以对应后台返回的字段名称	-	fileName

viewData object

回显数据的后台对应字段。

Slots插槽

QilinView 组件提供了以下插槽：

插槽名称	数据值	说明
	data:{item,data}	设置headerConfig配置项中的type为slot即可使用，用于需要对某项数据进行特殊处理的需求，其中设置的slotName属性值就是该插槽名