177 lines
4.9 KiB
Vue
177 lines
4.9 KiB
Vue
<template>
|
||
<ciy-header title="ciy-inputbet组件"></ciy-header>
|
||
<view class="ciy-card">
|
||
<view class="title">倍数数字输入框</view>
|
||
<view class="content">
|
||
用倍数关系将可能出现的小数整数化输入。<br />
|
||
WCNY,万元,bet=1000000,分<br />
|
||
CNY,元,bet=100,分<br />
|
||
MCNY,元,bet=10000,毫<br />
|
||
TON,吨,bet=1000000,克<br />
|
||
KG,公斤,bet=1000,克<br />
|
||
METRE,米,bet=1000,毫米<br />
|
||
PCT,％,bet=100,万分之<br />
|
||
TC,℃,bet=1000<br />
|
||
INT,整数,bet=1<br />
|
||
</view>
|
||
</view>
|
||
<form @submit="submitlog">
|
||
<view class="ciy-form">
|
||
<label>v-model绑定</label>
|
||
<view>
|
||
<ciy-inputbet bet="100" unit="元" name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-inputbet>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>左侧</label>
|
||
<view>
|
||
<ciy-inputbet left hasmore bet="100" unit="元" placeholder="请输入" name="ciy2" :value="formvalue" @change="chglog('change', $event)"></ciy-inputbet>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>传统</label>
|
||
<view>
|
||
<ciy-inputbet bb bet="100" unit="元" name="ciy3" :value="formvalue" @change="chglog('change', $event)"></ciy-inputbet>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>禁用</label>
|
||
<view>
|
||
<ciy-inputbet disabled bet="100" unit="元" name="ciy4" :value="formvalue" @change="chglog('change', $event)"></ciy-inputbet>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>输入框宽度</label>
|
||
<view>
|
||
<ciy-inputbet bb :ciystyle="{width:'6em'}" bet="1000" unit="公斤" name="ciy5" :value="formvalue" @change="chglog('change', $event)"></ciy-inputbet>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>键盘按钮</label>
|
||
<view>
|
||
<ciy-inputbet confirmType="search" bet="10" unit="°" name="ciy6" :value="formvalue" @change="chglog('change', $event)"></ciy-inputbet>
|
||
</view>
|
||
</view>
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
<button class="btn" @tap="formvalue='350'">改变值</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 />
|
||
unit,num<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">bb</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">ciystyle</view>
|
||
<view class="tip">
|
||
针对微信小程序等问题，传递style。<br />
|
||
默认 {width:'4em'}
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">placeholder</view>
|
||
<view class="tip">
|
||
占位文字。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">bet</view>
|
||
<view class="tip">
|
||
倍数值。<br />
|
||
默认 1
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">unit</view>
|
||
<view class="tip">
|
||
单位文字。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">confirmType</view>
|
||
<view class="tip">
|
||
键盘的右下角按钮的文字，text生效。<br />
|
||
send 发送、search 搜索、go 前往<br />
|
||
next 下一个、done 完成<br />
|
||
默认 done
|
||
</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
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@focus, blur</view>
|
||
<view class="tip">
|
||
获取焦点、失去焦点事件<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>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
formvalue: ''
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {}
|
||
}
|
||
</script> |