<template>
	<u-ellipsis 
		content="这是一段很长的文本内容，用来演示省略号组件的基本功能。当文本超出指定行数时，会自动显示省略号。"
	/>
</template>
✅ Copy success!
copy

<template>
	<u-ellipsis 
		expand-text="展开"
		collapse-text="收起"
		content="这是一段很长的文本内容，用来演示省略号组件的展开收起功能。当文本超出指定行数时，会自动显示省略号，点击展开按钮可以查看完整内容。"
		:rows="2"
	/>
</template>
✅ Copy success!
copy

<template>
	<view>
		<!-- 头部省略 -->
		<u-ellipsis 
			content="这是一段很长的文本内容，用来演示省略号组件的头部省略功能。"
			position="start"
			expand-text="展开"
			collapse-text="收起"
		/>
		
		<!-- 中间省略 -->
		<u-ellipsis 
			content="这是一段很长的文本内容，用来演示省略号组件的中间省略功能。"
			position="middle"
			expand-text="展开"
			collapse-text="收起"
		/>
	</view>
</template>
✅ Copy success!
copy

<template>
	<u-ellipsis 
		content="这是一段很长的文本内容，用来演示省略号组件的自定义省略符号功能。"
		symbol="***"
		expand-text="查看更多"
		collapse-text="收起"
	/>
</template>
✅ Copy success!
copy

<template>
	<u-ellipsis 
		content="这是一段很长的文本内容，用来演示省略号组件的自定义样式功能。"
		:rows="3"
		color="#666666"
		:font-size="16"
		:line-height="24"
		action-color="#ff6b6b"
		expand-text="展开"
		collapse-text="收起"
	/>
</template>
✅ Copy success!
copy

<template>
	<u-ellipsis 
		content="这是一段支持点击事件的文本内容。"
		expand-text="展开"
		collapse-text="收起"
		@change="onExpandChange"
	/>
</template>

<script>
export default {
	methods: {
		onExpandChange(event) {
			console.log('展开状态变化:', event.expanded)
			console.log('当前显示内容:', event.content)
		}
	}
}
</script>
✅ Copy success!
copy