You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
3.1 KiB
154 lines
3.1 KiB
4 years ago
|
<template>
|
||
|
|
<view class="u-page">
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">基础使用</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value1"
|
||
|
|
:maxlength="4"
|
||
|
|
@change="change"
|
||
|
|
@finish="finish"
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">横线模式</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value2"
|
||
|
|
mode="line"
|
||
|
|
:maxlength="4"
|
||
|
|
:bold="true"
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">设置长度</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value3"
|
||
|
|
:maxlength="6"
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">设置间距</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value4"
|
||
|
|
mode="box"
|
||
|
|
:space="0"
|
||
|
|
:maxlength="4"
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">细边框</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value5"
|
||
|
|
mode="box"
|
||
|
|
:space="0"
|
||
|
|
:maxlength="4"
|
||
|
|
hairline
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
class="u-demo-block__content"
|
||
|
|
style="margin-top: 10px;"
|
||
|
|
>
|
||
|
|
<u-code-input
|
||
|
|
v-model="value6"
|
||
|
|
mode="line"
|
||
|
|
:space="10"
|
||
|
|
:maxlength="4"
|
||
|
|
hairline
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">调整颜色</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value7"
|
||
|
|
mode="box"
|
||
|
|
:space="0"
|
||
|
|
:maxlength="4"
|
||
|
|
hairline
|
||
|
|
color="#f56c6c"
|
||
|
|
borderColor="#f56c6c"
|
||
|
|
></u-code-input>
|
||
|
|
<view class="u-demo-block__content" style="margin-top: 10px;">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value10"
|
||
|
|
mode="line"
|
||
|
|
size="30"
|
||
|
|
:maxlength="4"
|
||
|
|
hairline
|
||
|
|
color="#3c9cff"
|
||
|
|
borderColor="#3c9cff"
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">点模式</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value8"
|
||
|
|
mode="box"
|
||
|
|
dot
|
||
|
|
:space="0"
|
||
|
|
:maxlength="4"
|
||
|
|
hairline
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-demo-block">
|
||
|
|
<text class="u-demo-block__title">预置内容</text>
|
||
|
|
<view class="u-demo-block__content">
|
||
|
|
<u-code-input
|
||
|
|
v-model="value9"
|
||
|
|
mode="box"
|
||
|
|
:space="0"
|
||
|
|
:maxlength="4"
|
||
|
|
hairline
|
||
|
|
fontSize="17"
|
||
|
|
></u-code-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value1: '',
|
||
|
|
value2: '',
|
||
|
|
value3: '',
|
||
|
|
value4: '',
|
||
|
|
value5: '',
|
||
|
|
value6: '',
|
||
|
|
value7: '',
|
||
|
|
value8: '',
|
||
|
|
value9: '123',
|
||
|
|
value10: '34'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
change(e) {
|
||
|
|
console.log('change', e);
|
||
|
|
},
|
||
|
|
finish(e) {
|
||
|
|
console.log('finish', e);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
</style>
|