123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <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>
|