Skip to content

Commit

Permalink
新增自定义提示框组件
Browse files Browse the repository at this point in the history
  • Loading branch information
john committed Apr 22, 2020
1 parent 37eb1ff commit ebae190
Show file tree
Hide file tree
Showing 16 changed files with 2,443 additions and 2,777 deletions.
4,949 changes: 2,200 additions & 2,749 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-particles": "^1.0.9",
"vue-router": "^3.1.6",
"vuex": "^3.2.0"
},
Expand All @@ -23,6 +22,7 @@
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"vue-particles": "^1.0.9",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
Expand Down
40 changes: 30 additions & 10 deletions src/assets/iconfont/iconfont.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1587540653939'); /* IE9 */
src: url('iconfont.eot?t=1587540653939#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOQAAsAAAAAB5AAAANCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCeIJJATYCJAMMCwgABCAFhG0HNxuQBsgekqQb4pzDOQAOiKCAIvgaY7/v7hDRJJoYOt5JopFEEw1JrDGdIUQyJVqXLyUwtL/33gcxmGmJUoKU6CSlrYFN2ljTFND2qjAli7KKULVD+ZAnyKcDOWEm1OyEZZ/ncnrXEJ/fslzmWH7UCzAOKNA9aEwKAy2QgLxh7IKWuJ9ArUFqoCWH0w0UFeawQOxHmgoUMxaloT5UC5UVc4t4AEjV6RK2C7gPvh//wXRgSCoyc+zK3lqH2ZfWDQ1e8F/AxyOAdDoX2CIypgCF2K30rMtEmSlwtaom21xeqQhpqvj/P4FE01Vu9I+XiEpmbT0Yg9nEl5bDJ/imnSGBDCpRcAbcQWb7HbJopVHs08vQ07nb6akQ4OLtwv3szNXjbaVqCRSMMOErq8cg6HEsGNZ+qEeYORbBu04MidNH0WOLi4pDePy1/MD8vPKEtEPQLmjmNCvVNzNdXT+VG1q4BQDkNtMLCvjitfKgQqitjT2maOre1MoaBWt1ijrFfbdoTb6iE+eccUNopar2U0WQc/EeBVlC73iQ86wndDW6FVZEd05kGYEM2elOhG11wWd2H3Zn4l1wwfuCxxdme6KtXk0zQ2zjD+bRTLmZ8kvR56aCLHUozGKn5rn+/9BwpD7iybWWI9gafZ0QayRc68+ia0y2zm2IKquw+Vn0omxWPgMCAH638wluCnI/uRqO+Du/cbyV1fcnm71i8AV87tAnYPh3u0B3m+pz9wb/QtqxqWh6WFsUiSMxfNnyfbkSMFqLP9AIra6G6zo61xKqdSRIqgwgqzZEFuYUKtSZQaVqs6g1yXFxnTZJMqLUYEIpQGg2haTRK7Jme2RhXqJCp2dUag44aq0Gfc06IxGJs00iRUhHNRPt4DAwbLuUw/ozmVdP4bQ8YN0RJ3Ycxxpa+fyWAuIpJiRp5kRSDDSSQh834DDyvBCjpNAhTQZWikTToWZY1ZMGWrwPZYsYUQiiQ0FeoUiaUMDw2oty4fNnxHTlUXADpSp4h7CE3T3SpkGrA7nVBJ0ot3JOsiemiRTCgMKwkA85ABfxrEwIJVT3chCNGIgYkIpMaaJWYV01g+V1/vvtgFrmljlS5CgqD0I1JsmmJhMDAAAA') format('woff2'),
url('iconfont.woff?t=1587540653939') format('woff'),
url('iconfont.ttf?t=1587540653939') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587540653939#iconfont') format('svg'); /* iOS 4.1- */
src: url('iconfont.eot?t=1587564247382'); /* IE9 */
src: url('iconfont.eot?t=1587564247382#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASYAAsAAAAACbAAAARLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqFaIUaATYCJAMgCxIABCAFhG0HZBuICBEVnM3JfhbYzRfR06xnIqVricL+W7/GTzkHwfP03ue5mVkJ7S/gl62AFBRjwDXvvsv+6a1ikWLjFGvCkY0233dqXYO1gAgVZsHS3uCTu853suUn6cZOgIC6vz9UzQaLz2fJdvk/a29cg8LhUDBgo3tbr2QtSAGnoNUidt0kHyK2nrwbAnAnIxMpWbpiTVyRSA4SgLRr3bIxri0b0kyzoEGUkTM1nIgTmjHKOMuECfnHyxsKcQUGsiK5V9UWpZpR9Ll+PlxZtoV66o21Pw9gnQcUIBPQQEaO+gajylwmCiPYrDkA3mgIKPtCcr+Wz9s97/F8uG2jTWvbyemCQ/T+xQOFhIAKkVGAOJPoPDVqs7wLeK4lFwo8d9bS17eEBQP6tpBR9e1gQaDvAQtO0A+HnjtMdt3fF/AHLjOR0oxasKAgIt8uePmIp6fW/v6+nmHFdTx921675rhxI+/6dfPq1ZqNz46unGWsML850jtGbjUdVc2a1fPMGo68voNK2tZ67qKHuItHX3cuWRWJw100PPUVa83fP3pvpLUuCWvVmDUiKzY0NT5XS3r/r8erJTfK+Pyutd3H82rOmLFiWdC0WYGhNa3QqYnLg6fPFjN8usyuPXVrcLZizZhVobMOSiRB4Q7WEdQmnlXfnD56pRXkmDYmpOWM+dsDw+sZx4FWYznK21Lqo3nlRsbJeFlGo3ZPt8/aPihz0S2Z5EtdfE1UoWYF5F/c4V0yY48ShlTGVv3xo1ZvNTFUdcWoLxPTwY8m93JU14yMAgMbOV2d5yPiM/wymTB+WV8BSp8oEw40Y03xNYQUD6vj54h1+NUJK55/y2gpWpxwlEnKNmx7iXjjhoJ6iY6hqv/uJye1+DmxLWeWcWu8VkVMaViUhhVKe+rLgw0P57zDd61/dqj0IP2Bdj1PmYXQHquK7tN//+p9HKVYqerXH3Zo0mR3TIvoNQMGrI5d7ez8fvXq9/wDYO8XN6jiACrdWA32NbVGZeQWS+QRAEwyZj6oNEPRP97nYMC6Lpsb+my+aR4aALePd7yhx2xLYnveFQGQ5X8zOXFCh8rE7qr9weSeCMCVEQW+JwvufA78vUL+3N+nIYicAUFryS0wUElBoZETNbUEJ0xGcEZjD+4UlDnfg5AuKKjdAOkMY0A8NoCAwxdEPM4RJeo9kEl4BwqeKBDuvHS84t6pZncROENJ109qPI9BOG1XND+geu2dNJU54wWiTZLyJOsW7zFC9nGMvlWFWaAgPNAdux/6nikKt/CW1GbxnKZh7I0Sz8Nk50KAY6BErj6RhsdGIV1sdr33fwCVVz1HZnoGki9AqGZ9kktkBOK9biT1PJfN6k2lYEzQ9wsEG5A7eKDnOUbi+K4WeCZRb8hEZ6k2K1B1yfENwyu9xGSykzxlk0CREmUqVKlRx2KFLH3PmWXRPIiXb6JTfWcp1+9OxmaslhBhWeur91CdTAAA') format('woff2'),
url('iconfont.woff?t=1587564247382') format('woff'),
url('iconfont.ttf?t=1587564247382') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587564247382#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
Expand All @@ -15,11 +15,31 @@
-moz-osx-font-smoothing: grayscale;
}

