Blockquote 引用

一段引用。

基本使用

设置 type 不同类型的引用。

查看代码

<template>
	<demo-container>
		<gov-blockquote> {{ content }} </gov-blockquote>
		<gov-blockquote type="primary">{{ content }} </gov-blockquote>
		<gov-blockquote type="success">{{ content }} </gov-blockquote>
		<gov-blockquote type="info">{{ content }} </gov-blockquote>
		<gov-blockquote type="warning">{{ content }} </gov-blockquote>
		<gov-blockquote type="danger">{{ content }} </gov-blockquote>
	</demo-container>
</template>

<script setup>
const content = `轻轻的我走了,正如我轻轻的来; 我轻轻的招手,作别西天的云彩。那河畔的金柳,是夕阳中的新娘; 波光里的艳影,在我的心头荡漾。`;
</script>

嵌套使用

可以互相嵌套使用。

查看代码

<template>
	<demo-container>
		<gov-blockquote type="primary">
			轻轻的我走了,正如我轻轻的来; 我轻轻的招手,作别西天的云彩。
			那河畔的金柳,是夕阳中的新娘; 波光里的艳影,在我的心头荡漾。
			<gov-blockquote>
				轻轻的我走了,正如我轻轻的来; 我轻轻的招手,作别西天的云彩。
				那河畔的金柳,是夕阳中的新娘; 波光里的艳影,在我的心头荡漾。
			</gov-blockquote>
		</gov-blockquote>
	</demo-container>
</template>

自定义

字体大小默认继承，可设置 fontSize 修改字体大小； 根据borderColor 设置边框颜色。

查看代码

<template>
	<demo-container>
		<gov-blockquote fontSize="12px" borderColor="blue">
			轻轻的我走了,正如我轻轻的来; 我轻轻的招手,作别西天的云彩。
			那河畔的金柳,是夕阳中的新娘; 波光里的艳影,在我的心头荡漾。
		</gov-blockquote>
	</demo-container>
</template>

翻转

reverse 设置是否翻转，默认不翻转。

查看代码

<template>
	<demo-container>
		<gov-blockquote reverse type="primary">
			轻轻的我走了,正如我轻轻的来; 我轻轻的招手,作别西天的云彩。
			那河畔的金柳,是夕阳中的新娘; 波光里的艳影,在我的心头荡漾。
		</gov-blockquote>
	</demo-container>
</template>

Attributes

属性名	说明	类型	可选值	默认值
type	块引用的类型	String	"default", "primary", "success", "info", "warning", "danger"	"default"
fontSize	字体大小	String	—	—
borderColor	边框颜色	String	—	—
reverse	是否翻转显示	Boolean	true, false	false

Slots

插槽名	说明
default	用于放置块引用的内容，可以放置任何自定义的内容，例如文本、图片或其他 HTML 结构。