c5_labsci/fapp/ciyon_ap/pages/demo/comform/inputnumber.vue
2026-01-27 00:52:00 +08:00

121 lines
3.1 KiB
Vue

<template>
<ciy-header title="ciy-inputnumber组件"></ciy-header>
<view class="ciy-card">
<view class="title">数量加减框</view>
<view class="content">
数量操作<br />
</view>
</view>
<form @submit="submitlog">
<view class="ciy-form">
<label>v-model绑定</label>
<view>
<ciy-inputnumber name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-inputnumber>
</view>
</view>
<view class="ciy-form">
<label>左侧</label>
<view>
<ciy-inputnumber left name="ciy2" :value="formvalue" @change="chglog('change', $event)"></ciy-inputnumber>
</view>
</view>
<view class="ciy-form">
<label>禁用</label>
<view>
<ciy-inputnumber disabled name="ciy3" :value="formvalue" @change="chglog('change', $event)"></ciy-inputnumber>
</view>
</view>
<view class="ciy-form">
<label>限制范围</label>
<view>
<ciy-inputnumber min="3" max="8" name="ciy4" :value="formvalue" @change="chglog('change', $event)"></ciy-inputnumber>
</view>
</view>
<view class="txt-center px4 py4">
<button class="btn" form-type="submit">提交表单</button>
<button class="btn" @tap="formvalue='2'">改值</button>
<button class="btn" @tap="formvalue=3">改值</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">left</view>
<view class="tip">
是否左侧显示。<br />
默认 false
</view>
<view class="hr"></view>
<view class="prp">width</view>
<view class="tip">
文本框宽度。<br />
默认 2em
</view>
<view class="hr"></view>
<view class="prp">min,max</view>
<view class="tip">
限制范围。<br />
默认 1,9999999
</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,confirm,op,watch
</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>
</template>
<style>
@import '@/pages/demo/zdemo.css';
</style>
<script>
import zmixin from '@/pages/demo/zmixin.js';
export default {
mixins: [zmixin],
data() {
return {
formvalue: 2
}
},
onLoad() {},
methods: {}
}
</script>