.icon-secret:before {
content: "\e530";
.icon-user:before {
content: "\e66c";
}

.icon-user:before {
content: "\e612";
.icon-close:before {
content: "\e667";
}

.icon-info:before {
content: "\e604";
}

.icon-password:before {
content: "\e606";
}

.icon-warning:before {
content: "\e676";
}

.icon-error:before {
content: "\e686";
}

.icon-success:before {
content: "\e66b";
}

Binary file modified src/assets/iconfont/iconfont.eot
Binary file not shown.
19 changes: 17 additions & 2 deletions src/assets/iconfont/iconfont.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/assets/iconfont/iconfont.ttf
Binary file not shown.
Binary file modified src/assets/iconfont/iconfont.woff
Binary file not shown.
Binary file modified src/assets/iconfont/iconfont.woff2
Binary file not shown.
6 changes: 3 additions & 3 deletions src/components/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import bgAnimation from './bgAnimation'

const components = {
bgAnimation,
// particles
bgAnimation

};

const install = (Vue = {}) => {
Expand All @@ -11,11 +11,11 @@ const install = (Vue = {}) => {
Vue.component(components[component].name, components[component]);
});

Vue.prototype.$notice = Notification;
install.installed = true;
};

install.installed = false;

if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
install.installed = true;
Expand Down
Empty file added src/components/modal/index.vue
Empty file.
31 changes: 31 additions & 0 deletions src/components/toast/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Vue from 'vue'
import Toast from './index.vue'

const ToastMsg = Vue.extend(Toast)

Toast.install = (options, type) => {
if (options === undefined || options === null) {
options = {
content: ''
}
} else if (typeof options === 'string' || typeof options === 'number') {
options = {
content: options
}
if (type !== undefined && options !== null) {
options.type = type
}
}

let instance = new ToastMsg({
data: options
}).$mount()

document.body.appendChild(instance.$el)

Vue.nextTick(() => {
instance.visible = true
})
}

export default Toast.install
99 changes: 99 additions & 0 deletions src/components/toast/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<template>
<transition name="fade">
<div class="toast-container" v-if="visible">
<div class="toast" :class="type">
<div class="content">
<i class="iconfont" :class="'icon-' + type"></i>
<span>{{ content }}</span>
</div>
<!-- <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i> -->
</div>
</div>
</transition>
</template>

<script>
export default {
name: 'Toast',
data() {
return {
content: '',
time: 3000,
visible: false,
type: 'error', //四种类型:info, success, warning, error
hasClose: true,
}
},
mounted() {
this.close();
},
methods: {
close () {
setTimeout(() =>{
this.visible = false;
}, this.time);
}
}
}
</script>

<style lang="scss" scoped>
/* 动画效果 淡入淡出 */
.fade-enter-active, .fade-leave-active{
transition: all 0.5s ease;
}
.fade-enter, .fade-leave-active{
opacity: 0;
}
.toast-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
.toast {
width: 340px;
padding: 20px;
border-radius: 6px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
.content {
span {
padding-left: 10px;
}
}
&.info {
background: #edf2fc;
border: 1px solid #e0eafc;
color: #909399;
}
&.success {
background: #f0f9eb;
border: 1px solid #e7f9de;
color: #67c23a;
}
&.warning {
background: #fdf6ec;
border: 1px solid #f9ecda;
color: #e6a23c;
}
&.error {
background: #fef0f0;
border: 1px solid #fbdfdf;
color: #f56c6c;
}
.close {
cursor: pointer;
color: #909399
}
}
}
</style>
2 changes: 2 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import store from './store'
import Axios from "axios";
import vueParticles from 'vue-particles'
import Vcomp from './components/index'
import Toast from './components/toast'
import $ from 'jquery'

