c5_labsci/fapp/ciyon_ap/pages/demo/comform/checkbox.vue

<template>
	<ciy-header ref="header" title="ciy-checkbox组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">复选框</view>
			<view class="content">
				相比传统checkbox-group组件，可与字典联动。<br />
				选项数据格式，[{id,name}]数组。<br />
				数据用小写逗号分隔，两边都有逗号。<br />
				方便like数据库查询法(简单低效)。<br />
				大数据量的多选筛选，应独立建副表或用ES。<br />
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>原始组件</label>
				<view>
					<checkbox-group name="ori">
						<label>
							<checkbox value="r1" />选项1
						</label>
						<label>
							<checkbox value="r2" />选项2
						</label>
						<label>
							<checkbox value="r3" />选项3
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-checkbox v-model="formvalue" name="ciy1" :range="rang" @change="chglog('change', $event)"></ciy-checkbox>
				</view>
			</view>
			<view class="ciy-form">
				<label>整行排列</label>
				<view>
					<ciy-checkbox line itemright hasmore :value="formvalue" name="ciy2" :range="rang" @change="chglog('change', $event)"></ciy-checkbox>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-checkbox left disabled :value="formvalue" name="ciy3" :range="rang" @change="chglog('change', $event)"></ciy-checkbox>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">每行一条</label>
				<view>
					<ciy-checkbox hasmore moreno line :value="formvalue" name="ciy4" :range="rang" @change="chglog('change', $event)"></ciy-checkbox>
				</view>
			</view>
			<view class="ciy-form">
				<label>十六进制</label>
				<view>
					<ciy-checkbox bin :value="formvalue16" name="ciy5" :range="rang" @change="chglog('change', $event)"></ciy-checkbox>
				</view>
			</view>
			<view class="ciy-form">
				<label>简易range</label>
				<view>
					<ciy-checkbox :value="formvalue" name="ciy6" range="10:待处理,20:已处理" @change="chglog('change', $event)"></ciy-checkbox>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue='1,3'">改变值</button>
				<button class="btn" @tap="formvalue16=5">改变hex</button>
			</view>
			<view class="ciy-card formcard" v-if="formdata">
				<view class="content">
					<view v-html="tobr(formdata, true)" class="formdata"></view>
				</view>
			</view>
		</form>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">name,value,v-model</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">initevent</view>
				<view class="tip">
					是否产生初始事件。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">hasmore</view>
				<view class="tip">
					是否form携带更多格式的数据。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">moreno</view>
				<view class="tip">
					是否form携带未选中数据。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">left</view>
				<view class="tip">
					是否左侧显示。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">range</view>
				<view class="tip">
					选项数组，object需包含id,name,upid。<br />
					简易字符串，id1.name1,id2.name2,...<br />
				</view>
				<view class="hr"></view>
				<view class="prp">bin</view>
				<view class="tip">
					十六进制，按位返回整数。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">itemright</view>
				<view class="tip">
					是否选项方块在右侧。<br />
					默认 false 在左侧
				</view>
				<view class="hr"></view>
				<view class="prp">line</view>
				<view class="tip">
					是否每一个选项单独一行。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">byname (即将废弃)</view>
				<view class="tip">
					以name匹配选项。<br />
					默认 false 以id匹配。
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change, update:modelValue</view>
				<view class="tip">
					数值变更事件<br />
					from: init,check
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: '',
				formvalue16: 0,
				rang: [{
					id: 1,
					name: '选项1'
				}, {
					id: 2,
					name: '选项2'
				}, {
					id: 3,
					name: '选项3'
				}],
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

<style>
</style>