├── screenshot
    └── 1.gif
├── .gitignore
├── package.json
├── README.md
├── wepy.config.js
└── pwdfield.wpy


/screenshot/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/colmugx/wepy-com-pwdfield/HEAD/screenshot/1.gif


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # https://git-scm.com/docs/gitignore
2 | # https://help.github.com/articles/ignoring-files
3 | # Example .gitignore files: https://github.com/github/gitignore
4 | /bower_components/
5 | /node_modules/
6 | .DS_Store


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wepy-com-pwdfield",
 3 |   "version": "0.1.0",
 4 |   "description": "wepy component, for use in password field.",
 5 |   "main": "pwdfield.wpy",
 6 |   "author": "ColMugX",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/ColMugX/wepy-com-pwdfield"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wepy-com-pwdfield
 2 | 
 3 | [![NPM](https://nodei.co/npm/wepy-com-pwdfield.png)](https://nodei.co/npm/wepy-com-pwdfield/)
 4 | 
 5 | > 适用于房间号输入，验证码输入，密码等有位数限制明密文输入框
 6 | 
 7 | 
 8 | ![](/screenshot/1.gif)
 9 | 
10 | ## 安装 Install
11 | 
12 | > npm install -S wepy-com-pwdfield
13 | 
14 | ## 使用 Usage
15 | 
16 | ```js
17 | import Pwdfield from 'wepy-com-pwdfield'
18 | 
19 | export ...
20 | 
21 |     components = {
22 |       pwdfield: Pwdfield
23 |     }
24 | ```
25 | 
26 | ```vue
27 | <pwdfield :sixdig="sixdig" :display="display" color="#444751" @value="handleValue" />
28 | ```
29 | 默认是选择数字，从`1`到`4`，颜色是`#444751`
30 | 
31 | ## 配置 Options
32 | 
33 | ### Api
34 | 
35 | | 参数       | 说明               | 类型              | 可选值         | 默认值     |
36 | | -------- | ---------------- | --------------- | ----------- | ------- |
37 | | sixdig    | 开启六位数 | Boolean | -           | -       | false
38 | | display    | 明密文         | Boolean        | -           | true       |
39 | | color  | 边框颜色           | String          | -           | #444751 |
40 | 
41 | ### Event
42 | 
43 | | 参数        | 说明       | 返回值              |
44 | | --------- | -------- | ---------------- |
45 | | value | 实时获取填写变化 | String |
46 | 


--------------------------------------------------------------------------------
/wepy.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | var prod = process.env.NODE_ENV === 'production'
 3 | 
 4 | module.exports = {
 5 |   wpyExt: '.wpy',
 6 |   build: {
 7 |     web: {
 8 |       htmlTemplate: path.join('src', 'index.template.html'),
 9 |       htmlOutput: path.join('web', 'index.html'),
10 |       jsOutput: path.join('web', 'index.js')
11 |     }
12 |   },
13 |   resolve: {
14 |     alias: {
15 |       '@': path.join(__dirname, 'src')
16 |     },
17 |     modules: ['node_modules']
18 |   },
19 |   eslint: true,
20 |   compilers: {
21 |     babel: {
22 |       sourceMap: true,
23 |       presets: [
24 |         'env'
25 |       ],
26 |       plugins: [
27 |         'transform-class-properties',
28 |         'transform-decorators-legacy',
29 |         'transform-object-rest-spread',
30 |         'transform-export-extensions',
31 |       ]
32 |     }
33 |   },
34 |   plugins: {
35 |   },
36 |   appConfig: {
37 |     noPromiseAPI: ['createSelectorQuery']
38 |   }
39 | }
40 | 
41 | if (prod) {
42 | 
43 |   delete module.exports.compilers.babel.sourcesMap;
44 | 
45 |   // 压缩js
46 |   module.exports.plugins = {
47 |     uglifyjs: {
48 |       filter: /\.js$/,
49 |       config: {
50 |       }
51 |     },
52 |     imagemin: {
53 |       filter: /\.(jpg|png|jpeg)$/,
54 |       config: {
55 |         jpg: {
56 |           quality: 80
57 |         },
58 |         png: {
59 |           quality: 80
60 |         }
61 |       }
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/pwdfield.wpy:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view
 3 |     class="band-pwdfield"
 4 |     style="border-color:{{color}}">
 5 |     <input
 6 |       type="number"
 7 |       class="band-pwdfield-input"
 8 |       maxlength="{{sixdig ? 6 : 4}}"
 9 |       password="{{!display}}"
10 |       @input="handleInput" />
11 |     <repeat
12 |       for="{{sixdig ? 6 : 4}}"
13 |       item="i"
14 |       key="{{currentValue[i]}}">
15 |       <view
16 |         class="band-pwdfield-item"
17 |         style="border-color:{{color}};height:{{height}}">
18 |         {{display ? currentValue[i] : secret[i]}}
19 |       </view>
20 |     </repeat>
21 |   </view>
22 | </template>
23 | 
24 | <script>
25 | import wepy from "wepy";
26 | export default class PwdField extends wepy.component {
27 |   props = {
28 |     display: {
29 |       type: Boolean,
30 |       default: true
31 |     },
32 |     sixdig: {
33 |       type: Boolean,
34 |       default: false
35 |     },
36 |     height: String,
37 |     color: String
38 |   };
39 |   data = {
40 |     currentValue: "",
41 |     secret: ""
42 |   };
43 |   watch = {
44 |     currentValue(val) {
45 |       if (val.length == 0) return (this.secret = "");
46 |       const l = val => (val == 1 ? "●" : "●" + l(val - 1));
47 |       this.secret = l(val.length);
48 |       this.$emit("value", val);
49 |     }
50 |   };
51 |   methods = {
52 |     handleInput(e) {
53 |       this.currentValue = e.detail.value;
54 |     }
55 |   };
56 | }
57 | </script>
58 | 
59 | <style>
60 | .band-pwdfield {
61 |   position: relative;
62 |   display: flex;
63 |   flex-direction: row;
64 |   align-items: center;
65 |   border: 1px solid #444751;
66 |   border-radius: 6px;
67 | }
68 | .band-pwdfield .band-pwdfield-input {
69 |   z-index: 0;
70 |   position: absolute;
71 |   top: 0;
72 |   left: 0;
73 |   width: 100%;
74 |   height: 100%;
75 |   opacity: 0;
76 |   font-size: 1rpx;
77 |   color: transparent;
78 |   caret-color: transparent;
79 |   text-align: left;
80 | }
81 | .band-pwdfield .band-pwdfield-item {
82 |   flex: 1;
83 |   display: flex;
84 |   align-items: center;
85 |   justify-content: center;
86 |   color: inherit;
87 |   min-width: 40px;
88 |   min-height: 40px;
89 |   font-size: 16px;
90 |   border-right: 1px solid #444751;
91 | }
92 | .band-pwdfield .band-pwdfield-item:last-child {
93 |   border: 0;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------