import '@/assets/styles/base.scss'
Expand All @@ -16,6 +17,7 @@ Vue.use(Vcomp)
Vue.config.productionTip = false

Vue.prototype.$Axios = Axios
Vue.prototype.$Toast = Toast

new Vue({
router,
Expand Down
17 changes: 10 additions & 7 deletions src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Login',
component: Login
component: () => import('@/views/Login.vue')
},
// {
// path: '/Home',
// name: 'Home',
// component: () => import('../views/Home.vue')
// }
{
path: '/login',
redirect: '/'
},
{
path: '/home',
name: 'Home',
component: () => import('@/views/Home.vue')
}
]

const router = new VueRouter({
Expand Down
35 changes: 35 additions & 0 deletions src/views/Home.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<div class="home-container">
欢迎进入主页

</div>
</template>

<script>
export default {
name: 'Home',
components: {},
data() {
return {
}
},
computed: {
},
created() {},
mounted() {
},
methods: {
}
}
</script>

<style lang="scss" scoped>
.home-container {
}
</style>
20 changes: 15 additions & 5 deletions src/views/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
/>
</div>
<div class="item">
<i class="iconfont icon-secret"></i>
<i class="iconfont icon-password"></i>
<input
autocomplete="off"
type="password"
Expand Down Expand Up @@ -73,7 +73,8 @@ export default {
data() {
return {
userName: 'admin',
userPwd: '123456'
userPwd: '123456',
showModal: false
}
},
computed: {
Expand All @@ -86,14 +87,23 @@ export default {
},
methods: {
login() {
console.log('login')
login () {
if (this.userName == 'admin' && this.userPwd == '123456') {
this.$router.push({
path: '/home'
})
} else {
this.$Toast({
content: '请输入正确的用户名和密码',
type: 'error'
})
}
}
}
}
</script>

<style lang="scss">
<style lang="scss" scoped>
.login-container {
.layer {
position: absolute;
Expand Down

0 comments on commit ebae190

Please sign in to comment.