提交 7663cce5 authored 作者: 王鹏飞's avatar 王鹏飞

add example config file

上级 2d214e28
{
"semi": false,
"singleQuote": true
}
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset',
['@babel/preset-env', { modules: false }]
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
] ]
} }
<template>
<div id="app">
<vue-login></vue-login>
</div>
</template>
<script>
export default {
name: 'app',
components: {}
}
</script>
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import VueLogin from '../src/index'
Vue.use(VueLogin)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
render: h => h(App), render: h => h(App)
}).$mount('#app') }).$mount('#app')
...@@ -8,7 +8,10 @@ ...@@ -8,7 +8,10 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@babel/preset-env": "^7.7.7",
"@ezijing/vue-form": "^0.1.5",
"core-js": "^3.4.3", "core-js": "^3.4.3",
"element-ui": "^2.13.0",
"vue": "^2.6.10" "vue": "^2.6.10"
}, },
"devDependencies": { "devDependencies": {
...@@ -16,6 +19,7 @@ ...@@ -16,6 +19,7 @@
"@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0", "@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-plugin-component": "^1.1.1",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.0.0",
"sass": "^1.23.7", "sass": "^1.23.7",
......
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-login</title> <title>vue-login</title>
</head> </head>
<body> <body>
......
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style lang="scss">
#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="ezijing-component-wrapper">
<el-dialog
class="ezijing-dialog"
:visible.sync="dialogVisible"
:show-close="false"
:close-on-click-modal="false"
>
<components :is="activeComponent" @onLogin="login" @onRegister="register"></components>
</el-dialog>
</div>
</template>
<script>
import Login from './Login'
import Register from './Register'
export default {
name: 'VueLogin',
components: { Login, Register },
data() {
return {
dialogVisible: true,
openType: 1
}
},
computed: {
activeComponent() {
return this.openType ? 'login' : 'register'
}
},
methods: {
login() {
this.openType = 1
},
register() {
this.openType = 0
},
async logout() {}
}
}
</script>
<style lang="scss" scoped>
.ezijing-component-wrapper {
max-width: 480px;
margin: 0 auto;
background-color: #fff;
}
.ezijing-dialog {
::v-deep.el-dialog__header {
display: none;
}
::v-deep.el-dialog__body {
padding: 0;
}
}
</style>
\ No newline at end of file
<template>
<div class="ezj-login">
<div class="ezj-login-hd">
<ul class="ezj-login-hd__tabs">
<li
:class="{'ezj-login-hd__tab': true, 'is-active': loginType === 0}"
@click="handleChangeLogin(0)"
>账号登录</li>
<li
:class="{'ezj-login-hd__tab': true, 'is-active': loginType === 1}"
@click="handleChangeLogin(1)"
>手机验证码登录</li>
</ul>
</div>
<div class="ezj-login-bd">
<component :is="currentComponent"></component>
<el-button>登录</el-button>
<el-checkbox v-model="isRemember">记住我</el-checkbox>
<p>
没有账号?
<el-button type="text" @click="$emit('onRegister')">立即注册</el-button>
</p>
</div>
<div class="ezj-login-ft">
<p>其他登录方式</p>
</div>
</div>
</template>
<script>
import AccountLogin from '@/components/AccountLogin'
import PhoneLogin from '@/components/PhoneLogin'
export default {
name: 'ezj-login',
components: { AccountLogin, PhoneLogin },
props: {},
data() {
return {
isRemember: false,
loginType: 0
}
},
computed: {
currentComponent() {
return this.loginType === 0 ? 'AccountLogin' : 'PhoneLogin'
}
},
methods: {
handleChangeLogin(loginType) {
console.log(loginType)
this.loginType = loginType
}
}
}
</script>
<style lang="scss" scoped>
.ezj-login-hd {
border-bottom: 1px solid #f1f1f1;
}
.ezj-login-hd__tabs {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.ezj-login-hd__tab {
flex: 1;
text-align: center;
line-height: 40px;
border-left: 1px solid #f1f1f1;
cursor: pointer;
&:first-child {
border-left: none;
}
&.is-active {
text-decoration: underline;
}
}
.ezj-login-bd {
padding: 50px 0;
}
.ezj-login-ft {
border-top: 1px solid #d8dce6;
p {
margin: 0;
line-height: 50px;
text-align: center;
}
}
</style>
\ No newline at end of file
<template>
<div class="register">
<el-form ref="form" :model="form">
<el-form-item>
<el-input
v-model="form.account"
placeholder="2-30个字符,支持中英文、数字"
minlength="2"
maxlength="30"
>
<i slot="prefix" class="input-prefix">昵称</i>
</el-input>
</el-form-item>
<el-form-item>
<el-input
type="password"
v-model="form.password"
placeholder="6-20个字符,只能数字、字母、标点符号"
minlength="6"
maxlength="20"
>
<i slot="prefix" class="input-prefix">密码</i>
</el-input>
</el-form-item>
</el-form>
<el-button>注册</el-button>
<p>
已账号?
<el-button type="text" @click="$emit('onLogin')">请登录</el-button>
</p>
</div>
</template>
<script>
export default {
name: 'ezj-register',
props: {},
data() {
return {
form: {}
}
}
}
</script>
<style lang="scss" scoped>
.register {
::v-deep.el-input--prefix .el-input__inner {
padding-left: 40px;
}
.input-prefix {
font-style: normal;
}
}
</style>
\ No newline at end of file
!function(a,b,c){function d(a){var c="default";a.self_redirect===!0?c="true":a.self_redirect===!1&&(c="false");var d=b.createElement("iframe"),e="https://open.weixin.qq.com/connect/qrconnect?appid="+a.appid+"&scope="+a.scope+"&redirect_uri="+a.redirect_uri+"&state="+a.state+"&login_type=jssdk&self_redirect="+c+'&styletype='+(a.styletype || '')+'&sizetype='+(a.sizetype || '')+'&bgcolor='+(a.bgcolor || '')+'&rst='+(a.rst || '');e+=a.style?"&style="+a.style:"",e+=a.href?"&href="+a.href:"",d.src=e,d.frameBorder="0",d.allowTransparency="true",d.scrolling="no",d.width="300px",d.height="400px";var f=b.getElementById(a.id);f.innerHTML="",f.appendChild(d)}a.WxLogin=d}(window,document);
\ No newline at end of file
<template>
<div class="account-login">
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item>
<el-input v-model="ruleForm.login_name" placeholder="请输入邮箱或用户名">
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="ruleForm.password" placeholder="请输入密码">
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'AccountLogin',
data() {
return {
ruleForm: {
login_name: '',
password: ''
},
rules: {
login_name: [
{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' }
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
computed: {
form() {
return this.$refs['form']
}
},
methods: {
validate(...arg) {
return this.form.validate(arg)
}
}
}
</script>Í
\ No newline at end of file
<template>
<div class="argument">
<div class="agreement-content">
<p>紫荆教育十分重视您个人信息的保密性和安全性。我们将按照本隐私政策尽合理的努力保护您的个人信息(下称“个人信息”,定义见下文)的安全。本隐私政策中使用的“我们”均指紫荆教育。</p>
<p>本隐私政策仅适用于我们通过紫荆教育网站(下称“本网站”,包含ezijing.com域名下的所有内容和页面)收集的信息,不适用于我们可能通过其他方式向您收集的信息(例如,本隐私政策不适用于您可能通过电话、传真或日常信函向我们提供的信息)。</p>
<h5>用户名和发布</h5>
<p>您在我们网站上发表的评论和其他信息可能被本网站的其他访问者浏览和下载。为此,我们鼓励您在决定是否在其他参与者可浏览页面上发布可能显示您的身份的任何信息时慎重思考。</p>
<h5>关于在国外处理的同意</h5>
<p>通过访问本网站或向紫荆教育提供信息,您理解并明确同意我们为本隐私政策和紫荆教育服务条款所约定的目的在中华人民共和国、其他国家和地区收集、使用、披露和保存信息。您特此同意紫荆教育依本隐私政策收集、使用、披露和保存您的个人信息,包括但不限于在紫荆教育和本隐私政策所述的第三方、附属机构及分支机构之间转移您的个人数据。为进一步确定,关于本条所述的转移信息的任何同意应视为包含您同意将适用的个人信息转移至另一司法区域,该区域的隐私保护程度可能与您所在国家的隐私保护程度不同。 如果您不同意本隐私政策的条款,您无权访问、浏览或注册本网站。</p>
<p>如果您选择不向我们提供本网站为您提供各种服务所必要的信息,您可能无法创建用户帐号,我们可能无法向您提供该等服务。</p>
<h5>个人信息</h5>
<p>本隐私策略使用的“个人信息”,您使用本网站时(例如您注册用户帐号或经本网站进行交易时)可能向我们提供的关于您的任何信息,可能包括但不限于您的姓名、联系信息、性别、出生日期和职业。我们尽力把个人信息的收集范围控制在为满足商业和法律法规要求,为特定的本网站的行为所需要的范围之内。</p>
<h5>我们收集哪些信息以及我们如何使用这些信息</h5>
<p>当您注册用户帐号,参加在线课程,注册付费证明,向我们发送电子邮件和/或参与公共论坛时,我们将收集信息,包括上述个人信息。我们也收集关于学生表现和学习模式的使用信息。此外,我们还记录显示以下内容的信息:本网站哪些页面被访问,其被访问的顺序和被访问的时间,哪些超链接和其他用户界面控件被使用等。</p>
<p>我们可能登录本网站的每个用户所使用的IP地址、操作系统和浏览器软件,我们可能可以从IP地址确定用户的互联网服务提供商和其连接点的地理位置。我们将适用各种网络分析工具收集这些信息。一些信息将通过Cookie(即本网站可以接触到的、存在您电脑上的、存储着有关您的信息的小文本文件)收集。您应该能够控制您的Web浏览器如何以及是否接受Cookie。大多数浏览器都在工具栏上的“帮助”部分提供关于如何重置浏览器以拒绝Cookie的说明。如果您拒绝我们的Cookie,本网站的许多功能和服务可能无法正常工作。</p>
<h5>用于个性化和教学水平提高</h5>
<p>我们的目标是尽可能为现在和未来的访问者提供最好的学习体验。为进一步实现此目标,我们有时会向不同的用户呈现不同版本的课程资料和软件。之所以这么做,是为了向个人学生提供个性化体验(评估学生的学习水平和学习风格,为其呈现最合适的资料),评估我们的课程资料的有效性,增进我们对学习过程的理解,以及提高我们提供的内容的有效性。我们可能发表或以其他形式公开此过程的结果,但除非本隐私政策另有约定允许,上述发表或公开披露均不会包含个人信息。</p>
<h5>链接到其他网站</h5>
<p>本网站包含了前往第三方(包括其他内容提供者以及某些服务供应商,如代表紫荆教育处理支付的服务商等)发布的网站的链接。这些网站不在我们控制范围之内,您确认并同意,除非本隐私政策中另有约定,我们不必为该等网站收集和使用您的信息承担责任。我们鼓励您在被转接至第三方网站时了解并查阅您访问和使用的每个网站的隐私政策。</p>
<h5>安全</h5>
<p>紫荆教育设计了一套保护其持有或控制的个人信息的程序,但是互联网传输方法或电子存储方法均非100%安全,因此紫荆教育无法保证个人信息的绝对安全。</p>
<h5>修改隐私政策</h5>
<p>请注意,我们可能随时审查并修改本隐私政策。本隐私政策修改后,本隐私政策链接将包含注记“更新(日期)”,这意味着您应查阅新条款,任何修改在本页面上发布后立即生效,并附更新后的生效日期。至少在更新后七(7)天内,本隐私政策链接将显示更新注记。在本网站进行任何修改之后,您访问本网站即视为您已同意修改后的本隐私政策和本网站的其他全部修改。如果您错过了前述通知,请定期访问本网页以了解本隐私政策的最新版本。</p>
<h5>未成年人</h5>
<p>本网站并非为13周岁以下的个人设计,紫荆教育并未明知而收集前述年龄段个人的数据。如果我们知悉任何13周岁以下个人进行了注册,我们将从记录中删除任何相关个人信息。</p>
<h5>隐私顾虑</h5>
<p>如果您有隐私顾虑,或者披露了您希望保密的数据,或者希望访问我们持有的关于您的信息,请联系我们:service@ezijing.com。</p>
<em>生效日期 :2014年9月15日</em>
</div>
</div>
</template>
<script>
export default {
name: 'RegisteArgument'
}
</script>
\ No newline at end of file
<template>
<el-button :disabled="currentDisabled" @click="start">{{curretnValue}}</el-button>
</template>
<script>
export default {
name: 'CountdownButton',
props: {
step: { type: Number, default: 1000 },
disabled: { type: Boolean, default: false },
seconds: { type: Number, default: 60 },
defaultValue: { type: String, default: '发送验证码' }
},
data() {
return {
currentDisabled: false,
currentSeconds: 0,
timer: null
}
},
computed: {
curretnValue() {
let longTime = this.seconds - this.currentSeconds
return longTime < this.seconds ? `${longTime} S` : this.defaultValue
}
},
methods: {
genTimer() {
this.timer && clearInterval(this.timer)
this.timer = setInterval(() => {
this.currentSeconds++
if (this.currentSeconds === this.seconds) {
this.stop()
}
}, this.step)
},
start() {
this.currentDisabled = true
this.genTimer()
},
stop() {
this.timer && clearInterval(this.timer)
this.currentSeconds = 0
this.currentDisabled = false
}
}
}
</script>
\ No newline at end of file
<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 lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="phone-login">
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item>
<el-input v-model="ruleForm.login_name" placeholder="请输入手机号">
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-input v-model="ruleForm.password" placeholder="请输入验证码">
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
<template slot="append">
<countdown-button></countdown-button>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
import CountdownButton from './CountdownButton'
export default {
name: 'PhoneLogin',
components: { CountdownButton },
data() {
return {
ruleForm: {
login_name: '',
password: ''
},
rules: {
login_name: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
password: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}
}
},
computed: {
form() {
return this.$refs['form']
}
},
methods: {
validate(...arg) {
return this.form.validate(arg)
}
}
}
</script>Í
\ No newline at end of file
<template>
<div class="phone-login"></div>
</template>
<script>
export default {
name: 'PhoneLogin'
}
</script>Í
\ No newline at end of file
import { Input, Checkbox, Button, Form, FormItem, Dialog } from 'element-ui'
import Login from './Index.vue'
Login.install = function(Vue) {
Vue.use(Input)
Vue.use(Checkbox)
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Dialog)
Vue.component(Login.name, Login)
}
export default Login
module.exports = {
pages: {
index: {
entry: 'examples/main.js'
}
}
}
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论