提交 bee29ccd 编写于 作者: TheWayYouMakeMeFeel's avatar TheWayYouMakeMeFeel

add new code

上级 519be2c3
module.exports = {
presets: [
'@vue/app'
]
}
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<vue-pwd :isDisplay="isDisplay"></vue-pwd>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
data(){
return {
isDisplay: true
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
import Vue from 'vue'
import vueTap from 'v-tap'
import App from './App.vue'
// 导入组件库
import vuePwd from './../packages/index'
// 注册组件库
Vue.use(vueTap)
Vue.use(vuePwd)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
<meta charset="utf-8">
<title>vuepwd demo</title>
<script src="./vuepwd.umd.js"></script>
<link rel="stylesheet" href="./vuepwd.css">
<script>
console.log(vuepwd)
</script>
此差异已折叠。
此差异已折叠。
[data-v-0b708dcc]{margin:0;padding:0}li[data-v-0b708dcc],ul[data-v-0b708dcc]{list-style:none;border:none}[data-v-0b708dcc]{-webkit-tap-highlight-color:rgba(255,255,255,0)}[data-v-0b708dcc],[data-v-0b708dcc]:after,[data-v-0b708dcc]:before{-webkit-box-sizing:border-box;box-sizing:border-box}.pwd-bg[data-v-0b708dcc]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.2)}.pwd-box[data-v-0b708dcc]{position:fixed;bottom:0;left:0;width:100%;height:410px;background:#fff;color:#333}.pwd-box h1[data-v-0b708dcc]{text-align:center;font-size:20px;padding:22px;font-weight:700}.pwd-box .pwd-list[data-v-0b708dcc]{overflow:hidden;padding:0 22px}.pwd-box .pwd-list li[data-v-0b708dcc]{width:16.66666667%;height:50px;line-height:50px;font-size:19px;float:left;background:#fff;border:1px solid #f0f0f0;border-left:none;text-align:center}.pwd-box .pwd-list li[data-v-0b708dcc]:first-child{margin-left:0;border-left:1px solid #f0f0f0}.pwd-box .pwd-link[data-v-0b708dcc]{margin-top:10px;text-align:right;color:#7f8389;font-size:15px;padding:0 22px}.pwd-box .pwd-keys[data-v-0b708dcc]{width:100%;background:#d1d5db;height:225px;position:absolute;bottom:0;padding-top:5px}.pwd-box .pwd-keys li[data-v-0b708dcc]{float:left;text-align:center;margin:0 0 5px 5px;margin-top:0;width:calc((100% - 20px)/3);height:50px;line-height:46px;background:#fff;border-radius:5px;border-bottom:1px solid #999;font-size:24px}.pwd-box .pwd-keys li.no-bg[data-v-0b708dcc]{background:none;border:none}.pwd-box .pwd-keys li.no-bg i[data-v-0b708dcc]{font-size:22px}.pwd-box .pwd-keys li[data-v-0b708dcc]:active{background:#f0f0f0}
\ No newline at end of file
此差异已折叠。
此差异已折叠。
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vuepwd"]=t():e["vuepwd"]=t()})("undefined"!==typeof self?self:this,function(){return function(e){var t={};function n(s){if(t[s])return t[s].exports;var r=t[s]={i:s,l:!1,exports:{}};return e[s].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,s){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(s,r,function(t){return e[t]}.bind(null,r));return s},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"1f96":function(e,t,n){"use strict";var s=n("3161"),r=n.n(s);r.a},"230e":function(e,t,n){var s=n("d3f4"),r=n("7726").document,i=s(r)&&s(r.createElement);e.exports=function(e){return i?r.createElement(e):{}}},3161:function(e,t,n){},"6a99":function(e,t,n){var s=n("d3f4");e.exports=function(e,t){if(!s(e))return e;var n,r;if(t&&"function"==typeof(n=e.toString)&&!s(r=n.call(e)))return r;if("function"==typeof(n=e.valueOf)&&!s(r=n.call(e)))return r;if(!t&&"function"==typeof(n=e.toString)&&!s(r=n.call(e)))return r;throw TypeError("Can't convert object to primitive value")}},7726:function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},"79e5":function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},"7f7f":function(e,t,n){var s=n("86cc").f,r=Function.prototype,i=/^\s*function ([^ (]*)/,o="name";o in r||n("9e1e")&&s(r,o,{configurable:!0,get:function(){try{return(""+this).match(i)[1]}catch(e){return""}}})},"86cc":function(e,t,n){var s=n("cb7c"),r=n("c69a"),i=n("6a99"),o=Object.defineProperty;t.f=n("9e1e")?Object.defineProperty:function(e,t,n){if(s(e),t=i(t,!0),s(n),r)try{return o(e,t,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},"9e1e":function(e,t,n){e.exports=!n("79e5")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},c69a:function(e,t,n){e.exports=!n("9e1e")&&!n("79e5")(function(){return 7!=Object.defineProperty(n("230e")("div"),"a",{get:function(){return 7}}).a})},cb7c:function(e,t,n){var s=n("d3f4");e.exports=function(e){if(!s(e))throw TypeError(e+" is not an object!");return e}},d3f4:function(e,t){e.exports=function(e){return"object"===typeof e?null!==e:"function"===typeof e}},fb15:function(e,t,n){"use strict";var s;(n.r(t),"undefined"!==typeof window)&&((s=window.document.currentScript)&&(s=s.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=s[1]));n("7f7f");var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.dispay?n("div",{staticClass:"pay-password"},[n("div",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.hide},expression:"{methods: hide}"}],staticClass:"pwd-bg"}),n("div",{staticClass:"pwd-box"},[n("h1",[e._v("输入支付密码")]),n("ul",{staticClass:"pwd-list"},[n("li",[e._v(e._s(e.password.length>=1?"":""))]),n("li",[e._v(e._s(e.password.length>=2?"":""))]),n("li",[e._v(e._s(e.password.length>=3?"":""))]),n("li",[e._v(e._s(e.password.length>=4?"":""))]),n("li",[e._v(e._s(e.password.length>=5?"":""))]),n("li",[e._v(e._s(e.password.length>=6?"":""))])]),n("div",{staticClass:"pwd-link"},[n("a",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.goto},expression:"{methods: goto}"}]},[e._v("忘记支付密码?")])]),n("ul",{staticClass:"pwd-keys"},[n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"1"},expression:"{methods: keysOn, key: '1'}"}]},[e._v("1")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"2"},expression:"{methods: keysOn, key: '2'}"}]},[e._v("2")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"3"},expression:"{methods: keysOn, key: '3'}"}]},[e._v("3")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"4"},expression:"{methods: keysOn, key: '4'}"}]},[e._v("4")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"5"},expression:"{methods: keysOn, key: '5'}"}]},[e._v("5")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"6"},expression:"{methods: keysOn, key: '6'}"}]},[e._v("6")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"7"},expression:"{methods: keysOn, key: '7'}"}]},[e._v("7")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"8"},expression:"{methods: keysOn, key: '8'}"}]},[e._v("8")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"9"},expression:"{methods: keysOn, key: '9'}"}]},[e._v("9")]),n("li",{staticClass:"no-bg"}),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"0"},expression:"{methods: keysOn, key: '0'}"}]},[e._v("0")]),n("li",{directives:[{name:"tap",rawName:"v-tap",value:{methods:e.keysOn,key:"del"},expression:"{methods: keysOn, key: 'del'}"}],staticClass:"no-bg"},[n("i",{staticClass:"iconfont slj-iconfontcha"})])])])]):e._e()},i=[],o={name:"vue-pwd",props:["isDisplay"],data:function(){return{password:[],dispay:this.isDisplay}},created:function(){},methods:{keysOn:function(e){"del"!=e.key?this.password.length<6&&e.key&&(this.password.push(e.key),6==this.password.length&&this.$emit("getData",{pwd:this.password})):this.password.pop()},tips:function(e){e?(this.dispay=!1,this.password=[]):(this.dispay=!0,this.password=[],alert("密码错误,请重新输入!")||(this.dispay=!1))},open:function(e){this.dispay=!!e},hide:function(){this.dispay=!1},goto:function(){this.$emit("link",{pwd:this.password})}}},a=o;n("1f96");function u(e,t,n,s,r,i,o,a){var u,d="function"===typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),s&&(d.functional=!0),i&&(d._scopeId="data-v-"+i),o?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},d._ssrRegister=u):r&&(u=a?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(d.functional){d._injectStyles=u;var c=d.render;d.render=function(e,t){return u.call(t),c(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return{exports:e,options:d}}var d=u(a,r,i,!1,null,"0b708dcc",null);d.options.__file="vue-pwd.vue";var c=d.exports;c.install=function(e){e.component(c.name,c)};var p=c,f=[p],l=function e(t){e.installed||f.map(function(e){return t.component(e.name,e)})};"undefined"!==typeof window&&window.Vue&&l(window.Vue);var v={install:l,vuePwd:p};t["default"]=v}})});
//# sourceMappingURL=vuepwd.umd.min.js.map
\ No newline at end of file
此差异已折叠。
此差异已折叠。
{
"name": "vue-pwd",
"version": "0.1.4",
"description": "iOS密码输入框,带键盘",
"private": false,
"author": "xiaoming_only",
"main": "lib/vuepwd.umd.min.js",
"keyword": "vue vuepwd vue-pwd",
"scripts": {
"serve": "vue-cli-service serve --disableHostCheck=true --host 0.0.0.0",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name vuepwd --dest lib packages/index.js",
"lint": "vue-cli-service lint"
},
"dependencies": {
"v-tap": "^3.0.3",
"vue": "^2.5.17"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
// 导入颜色选择器组件
import vuePwd from './vue-pwd'
// 存储组件列表
const components = [
vuePwd
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
vuePwd
}
\ No newline at end of file
// 导入组件,组件必须声明 name
import vuePwd from './vue-pwd.vue'
// 为组件提供 install 安装方法,供按需引入
vuePwd.install = function (Vue) {
Vue.component(vuePwd.name, vuePwd)
}
// 默认导出组件
export default vuePwd
\ No newline at end of file
<template>
<div class="pay-password" v-if="dispay">
<div class="pwd-bg" v-tap="{methods: hide}"></div>
<div class="pwd-box">
<h1>输入支付密码</h1>
<ul class="pwd-list">
<li>{{password.length >= 1 ? '' : ''}}</li>
<li>{{password.length >= 2 ? '' : ''}}</li>
<li>{{password.length >= 3 ? '' : ''}}</li>
<li>{{password.length >= 4 ? '' : ''}}</li>
<li>{{password.length >= 5 ? '' : ''}}</li>
<li>{{password.length >= 6 ? '' : ''}}</li>
</ul>
<div class="pwd-link">
<a v-tap="{methods: goto}">忘记密码?</a>
</div>
<ul class="pwd-keys">
<li v-tap="{methods: keysOn, key: '1'}">1</li>
<li v-tap="{methods: keysOn, key: '2'}">2</li>
<li v-tap="{methods: keysOn, key: '3'}">3</li>
<li v-tap="{methods: keysOn, key: '4'}">4</li>
<li v-tap="{methods: keysOn, key: '5'}">5</li>
<li v-tap="{methods: keysOn, key: '6'}">6</li>
<li v-tap="{methods: keysOn, key: '7'}">7</li>
<li v-tap="{methods: keysOn, key: '8'}">8</li>
<li v-tap="{methods: keysOn, key: '9'}">9</li>
<li class="no-bg"></li>
<li v-tap="{methods: keysOn, key: '0'}">0</li>
<li class="no-bg" v-tap="{methods: keysOn, key: 'del'}"><i class="iconfont slj-iconfontcha"></i></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'vue-pwd',
props: ['isDisplay'],
data(){
return {
password: [], // 存储密码的数组
dispay: this.isDisplay // 是否显示密码框
}
},
created(){},
methods: {
// 虚拟键盘按键事件
keysOn(d){
if(d.key != 'del'){
if(this.password.length < 6 && d.key){
this.password.push(d.key);
if(this.password.length == 6){
this.$emit('getData', {pwd: this.password}) // 当位数满6个时,触发父组件定义的事件,父组件定义事件的方法(v-on:getData="methods方法")
}
}
}else{
this.password.pop();
}
},
// 密码输入完成后,供父组件调用的方法(当密码正确时,关闭密码框,错误时弹出提示,并可重新输入)
// 此方法在父组件调用方法为 this.$refs.payPassword.tips(false); 参数为布尔值。
tips(bln){
if(bln){
this.dispay = false;
this.password = [];
}else{
this.dispay = true;
this.password = [];
if(!alert('密码错误,请重新输入!')){
this.dispay = false;
}
}
},
// 手动打开关闭密码框
open(bln){
if(bln) this.dispay = true;
else this.dispay = false;
},
hide(){
this.dispay = false;
},
goto(){
this.$emit('link', {pwd: this.password});
}
}
}
</script>
<style lang="less" scoped>
@fontsize: 15px;
*{margin: 0; padding: 0;}
ul,li{ list-style: none; border: none;}
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(255,255,255,0); }
*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.pwd-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .2);}
.pwd-box{position: fixed; bottom: 0; left: 0; width: 100%; height: 410px; background: #fff; color: #333;
h1{ text-align: center; font-size: @fontsize + 5; padding: 22px; font-weight: bold;}
.pwd-list{ overflow: hidden; padding: 0 22px;
li{ width: 100% / 6; height: 50px; line-height: 50px; font-size: @fontsize + 4; float: left; background: #fff; border: 1px #f0f0f0 solid; border-left: none; text-align: center;}
li:first-child{ margin-left: 0; border-left: 1px #f0f0f0 solid;}
}
.pwd-link{ margin-top: 10px; text-align: right; color: #7f8389; font-size: @fontsize; padding: 0 22px;}
.pwd-keys{ width: 100%; background: #d1d5db; height: 225px; position: absolute; bottom: 0; padding-top: 5px;
li{ float: left; text-align: center; margin: 0 0 5px 5px; margin-top: 0; width: calc((100% - 20px) / 3); height: 50px; line-height: 46px; background: #fff; border-radius: 5px; border-bottom: 1px #999 solid; font-size: @fontsize + 9;}
li.no-bg{ background: none; border:none;
i{ font-size: @fontsize + 7;}
}
li:active{ background: #f0f0f0;}
}
}
</style>
# preview.yml
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:
- port: 8080 # 应用的端口
run: npm i --registry=https://registry.npmmirror.com && npm run serve # 应用的启动命
command: # 使用此命令启动服务,且不执行run
root: ./ # 应用的启动目录
name: vue-demo # 应用名称
description: My First App。 # 应用描述
autoOpen: true # 打开工作空间时是否自动开启预览(优先级高于根级 autoOpen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-pwd</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-pwd doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 修改 src 目录 为 examples 目录
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 跳过检查host
devServer: {disableHostCheck: true},
// 扩展 webpack 配置,使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add(resolve('packages'))
.end()
.use('babel')
.loader('babel-loader');
}
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册