From 9b9516ba7ce4a147c731a04f25532dfdaef730b6 Mon Sep 17 00:00:00 2001 From: yang1206 Date: Thu, 13 Jul 2023 16:22:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20codeInput=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/items.ts | 3 +- docs/components/dentry/codeinput.md | 113 +++++++++++++++ example/config.json | 13 +- example/src/components.d.ts | 2 +- example/src/pages.json | 2 +- .../src/pages/demo/dentry/codeinput/index.vue | 74 ++++++++++ .../src/pages/demo/layout/sticky/index.vue | 2 +- packages/nutui/components/_utils/style.ts | 9 +- packages/nutui/components/barrage/barrage.ts | 2 - .../nutui/components/codeinput/codeinput.ts | 90 ++++++++++++ .../nutui/components/codeinput/codeinput.vue | 137 ++++++++++++++++++ .../nutui/components/codeinput/index.scss | 76 ++++++++++ packages/nutui/components/codeinput/index.ts | 1 + packages/nutui/global.d.ts | 2 + packages/nutui/styles/variables.scss | 9 ++ 15 files changed, 527 insertions(+), 8 deletions(-) create mode 100644 docs/components/dentry/codeinput.md create mode 100644 example/src/pages/demo/dentry/codeinput/index.vue create mode 100644 packages/nutui/components/codeinput/codeinput.ts create mode 100644 packages/nutui/components/codeinput/codeinput.vue create mode 100644 packages/nutui/components/codeinput/index.scss create mode 100644 packages/nutui/components/codeinput/index.ts diff --git a/docs/.vitepress/items.ts b/docs/.vitepress/items.ts index 42dcf3ec..dcad36f7 100644 --- a/docs/.vitepress/items.ts +++ b/docs/.vitepress/items.ts @@ -19,7 +19,7 @@ export const components = [ { text: 'Divider 分割线', link: '/components/layout/divider' }, { text: 'Grid 宫格', link: '/components/layout/grid' }, { text: 'Layout 布局', link: '/components/layout/layout' }, - { text: 'Sticky 粘性布局', link: '/components/layout/sticky' }, + // { text: 'Sticky 粘性布局', link: '/components/layout/sticky' }, ], }, { @@ -49,6 +49,7 @@ export const components = [ { text: 'Form 表单', link: '/components/dentry/form' }, { text: 'Input 输入框', link: '/components/dentry/input' }, { text: 'InputNumber 数字输入框', link: '/components/dentry/inputnumber' }, + { text: 'CodeInput 验证码输入框', link: '/components/dentry/codeinput' }, { text: 'NumberKeyboard 数字键盘', link: '/components/dentry/numberkeyboard' }, { text: 'Picker 选择器', link: '/components/dentry/picker' }, { text: 'Radio 单选按钮', link: '/components/dentry/radio' }, diff --git a/docs/components/dentry/codeinput.md b/docs/components/dentry/codeinput.md new file mode 100644 index 00000000..0371f2ab --- /dev/null +++ b/docs/components/dentry/codeinput.md @@ -0,0 +1,113 @@ +# CodeInput 验证码输入框 + +### 介绍 + +一般用于验证用户短信验证码的场景，该组件参考了 uview-ui 的 [验证码输入框](https://www.uviewui.com/components/codeInput.html)。 + +### 基础用法 + +```html + +``` + +### 横线模式 + +```html + +``` + +### 设置长度 + +```html + +``` + +### 横线间距 + +```html + +``` + +### 调整颜色 + +```html + +``` + +### 快捷选择-范围选择 + +```html + + +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +|-------------------|---------------------------------------------------|-----------------|-----------------| +| v-model | 输入值，双向绑定 | string | - | +| adjustPosition | 键盘弹起时，是否自动上推页面 | Boolean | `false` | +| maxlength |输入字符个数 | `String \| Number` | `4` | +| dot | 是否用圆点填充 | boolean | `false` | +| mode | 选择样式为边框或者横线 | `box \| line` | `box` | +| hairline | 是否细边框 | Boolean | `false` +| space | 字符间的距离 | `String \| Number` | `10` | +| focus | 是否自动获取焦点 | Boolean | `false` | +| custom-color | 字体颜色 | String | `#606266` | +| font-size | 字体大小，单位rpx | `String \| Number` | `18` | +| size | 输入框的大小，宽等于高 | `String \| Number` | `35` | +| disabledKeyboard | 禁止点击输入框唤起系统键盘 | Boolean | `false` | +| border-color | 边框和线条颜色 | String | `#c9cacc` | +| disabledDot | 是否禁止输入"."符号 | boolean | `true` | + +### Events + +| 事件名 | 说明 | 回调参数 | +|--------|------------------------------|------------------------------| +| change | 输入内容发生改变时触发，具体见上方说明 | `string` | +| finish | 输入字符个数达maxlength值时触发，见上方说明 | `string` | + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/basic/configprovider)。 + +| 名称 | 默认值 | +| --------------------------------------- | -------------------------- | +| --nut-code-input-cursor-width | _var(--nut-code-input-cursor-width)_ | +| --nut-code-input-cursor-height| _var(--nut-code-input-cursor-height)_ | +| --nut-code-input-cursor-animation-duration| _1s_ | +| --nut-code-input-cursor-animation-name| _nut-cursor-flicker_ | +| --nut-code-input-content-color| _var(--nut-code-content-color)_ | + diff --git a/example/config.json b/example/config.json index f07218f3..2761061d 100644 --- a/example/config.json +++ b/example/config.json @@ -222,7 +222,7 @@ "cName": "粘性布局", "type": "component", "desc": "当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在距离屏幕固定的距离处", - "show": true, + "show": false, "taro": true, "tarodoc": false, "author": "szg2008" @@ -533,6 +533,17 @@ "desc": "输入框组件", "author": "gxx158" }, + { + "version": "3.0.0", + "name": "CodeInput", + "taro": true, + "sort": 2, + "cName": "验证码输入框", + "type": "component", + "show": true, + "desc": "验证码输入框组件", + "author": "yang1206" + }, { "version": "3.0.0", "name": "Radio", diff --git a/example/src/components.d.ts b/example/src/components.d.ts index a6c42352..3c559df3 100644 --- a/example/src/components.d.ts +++ b/example/src/components.d.ts @@ -30,6 +30,7 @@ declare module '@vue/runtime-core' { NutCheckbox: typeof import('uniapp-nutui/components/checkbox/checkbox.vue')['default'] NutCheckboxGroup: typeof import('uniapp-nutui/components/checkboxgroup/checkboxgroup.vue')['default'] NutCircleProgress: typeof import('uniapp-nutui/components/circleprogress/circleprogress.vue')['default'] + NutCodeInput: typeof import('uniapp-nutui/components/codeinput/codeinput.vue')['default'] NutCol: typeof import('uniapp-nutui/components/col/col.vue')['default'] NutCollapse: typeof import('uniapp-nutui/components/collapse/collapse.vue')['default'] NutCollapseItem: typeof import('uniapp-nutui/components/collapseitem/collapseitem.vue')['default'] @@ -52,7 +53,6 @@ declare module '@vue/runtime-core' { NutGiftbox: typeof import('uniapp-nutui/components/giftbox/giftbox.vue')['default'] NutGrid: typeof import('uniapp-nutui/components/grid/grid.vue')['default'] NutGridItem: typeof import('uniapp-nutui/components/griditem/griditem.vue')['default'] - NutGuessGift: typeof import('uniapp-nutui/components/guessgift/guessgift.vue')['default'] NutHiteggs: typeof import('uniapp-nutui/components/hiteggs/hiteggs.vue')['default'] NutIcon: typeof import('uniapp-nutui/components/icon/icon.vue')['default'] NutImagePreview: typeof import('uniapp-nutui/components/imagepreview/imagepreview.vue')['default'] diff --git a/example/src/pages.json b/example/src/pages.json index a66cbbeb..bfd06118 100644 --- a/example/src/pages.json +++ b/example/src/pages.json @@ -1 +1 @@ -{"pages":[{"path":"pages/index/index","type":"home","style":{}},{"path":"pages/demo/basic/button/index","type":"page","style":{"navigationBarTitleText":"Button"}},{"path":"pages/demo/basic/cell/index","type":"page","style":{"navigationBarTitleText":"Cell"}},{"path":"pages/demo/basic/configprovider/index","type":"page","style":{}},{"path":"pages/demo/basic/icon/index","type":"page","style":{"navigationBarTitleText":"Icon"}},{"path":"pages/demo/basic/overlay/index","type":"page","style":{"navigationBarTitleText":"Overlay"}},{"path":"pages/demo/basic/popup/index","type":"page","style":{"navigationBarTitleText":"Popup"}},{"path":"pages/demo/basic/transition/index","type":"page","style":{"navigationBarTitleText":"Transition"}},{"path":"pages/demo/bingo/dollmachine/index","type":"page","style":{"navigationBarTitleText":"DollMachine"}},{"path":"pages/demo/bingo/giftbox/index","type":"page","style":{"navigationBarTitleText":"GiftBox"}},{"path":"pages/demo/bingo/hiteggs/index","type":"page","style":{"navigationBarTitleText":"HitEggs"}},{"path":"pages/demo/bingo/marquee/index","type":"page","style":{"navigationBarTitleText":"Marquee"}},{"path":"pages/demo/bingo/shakedice/index","type":"page","style":{}},{"path":"pages/demo/bingo/turntable/index","type":"page","style":{}},{"path":"pages/demo/business/address/index","type":"page","style":{"navigationBarTitleText":"Address"}},{"path":"pages/demo/business/addresslist/index","type":"page","style":{"navigationBarTitleText":"AddressList"}},{"path":"pages/demo/business/barrage/index","type":"page","style":{"navigationBarTitleText":"Barrage"}},{"path":"pages/demo/business/card/index","type":"page","style":{"navigationBarTitleText":"Card"}},{"path":"pages/demo/business/category/index","type":"page","style":{"navigationBarTitleText":"Category"}},{"path":"pages/demo/business/comment/index","type":"page","style":{"navigationBarTitleText":"Comment"}},{"path":"pages/demo/business/ecard/index","type":"page","style":{"navigationBarTitleText":"Ecard"}},{"path":"pages/demo/business/invoice/index","type":"page","style":{"navigationBarTitleText":"Invoice"}},{"path":"pages/demo/business/signature/index","type":"page","style":{"navigationBarTitleText":"Signature"}},{"path":"pages/demo/business/sku/index","type":"page","style":{"navigationBarTitleText":"Sku"}},{"path":"pages/demo/business/timeselect/index","type":"page","style":{"navigationBarTitleText":"TimeSelect"}},{"path":"pages/demo/dentry/calendar/index","type":"page","style":{"navigationBarTitleText":"Calendar"}},{"path":"pages/demo/dentry/cascader/index","type":"page","style":{"navigationBarTitleText":"Cascader"}},{"path":"pages/demo/dentry/checkbox/index","type":"page","style":{"navigationBarTitleText":"Checkbox"}},{"path":"pages/demo/dentry/datepicker/index","type":"page","style":{"navigationBarTitleText":"DatePicker"}},{"path":"pages/demo/dentry/form/index","type":"page","style":{"navigationBarTitleText":"Form"}},{"path":"pages/demo/dentry/input/index","type":"page","style":{"navigationBarTitleText":"Input"}},{"path":"pages/demo/dentry/inputnumber/index","type":"page","style":{"navigationBarTitleText":"InputNumber"}},{"path":"pages/demo/dentry/numberkeyboard/index","type":"page","style":{"navigationBarTitleText":"NumberKeyboard"}},{"path":"pages/demo/dentry/picker/index","type":"page","style":{"navigationBarTitleText":"Picker"}},{"path":"pages/demo/dentry/radio/index","type":"page","style":{"navigationBarTitleText":"Radio"}},{"path":"pages/demo/dentry/range/index","type":"page","style":{"navigationBarTitleText":"Range"}},{"path":"pages/demo/dentry/rate/index","type":"page","style":{"navigationBarTitleText":"Rate"}},{"path":"pages/demo/dentry/searchbar/index","type":"page","style":{"navigationBarTitleText":"SearchBar"}},{"path":"pages/demo/dentry/shortpassword/index","type":"page","style":{"navigationBarTitleText":"ShortPassword"}},{"path":"pages/demo/dentry/textarea/index","type":"page","style":{"navigationBarTitleText":"Textarea"}},{"path":"pages/demo/dentry/uploader/index","type":"page","style":{"navigationBarTitleText":"Uploader"}},{"path":"pages/demo/exhibition/animate/index","type":"page","style":{"navigationBarTitleText":"Animate"}},{"path":"pages/demo/exhibition/avatar/index","type":"page","style":{"navigationBarTitleText":"Avatar"}},{"path":"pages/demo/exhibition/badge/index","type":"page","style":{"navigationBarTitleText":"Badge"}},{"path":"pages/demo/exhibition/circleprogress/index","type":"page","style":{"navigationBarTitleText":"CircleProgress"}},{"path":"pages/demo/exhibition/collapse/index","type":"page","style":{"navigationBarTitleText":"Collapse"}},{"path":"pages/demo/exhibition/countdown/index","type":"page","style":{"navigationBarTitleText":"CountDown"}},{"path":"pages/demo/exhibition/countup/index","type":"page","style":{"navigationBarTitleText":"CountUp"}},{"path":"pages/demo/exhibition/ellipsis/index","type":"page","style":{"navigationBarTitleText":"Ellipsis"}},{"path":"pages/demo/exhibition/empty/index","type":"page","style":{"navigationBarTitleText":"Empty"}},{"path":"pages/demo/exhibition/imagepreview/index","type":"page","style":{"navigationBarTitleText":"ImagePreview"}},{"path":"pages/demo/exhibition/list/index","type":"page","style":{"navigationBarTitleText":"List"}},{"path":"pages/demo/exhibition/noticebar/index","type":"page","style":{"navigationBarTitleText":"Noticebar"}},{"path":"pages/demo/exhibition/popover/index","type":"page","style":{"navigationBarTitleText":"Popover"}},{"path":"pages/demo/exhibition/price/index","type":"page","style":{"navigationBarTitleText":"Price"}},{"path":"pages/demo/exhibition/progress/index","type":"page","style":{"navigationBarTitleText":"Progress"}},{"path":"pages/demo/exhibition/skeleton/index","type":"page","style":{"navigationBarTitleText":"Skeleton"}},{"path":"pages/demo/exhibition/steps/index","type":"page","style":{"navigationBarTitleText":"Steps"}},{"path":"pages/demo/exhibition/swiper/index","type":"page","style":{"navigationBarTitleText":"Swiper"}},{"path":"pages/demo/exhibition/table/index","type":"page","style":{"navigationBarTitleText":"Table"}},{"path":"pages/demo/exhibition/tag/index","type":"page","style":{"navigationBarTitleText":"Tag"}},{"path":"pages/demo/exhibition/tour/index","type":"page","style":{"navigationBarTitleText":"Tour"}},{"path":"pages/demo/exhibition/trendarrow/index","type":"page","style":{"navigationBarTitleText":"TrendArrow"}},{"path":"pages/demo/exhibition/watermark/index","type":"page","style":{"navigationBarTitleText":"WaterMark"}},{"path":"pages/demo/feedback/actionsheet/index","type":"page","style":{"navigationBarTitleText":"Actionsheet"}},{"path":"pages/demo/feedback/backtop/index","type":"page","style":{"navigationBarTitleText":"BackTop"}},{"path":"pages/demo/feedback/dialog/index","type":"page","style":{"navigationBarTitleText":"Dialog"}},{"path":"pages/demo/feedback/drag/index","type":"page","style":{"navigationBarTitleText":"Drag"}},{"path":"pages/demo/feedback/infiniteloading/index","type":"page","style":{"navigationBarTitleText":"InfiniteLoading"}},{"path":"pages/demo/feedback/notify/index","type":"page","style":{"navigationBarTitleText":"Notify"}},{"path":"pages/demo/feedback/swipe/index","type":"page","style":{"navigationBarTitleText":"Swipe"}},{"path":"pages/demo/feedback/switch/index","type":"page","style":{"navigationBarTitleText":"Switch"}},{"path":"pages/demo/feedback/toast/index","type":"page","style":{"navigationBarTitleText":"Toast"}},{"path":"pages/demo/layout/divider/index","type":"page","style":{"navigationBarTitleText":"Divider"}},{"path":"pages/demo/layout/grid/index","type":"page","style":{"navigationBarTitleText":"Grid"}},{"path":"pages/demo/layout/layout/index","type":"page","style":{"navigationBarTitleText":"Layout"}},{"path":"pages/demo/layout/sticky/index","type":"page","style":{"navigationBarTitleText":"Sticky"}},{"path":"pages/demo/nav/elevator/index","type":"page","style":{"navigationBarTitleText":"Elevator"}},{"path":"pages/demo/nav/fixednav/index","type":"page","style":{"navigationBarTitleText":"Fixednav"}},{"path":"pages/demo/nav/indicator/index","type":"page","style":{"navigationBarTitleText":"Indicator"}},{"path":"pages/demo/nav/menu/index","type":"page","style":{"navigationBarTitleText":"Menu"}},{"path":"pages/demo/nav/navbar/index","type":"page","style":{"navigationBarTitleText":"NavBar"}},{"path":"pages/demo/nav/pagination/index","type":"page","style":{"navigationBarTitleText":"Pagination"}},{"path":"pages/demo/nav/sidenavbar/index","type":"page","style":{"navigationBarTitleText":"SideNavbar"}},{"path":"pages/demo/nav/tabbar/index","type":"page","style":{"navigationBarTitleText":"TabBar"}},{"path":"pages/demo/nav/tabs/index","type":"page","style":{"navigationBarTitleText":"Tabs"}}],"globalStyle":{"navigationBarBackgroundColor":"@navBgColor","navigationBarTextStyle":"@navTxtStyle","navigationBarTitleText":"NutUi","backgroundColor":"@bgColor","backgroundTextStyle":"@bgTxtStyle","backgroundColorTop":"@bgColorTop","backgroundColorBottom":"@bgColorBottom","navigationStyle":"custom"},"subPackages":[]} \ No newline at end of file +{"pages":[{"path":"pages/index/index","type":"home","style":{}},{"path":"pages/demo/basic/button/index","type":"page","style":{"navigationBarTitleText":"Button"}},{"path":"pages/demo/basic/cell/index","type":"page","style":{"navigationBarTitleText":"Cell"}},{"path":"pages/demo/basic/configprovider/index","type":"page","style":{}},{"path":"pages/demo/basic/icon/index","type":"page","style":{"navigationBarTitleText":"Icon"}},{"path":"pages/demo/basic/overlay/index","type":"page","style":{"navigationBarTitleText":"Overlay"}},{"path":"pages/demo/basic/popup/index","type":"page","style":{"navigationBarTitleText":"Popup"}},{"path":"pages/demo/basic/transition/index","type":"page","style":{"navigationBarTitleText":"Transition"}},{"path":"pages/demo/bingo/dollmachine/index","type":"page","style":{"navigationBarTitleText":"DollMachine"}},{"path":"pages/demo/bingo/giftbox/index","type":"page","style":{"navigationBarTitleText":"GiftBox"}},{"path":"pages/demo/bingo/hiteggs/index","type":"page","style":{"navigationBarTitleText":"HitEggs"}},{"path":"pages/demo/bingo/marquee/index","type":"page","style":{"navigationBarTitleText":"Marquee"}},{"path":"pages/demo/bingo/shakedice/index","type":"page","style":{}},{"path":"pages/demo/bingo/turntable/index","type":"page","style":{}},{"path":"pages/demo/business/address/index","type":"page","style":{"navigationBarTitleText":"Address"}},{"path":"pages/demo/business/addresslist/index","type":"page","style":{"navigationBarTitleText":"AddressList"}},{"path":"pages/demo/business/barrage/index","type":"page","style":{"navigationBarTitleText":"Barrage"}},{"path":"pages/demo/business/card/index","type":"page","style":{"navigationBarTitleText":"Card"}},{"path":"pages/demo/business/category/index","type":"page","style":{"navigationBarTitleText":"Category"}},{"path":"pages/demo/business/comment/index","type":"page","style":{"navigationBarTitleText":"Comment"}},{"path":"pages/demo/business/ecard/index","type":"page","style":{"navigationBarTitleText":"Ecard"}},{"path":"pages/demo/business/invoice/index","type":"page","style":{"navigationBarTitleText":"Invoice"}},{"path":"pages/demo/business/signature/index","type":"page","style":{"navigationBarTitleText":"Signature"}},{"path":"pages/demo/business/sku/index","type":"page","style":{"navigationBarTitleText":"Sku"}},{"path":"pages/demo/business/timeselect/index","type":"page","style":{"navigationBarTitleText":"TimeSelect"}},{"path":"pages/demo/dentry/calendar/index","type":"page","style":{"navigationBarTitleText":"Calendar"}},{"path":"pages/demo/dentry/cascader/index","type":"page","style":{"navigationBarTitleText":"Cascader"}},{"path":"pages/demo/dentry/checkbox/index","type":"page","style":{"navigationBarTitleText":"Checkbox"}},{"path":"pages/demo/dentry/codeinput/index","type":"page","style":{"navigationBarTitleText":"CodeInput"}},{"path":"pages/demo/dentry/datepicker/index","type":"page","style":{"navigationBarTitleText":"DatePicker"}},{"path":"pages/demo/dentry/form/index","type":"page","style":{"navigationBarTitleText":"Form"}},{"path":"pages/demo/dentry/input/index","type":"page","style":{"navigationBarTitleText":"Input"}},{"path":"pages/demo/dentry/inputnumber/index","type":"page","style":{"navigationBarTitleText":"InputNumber"}},{"path":"pages/demo/dentry/numberkeyboard/index","type":"page","style":{"navigationBarTitleText":"NumberKeyboard"}},{"path":"pages/demo/dentry/picker/index","type":"page","style":{"navigationBarTitleText":"Picker"}},{"path":"pages/demo/dentry/radio/index","type":"page","style":{"navigationBarTitleText":"Radio"}},{"path":"pages/demo/dentry/range/index","type":"page","style":{"navigationBarTitleText":"Range"}},{"path":"pages/demo/dentry/rate/index","type":"page","style":{"navigationBarTitleText":"Rate"}},{"path":"pages/demo/dentry/searchbar/index","type":"page","style":{"navigationBarTitleText":"SearchBar"}},{"path":"pages/demo/dentry/shortpassword/index","type":"page","style":{"navigationBarTitleText":"ShortPassword"}},{"path":"pages/demo/dentry/textarea/index","type":"page","style":{"navigationBarTitleText":"Textarea"}},{"path":"pages/demo/dentry/uploader/index","type":"page","style":{"navigationBarTitleText":"Uploader"}},{"path":"pages/demo/exhibition/animate/index","type":"page","style":{"navigationBarTitleText":"Animate"}},{"path":"pages/demo/exhibition/avatar/index","type":"page","style":{"navigationBarTitleText":"Avatar"}},{"path":"pages/demo/exhibition/badge/index","type":"page","style":{"navigationBarTitleText":"Badge"}},{"path":"pages/demo/exhibition/circleprogress/index","type":"page","style":{"navigationBarTitleText":"CircleProgress"}},{"path":"pages/demo/exhibition/collapse/index","type":"page","style":{"navigationBarTitleText":"Collapse"}},{"path":"pages/demo/exhibition/countdown/index","type":"page","style":{"navigationBarTitleText":"CountDown"}},{"path":"pages/demo/exhibition/countup/index","type":"page","style":{"navigationBarTitleText":"CountUp"}},{"path":"pages/demo/exhibition/ellipsis/index","type":"page","style":{"navigationBarTitleText":"Ellipsis"}},{"path":"pages/demo/exhibition/empty/index","type":"page","style":{"navigationBarTitleText":"Empty"}},{"path":"pages/demo/exhibition/imagepreview/index","type":"page","style":{"navigationBarTitleText":"ImagePreview"}},{"path":"pages/demo/exhibition/list/index","type":"page","style":{"navigationBarTitleText":"List"}},{"path":"pages/demo/exhibition/noticebar/index","type":"page","style":{"navigationBarTitleText":"Noticebar"}},{"path":"pages/demo/exhibition/popover/index","type":"page","style":{"navigationBarTitleText":"Popover"}},{"path":"pages/demo/exhibition/price/index","type":"page","style":{"navigationBarTitleText":"Price"}},{"path":"pages/demo/exhibition/progress/index","type":"page","style":{"navigationBarTitleText":"Progress"}},{"path":"pages/demo/exhibition/skeleton/index","type":"page","style":{"navigationBarTitleText":"Skeleton"}},{"path":"pages/demo/exhibition/steps/index","type":"page","style":{"navigationBarTitleText":"Steps"}},{"path":"pages/demo/exhibition/swiper/index","type":"page","style":{"navigationBarTitleText":"Swiper"}},{"path":"pages/demo/exhibition/table/index","type":"page","style":{"navigationBarTitleText":"Table"}},{"path":"pages/demo/exhibition/tag/index","type":"page","style":{"navigationBarTitleText":"Tag"}},{"path":"pages/demo/exhibition/tour/index","type":"page","style":{"navigationBarTitleText":"Tour"}},{"path":"pages/demo/exhibition/trendarrow/index","type":"page","style":{"navigationBarTitleText":"TrendArrow"}},{"path":"pages/demo/exhibition/watermark/index","type":"page","style":{"navigationBarTitleText":"WaterMark"}},{"path":"pages/demo/feedback/actionsheet/index","type":"page","style":{"navigationBarTitleText":"Actionsheet"}},{"path":"pages/demo/feedback/backtop/index","type":"page","style":{"navigationBarTitleText":"BackTop"}},{"path":"pages/demo/feedback/dialog/index","type":"page","style":{"navigationBarTitleText":"Dialog"}},{"path":"pages/demo/feedback/drag/index","type":"page","style":{"navigationBarTitleText":"Drag"}},{"path":"pages/demo/feedback/infiniteloading/index","type":"page","style":{"navigationBarTitleText":"InfiniteLoading"}},{"path":"pages/demo/feedback/notify/index","type":"page","style":{"navigationBarTitleText":"Notify"}},{"path":"pages/demo/feedback/swipe/index","type":"page","style":{"navigationBarTitleText":"Swipe"}},{"path":"pages/demo/feedback/switch/index","type":"page","style":{"navigationBarTitleText":"Switch"}},{"path":"pages/demo/feedback/toast/index","type":"page","style":{"navigationBarTitleText":"Toast"}},{"path":"pages/demo/layout/divider/index","type":"page","style":{"navigationBarTitleText":"Divider"}},{"path":"pages/demo/layout/grid/index","type":"page","style":{"navigationBarTitleText":"Grid"}},{"path":"pages/demo/layout/layout/index","type":"page","style":{"navigationBarTitleText":"Layout"}},{"path":"pages/demo/layout/sticky/index","type":"page","style":{"navigationBarTitleText":"Sticky"}},{"path":"pages/demo/nav/elevator/index","type":"page","style":{"navigationBarTitleText":"Elevator"}},{"path":"pages/demo/nav/fixednav/index","type":"page","style":{"navigationBarTitleText":"Fixednav"}},{"path":"pages/demo/nav/indicator/index","type":"page","style":{"navigationBarTitleText":"Indicator"}},{"path":"pages/demo/nav/menu/index","type":"page","style":{"navigationBarTitleText":"Menu"}},{"path":"pages/demo/nav/navbar/index","type":"page","style":{"navigationBarTitleText":"NavBar"}},{"path":"pages/demo/nav/pagination/index","type":"page","style":{"navigationBarTitleText":"Pagination"}},{"path":"pages/demo/nav/sidenavbar/index","type":"page","style":{"navigationBarTitleText":"SideNavbar"}},{"path":"pages/demo/nav/tabbar/index","type":"page","style":{"navigationBarTitleText":"TabBar"}},{"path":"pages/demo/nav/tabs/index","type":"page","style":{"navigationBarTitleText":"Tabs"}}],"globalStyle":{"navigationBarBackgroundColor":"@navBgColor","navigationBarTextStyle":"@navTxtStyle","navigationBarTitleText":"NutUi","backgroundColor":"@bgColor","backgroundTextStyle":"@bgTxtStyle","backgroundColorTop":"@bgColorTop","backgroundColorBottom":"@bgColorBottom","navigationStyle":"default"},"subPackages":[]} \ No newline at end of file diff --git a/example/src/pages/demo/dentry/codeinput/index.vue b/example/src/pages/demo/dentry/codeinput/index.vue new file mode 100644 index 00000000..cb17bec2 --- /dev/null +++ b/example/src/pages/demo/dentry/codeinput/index.vue @@ -0,0 +1,74 @@ + + + + + +{ + "style": { + "navigationBarTitleText": "CodeInput" + } +} + diff --git a/example/src/pages/demo/layout/sticky/index.vue b/example/src/pages/demo/layout/sticky/index.vue index b94a9b34..a9b372fa 100644 --- a/example/src/pages/demo/layout/sticky/index.vue +++ b/example/src/pages/demo/layout/sticky/index.vue @@ -33,10 +33,10 @@ export default defineComponent({ .sticky-demo { overflow: auto !important; } - .sticky-container { width: 100%; height: 300px; + background-color: #fff; } diff --git a/packages/nutui/components/_utils/style.ts b/packages/nutui/components/_utils/style.ts index af73992d..3630561c 100644 --- a/packages/nutui/components/_utils/style.ts +++ b/packages/nutui/components/_utils/style.ts @@ -1,5 +1,5 @@ import { hyphenate } from './common' -import { isString } from './is' +import { isNumber, isString } from './is' export type NormalizedStyle = Record @@ -36,3 +36,10 @@ export function stringifyStyle(styles: NormalizedStyle | string | undefined): st } return ret } + +export function getPx(value: string | number, unit = false) { + if (isNumber(value)) + return unit ? `${value}px` : Number(value) + + return unit ? `${Number.parseInt(value)}px` : Number.parseInt(value) +} diff --git a/packages/nutui/components/barrage/barrage.ts b/packages/nutui/components/barrage/barrage.ts index a7a736f2..43e23c47 100644 --- a/packages/nutui/components/barrage/barrage.ts +++ b/packages/nutui/components/barrage/barrage.ts @@ -1,7 +1,5 @@ import type { ExtractPropTypes } from 'vue' -const { theme } = uni.getSystemInfoSync() - export const barrageProps = { danmu: { type: Array, diff --git a/packages/nutui/components/codeinput/codeinput.ts b/packages/nutui/components/codeinput/codeinput.ts new file mode 100644 index 00000000..4f2ed894 --- /dev/null +++ b/packages/nutui/components/codeinput/codeinput.ts @@ -0,0 +1,90 @@ +import type { ExtractPropTypes, PropType } from 'vue' +import { isString } from '../_utils' + +export const codeinputProps = { + // 键盘弹起时，是否自动上推页面 + adjustPosition: { + type: Boolean, + default: true, + }, + // 最大输入长度 + maxlength: { + type: [String, Number], + default: 4, + }, + // 是否用圆点填充 + dot: { + type: Boolean, + default: false, + }, + // 显示模式，box-盒子模式，line-底部横线模式 + mode: { + type: String as PropType<'box' | 'line'>, + default: 'box', + }, + // 是否细边框 + hairline: { + type: Boolean, + default: false, + }, + // 字符间的距离 + space: { + type: [String, Number], + default: 10, + }, + // 预置值 + modelValue: { + type: [String, Number], + default: '', + }, + // 是否自动获取焦点 + focus: { + type: Boolean, + default: false, + }, + // 字体是否加粗 + bold: { + type: Boolean, + default: false, + }, + // 字体颜色 + customColor: { + type: String, + default: '#606266', + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: 18, + }, + // 输入框的大小，宽等于高 + size: { + type: [String, Number], + default: 35, + }, + // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true + disabledKeyboard: { + type: Boolean, + default: false, + }, + // 边框和线条颜色 + borderColor: { + type: String, + default: '#c9cacc', + }, + // 是否禁止输入"."符号 + disabledDot: { + type: Boolean, + default: true, + }, +} + +export type CodeInputProps = ExtractPropTypes + +export const codeinputEmits = { + change: (val: string) => isString(val), + input: (val: string) => isString(val), + finish: (val: string) => isString(val), +} + +export type CodeInputEmits = typeof codeinputEmits diff --git a/packages/nutui/components/codeinput/codeinput.vue b/packages/nutui/components/codeinput/codeinput.vue new file mode 100644 index 00000000..dbaac36c --- /dev/null +++ b/packages/nutui/components/codeinput/codeinput.vue @@ -0,0 +1,137 @@ + + + + + + + diff --git a/packages/nutui/components/codeinput/index.scss b/packages/nutui/components/codeinput/index.scss new file mode 100644 index 00000000..bbff0926 --- /dev/null +++ b/packages/nutui/components/codeinput/index.scss @@ -0,0 +1,76 @@ +.nut-code-input { + position: relative; + display: flex; + overflow: hidden; + + &__item { + position: relative; + display: flex; + align-items: center; + justify-content: center; + + &__text { + font-size: 15px; + color: $code-input-content-color; + } + + &__dot { + width: 7px; + height: 7px; + background-color: $title-color2; + border-radius: 100px; + } + + &__line { + position: absolute; + bottom: 0; + width: 40px; + height: 4px; + background-color: $code-input-content-color; + border-radius: 100px; + } + + /* #ifndef APP-PLUS */ + &__cursor { + position: absolute; + top: 50%; + left: 50%; + width: $code-input-cursor-width; + height: $code-input-cursor-height; + transform: translate(-50%, -50%); + animation: $code-input-cursor-animation-duration nut-cursor-flicker infinite; + } + + /* #endif */ + + } + + &__input { + // 之所以需要input输入框，是因为有它才能唤起键盘 + // 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容 + position: absolute; + top: 0; + left: -325px; + width: 700px; + text-align: left; + background-color: transparent; + } +} + +/* #ifndef APP-PLUS */ +// stylelint-disable-next-line keyframes-name-pattern +@keyframes nut-cursor-flicker { + 0% { + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +/* #endif */ \ No newline at end of file diff --git a/packages/nutui/components/codeinput/index.ts b/packages/nutui/components/codeinput/index.ts new file mode 100644 index 00000000..2849b977 --- /dev/null +++ b/packages/nutui/components/codeinput/index.ts @@ -0,0 +1 @@ +export type * from './codeinput' diff --git a/packages/nutui/global.d.ts b/packages/nutui/global.d.ts index bf0e330c..85b8400c 100644 --- a/packages/nutui/global.d.ts +++ b/packages/nutui/global.d.ts @@ -103,6 +103,8 @@ declare module '@vue/runtime-core' { NutTrendArrow: typeof import('./components/trendarrow/trendarrow.vue')['default'] NutUploader: typeof import('./components/uploader/uploader.vue')['default'] NutWatermark: typeof import('./components/watermark/watermark.vue')['default'] + NutCodeInput: typeof import('./components/codeinput/codeinput.vue')['default'] + } // interface ComponentCustomProperties {} diff --git a/packages/nutui/styles/variables.scss b/packages/nutui/styles/variables.scss index 4d93ce77..efa821ac 100644 --- a/packages/nutui/styles/variables.scss +++ b/packages/nutui/styles/variables.scss @@ -975,4 +975,13 @@ $invoice-padding: var(--nut-invoice-padding, 10px 10px 20px) !default; $trendarrow-font-size: var(--nut-trendarrow-font-size, 14px) !default; $trendarrow-before-icon-margin: var(--nut-trendarrow-before-icon-margin, 4px) !default; + +// CodeInput +$code-input-cursor-width: var(--nut-code-input-cursor-width, 1px) !default; +$code-input-cursor-height: var(--nut-code-input-cursor-height, 40%) !default; +$code-input-cursor-animation-duration: 1s; +$code-input-cursor-animation-name: nut-cursor-flicker; +$code-input-content-color: var(--nut-code-content-color, #606266) !default;; + + @import './mixins/index'; \ No newline at end of file