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

<template>
	<ciy-header ref="header" title="ciy-selpage组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">独立页选择框</view>
			<view class="content">
				进入单独页面选择一条记录。<br />
				一般用于选择收货地址、关联某个复杂功能等。
			</view>
		</view>
		{{formvalue}}
		{{formmore}}
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-selpage name="ciy1" page="/pages/me/user_shipaddr" :morevalue="formmore" v-model="formvalue" @change="chglog('change', $event)"></ciy-selpage>
				</view>
			</view>
			<view class="ciy-form">
				<label>value绑定</label>
				<view>
					<ciy-selpage left hasmore initevent page="/pages/me/user_shipaddr" :morevalue="formmore" :value="formvalue" name="ciy2" @change="chglog('change', $event)"></ciy-selpage>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-selpage disabled :morevalue="formmore" :value="formvalue" name="ciy3" @change="chglog('change', $event)"></ciy-selpage>
				</view>
			</view>
			<view class="ciy-form">
				<label>显示样式</label>
				<view>
					<ciy-selpage :ciystyle="{color:'#cc0000'}" page="/pages/me/user_shipaddr" :morevalue="formmore" :value="formvalue" name="ciy4" @change="chglog('change', $event)"></ciy-selpage>
				</view>
			</view>
			<view class="ciy-form">
				<label>自定义</label>
				<view>
					<ciy-selpage page="/pages/me/user_shipaddr" :morevalue="formmore" :value="formvalue" name="ciy5" @change="chglog('change', $event)">
						<template v-slot:default="{data}">
						{{data.name}}<br/>
						{{data.addr}}<br/>
						</template>
					</ciy-selpage>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue=2;formmore={name:'234234',addr:'ffffff'}">改变值</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="slt">list自定义选项</view>
				<view class="hr"></view>
				<view class="prp">name,value,v-model</view>
				<view class="hr"></view>
				<view class="prp">hasmore</view>
				<view class="tip">
					是否form携带更多格式的数据。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
					默认 请选择
				</view>
				<view class="hr"></view>
				<view class="prp">range</view>
				<view class="tip">
					选项数组，object需包含id,name。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">left</view>
				<view class="tip">
					是否左侧显示。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">itemalign</view>
				<view class="tip">
					设置选项上的text-align属性<br />
					left/center/right/justify等。<br />
					默认 无
				</view>
				<view class="hr"></view>
				<view class="prp">ciystyle</view>
				<view class="tip">
					内部显示属性<br />
				</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">noarrow</view>
				<view class="tip">
					是否无箭头。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">rows</view>
				<view class="tip">
					选项列数。<br />
					默认 1
				</view>
				<view class="hr"></view>
				<view class="prp">minselectsearch</view>
				<view class="tip">
					选项少于n条，则不显示搜索框。<br />
					默认 5
				</view>
				<view class="hr"></view>
				<view class="prp">diastema</view>
				<view class="tip">
					弹出上下间隙，弹出效果更好看。<br />
					默认 12 单位px
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">Addrange([])</view>
				<view class="tip">增量添加选项数组</view>
				<view class="hr"></view>
				<view class="fun">Selitem(index)</view>
				<view class="tip">设置选中项</view>
			</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,select<br />
					value: 当前选择项object<br />
					lastvalue: 历史选择项object<br />
				</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>
	<ciy-tabbar ref="tabbar"></ciy-tabbar>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: '',
				txtori: 1,
				formmore: {}
			}
		},
		onLoad() {},
		methods: {}
	}
</script>