进度条 Progress

数据进度条

静态组件渲染

• 通过向组件模板添加class="open-progress"即可创建一个基础进度条
• 向元素添加自定义属性"striped"，定义带斜纹背景的进度条
• 向元素添加自定义属性"lg || sm"定义不同尺寸的进度条

默认样式

条纹样式

大的进度条样式

小的进度条样式

显示代码

<div class="open-container">
	<h5>默认样式</h5>
	<div class="open-progress" id="one">
		<div class="open-progress-bar" value="30" max="100"></div>
	</div>
	<h5>条纹样式</h5>
	<h5>向元素添加自定义属性`"striped"`，定义带斜纹背景的进度条</h5>
	<div class="open-progress" striped>
		<div class="open-progress-bar" value="30" max="100"></div>
	</div>
	<h5>大的进度条样式</h5>
	<div class="open-progress" lg>
		<div class="open-progress-bar" value="30" max="100"></div>
	</div>
	<h5>小的进度条样式</h5>
	<div class="open-progress" sm>
		<div class="open-progress-bar" value="30" max="100"></div>
	</div>
</div>

<script setup>
	import { onMounted,nextTick  } from 'vue'
	import openui from '../openui@0.1.0-beta/js/openui.esm.js'

	onMounted(function(){
		openui.progress.renderStatic()
	})
</script>

动态组件渲染

条纹样式

向元素添加自定义属性"striped"，定义带斜纹背景的进度条

默认样式

条纹样式

大进度条

小进度条

显示代码

<div class="open-container">
	<h6>默认样式</h6>
	<div id="default"></div>
	<h6>条纹样式</h6>
	<div id="striped"></div>
	<h6>大进度条</h6>
	<div id="lg"></div>
	<h6>小进度条</h6>
	<div id="sm"></div>
</div>

<script setup>
	import { onMounted,nextTick  } from 'vue'
	import openui from '../openui@0.1.0-beta/js/openui.esm.js'

	onMounted(function(){
		nextTick(()=>{
			// 默认进度条
			openui.progress.render({
				id: '#default',
				value: 30,
				max: 100,
			})
			// 条纹进度条
			openui.progress.render({
				id: '#striped',
				value: 30,
				max: 100,
				type: 'striped'
			})
			// 大的进度条
			openui.progress.render({
				id: '#lg',
				value: 30,
				max: 100,
				size: 'lg'
			})
			// 小的进度条
			openui.progress.render({
				id: '#sm',
				value: 30,
				max: 100,
				size: 'sm'
			})
		})
	})
	
</script>

API

API	描述
calendar.render(options)	动态渲染
calendar.renderStatic(options)	静态渲染

动态渲染

calendar.render(options)

• 参数options:基础属性配置

属性名	描述	类型	必填	默认值
id	dom选择器	string	是	-
value	设置的进度值	number/string	否	0
max	最大值	number/string	否	0
type	背景类型,可选：striped 条纹背景	string	否	-
size	样式大小，可选： sm | lg	string	否	-

静态渲染

calendar.renderStatic(options)

默认会获取符合约定的组件dom模版进行渲染

提示

所有静态渲染方法必须在dom加载后调用
如vue，建议在onMounted后nextTick()调用
非框架传统多页面window.onload后调用