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

<template>
	<ciy-header ref="header" title="ciy-checkitem组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">选择块</view>
			<view class="content">
				相比传统checkbox组件，样式动画个性化。<br />
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">自定义样式</view>
			<view class="content">
				<view>颜色样式，在style.css中设置css变量</view>
				<view>--e-switch-br: 背景色</view>
				<view>--e-switch-chk: 选中背景色</view>
				<view>--e-switch-txt: 文字色</view>
				<view>
					<ciy-checkitem name="d1" style="font-size:0.6em;color:#666666;" v-model="txtciy" @change="chglog('change', $event)"></ciy-checkitem>
					<ciy-checkitem sq name="d2" style="font-size:0.8em;" v-model="txtciy" @change="chglog('change', $event)"></ciy-checkitem>
					<label>
						<ciy-checkitem sq name="d3" style="font-size:2em;color:#cc0000;" v-model="txtciy" @change="chglog('change', $event)"></ciy-checkitem>
						label for
					</label>
					<ciy-checkitem sq name="d4" v-model="txtciy" @change="chglog('change', $event)">lab标签</ciy-checkitem>
				</view>
				<view>label for在微信小程序无法穿透进组件。</view>
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>原始组件</label>
				<view>
					<checkbox-group name="oricheckbox">
						<checkbox value="a1"></checkbox>
						<checkbox value="a2"></checkbox>
					</checkbox-group>
					<radio-group name="oriradio">
						<radio value="r1"></radio>
						<radio value="r2"></radio>
					</radio-group>
				</view>
			</view>
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-checkitem v-model="formvalue" name="ciy1" @change="chglog('change', $event)"></ciy-checkitem>
				</view>
			</view>
			<view class="ciy-form">
				<label>方块</label>
				<view>
					<ciy-checkitem name="ciy2" sq :value="formvalue" @change="chglog('change', $event)"></ciy-checkitem>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-checkitem name="ciy3" :value="formvalue" @change="chglog('change', $event)" disabled></ciy-checkitem>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">放慢</label>
				<view>
					<ciy-checkitem ms="1000" sq name="ciy4" :value="formvalue" @change="chglog('change', $event)"></ciy-checkitem>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">带文字</label>
				<view>
					<ciy-checkitem sq name="ciy5" :value="formvalue" @change="chglog('change', $event)">文字</ciy-checkitem>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue=true">true</button>
				<button class="btn" @tap="formvalue=false">false</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">ms</view>
				<view class="tip">
					动画毫秒数。<br />
					默认 200
				</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">sq</view>
				<view class="tip">
					方形。<br />
					默认 false
				</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,input
				</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: false,
				rang: [{
					id: 1,
					name: '选项1'
				}, {
					id: 2,
					name: '选项2'
				}, {
					id: 3,
					name: '选项3'
				}],
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

<style>
</style>