vue-new
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from "element-ui" import 'element-ui/lib/theme-chalk/index.css' import vuex from 'vuex' import axios from 'axios' Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(vuex); Vue.prototype.$ajax = axios var store = new vuex.Store({//store对象 state:{ logined:false } }) /* eslint-disable no-new */ new Vue({ el: '#app', router, store, //components: { App }, //template: '<App/>' render: h => h(App) })
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/components/home'
import about from '@/components/about'
import RoomContent from '@/components/RoomContent'
import SearchRooms from '@/components/SearchRooms'
import SignUp from '@/components/SignUp'
import Messages from '@/components/Messages'
import AddRoom from '@/components/AddRoom'
import AddRoom2 from '@/components/AddRoom2'
import PostRooms from '@/components/PostRooms'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:"/home",
component: home
},
{
path:"/room/:id",
//component: home
component: RoomContent
},
{
path:"/SearchRooms",
//component: home
component: SearchRooms
},
{
path: "/about",
component: about
},
{
path: "/signup",
component: SignUp
},
{
path: "/messages",
component: Messages
},
{
path: "/addroom",
component: AddRoom
},
{
path: "/addroom2",
component: AddRoom2
},
{
path: "/postrooms",
component: PostRooms
},
{
path: "/login",
component: Login
}
]
})
App.vue
<template> <div id="app"> <myMenu></myMenu> <router-view/> </div> </template> <script> import myMenu from './components/myMenu' import HelloWorld from './components/HelloWorld' export default { name: 'App', components : { "myMenu":myMenu, "HelloWorld":HelloWorld } } </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: 20px; } </style>
SearchRooms.vue
<template> <el-row id="Homepan"> <el-col :span="2">.</el-col> <el-col :span="20">. <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="查询条件" icon="el-icon-search" name="4"> <el-form ref="form" :model="sizeForm" label-width="80px" size="mini" > <el-form-item label="筛选"> <el-select v-model="value" placeholder="请选择区域"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="value" placeholder="请选择地铁"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="value" placeholder="请选择方式"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="value" placeholder="请选择房源"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-row > <el-form-item label="价格"> <el-col :span="2">.</el-col> <el-col :span="20"> <el-slider v-model="value9" range show-stops :max="6000" :step="500"> </el-slider> </el-col> <el-col :span="2">. </el-col> </el-form-item> </el-row> </el-form> </el-collapse-item> </el-collapse> <div class="am-list-news-bd"> <ul class="am-list"> <!--缩略图在标题左边--> <li class=" am-list-item-desced am-list-item-thumbed am-list-item-thumb-left"> <el-row> <el-col :span="6"> <div class="am-u-sm-3 am-list-thumb"> <router-link to="/room/2"> <img src="http://pic.ziroom.com/house_images/g2/M00/DE/CE/v800x600_ChAFfVpI40aAUyieAAhmlEWfWYo842.JPG" alt="我很囧，你保重....晒晒旅行中的那些囧！"/> </router-link> </div> </el-col> <el-col :span="16"> <div class=" am-u-sm-8 am-list-main"> <h3 class="am-list-item-hd"><router-link to="/room/2">雨花台区--雨花新村--南卧</router-link></h3> <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div> </div> </el-col> <el-col :span="2"></el-col> </el-row> </li> <li class=" am-list-item-desced am-list-item-thumbed am-list-item-thumb-left"> <el-row> <el-col :span="6"> <div class="am-u-sm-3 am-list-thumb"> <router-link to="/room/1"> <img src="http://pic.ziroom.com/house_images/g2/M00/DE/CE/v800x600_ChAFfVpI40uAQYC9AAJQYGaxGq8195.JPG" alt="我很囧，你保重....晒晒旅行中的那些囧！"/> </router-link> </div> </el-col> <el-col :span="16"> <div class=" am-u-sm-8 am-list-main"> <h3 class="am-list-item-hd"><router-link to="/room/1">雨花台区--双龙嘉园--南卧</router-link></h3> <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div> </div> </el-col> <el-col :span="2"></el-col> </el-row> </li> </ul> </div> <div class="block"> <span class="demonstration"></span> <el-pagination layout="prev, pager, next" :total="50"> </el-pagination> </div> </el-col> <el-col :span="2">.</el-col> </el-row> </template> <style type="text/css"> #Homepan img{ width:auto; height:auto; max-width:70%; max-height:70%; margin-top: 8%; margin-bottom: 8%； } #Homepan .am-panel-default { border-color: #ddd; } #Homepan .am-panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 0; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); } #Homepan .am-list-news-default { margin: 10px; } #Homepan .am-list-news-hd { padding-top: 1.2rem; padding-bottom: .8rem; } #Homepan .am-list-news-default .am-list .am-list-item-desced .am-list-item-text { margin-top: .5rem; color: #757575; } #Homepan .am-list li { position: relative; display: block; margin-bottom: -1px; background-color: #fff; border: 1px solid #dedede; border-width: 1px 0; } #Homepan .am-list-news-default .am-list .am-list-item-text { overflow: hidden; text-overflow: ellipsis; line-height: 1.3em; max-height: 2.6em; } #Homepan.am-list-item-text { line-height: 1.3; font-size: 1.1rem; color: #999; margin: 0; } #Homepan.am-list-news-default .am-list .am-list-item-thumb-left .am-list-thumb { padding-left: 0; } #Homepan.am-list .am-list-item-desced a, .am-list .am-list-item-thumbed a { padding-right: 0; } #Homepan a { color: #0e90d2; } #Homepan a, ins { text-decoration: none; } #Homepan a { background-color: transparent; } </style> <script> export default { data() { return { value9: [1000, 2000], sizeForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } }, methods: { formatTooltip(val) { alert(val); return val ; } } } </script>
RoomContent.vue
<template>
<el-row id="roomContent">
<el-col :span="4">.</el-col>
<el-col :span="16">.
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">南京</el-breadcrumb-item>
<el-breadcrumb-item>江宁</el-breadcrumb-item>
<el-breadcrumb-item>双龙嘉园南卧</el-breadcrumb-item>
</el-breadcrumb>
<div class="block">
<div>.</div>
<el-carousel trigger="click" height="280px" width="380px">
<el-carousel-item >
<img src="http://pic.ziroom.com/house_images/g2/M00/DE/CE/v800x600_ChAFfVpI40aAUyieAAhmlEWfWYo842.JPG">
<p>主卧</p>
</el-carousel-item>
<el-carousel-item >
<img src="http://pic.ziroom.com/house_images/g2/M00/DE/CE/v800x600_ChAFfVpI40uAQYC9AAJQYGaxGq8195.JPG">
</el-carousel-item>
</el-carousel>
</div>
<div data-am-widget="list_news" class="am-list-news am-list-news-default am-panel" >
<!--列表标题-->
<div class="am-list-news-hd am-cf ">
<h2>基本信息</h2>
</div>
<div class="am-list-news-bd">
<ul class="am-list">
<li class="am-g am-list-item-desced">
<div class="am-list-item-text am-list-item-dated"><strong>位置：</strong>雨花台-双龙嘉园</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>面积：</strong>10平方米</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>装修：</strong>精装修</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>户型：</strong>3室2厅1卫 合</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>楼层：</strong>3/18</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>房东身份：</strong>个人</div>
</li>
</ul>
</div>
</div>
<div data-am-widget="list_news" class="am-list-news am-list-news-default am-panel" >
<!--列表标题-->
<div class="am-list-news-hd am-cf">
<h2>描述信息</h2>
</div>
<div class="am-list-news-bd">
<ul class="am-list">
<li class="am-g am-list-item-desced">
<div class="am-list-item-text am-list-item-dated"><strong>编号：</strong>12323432434</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>周边描述：</strong>要出租的单间16到18平方米左右，配有一张床，一个衣柜，一个衣帽挂以及一个落地窗～视野很美～且此栋位于小区中心，远离马路，非常安静。</div>
</li>
<li class="am-g am-list-item-desced">
<div class="am-list-item-text"><strong>房间描述：</strong>小区位于富春江东街，恒山路，奥体大街交汇处，正门，后门均有公交站，距奥体东，中胜地铁站步行均在十五分钟左右。生活非常便利，出大门就是菜场超市便利店水果店～～距离缤润汇，中央商场，金奥国际购物中心，都非常非近，到河西万达坐公交三十分钟</div>
</li>
</ul>
</div>
</div>
<div data-am-widget="list_news" class="am-list-news am-list-news-default am-panel" >
<!--列表标题-->
<div class="am-list-news-hd am-cf">
<h2>配置信息</h2>
</div>
<div class="am-list-news-bd">
<el-tag>宽带</el-tag>
<el-tag>wifi</el-tag>
<el-tag>公卫</el-tag>
<el-tag>厨房</el-tag>
</div>
</div>
<div>{{dynamicSegment}}</div>
</el-col>
<el-col :span="4">.</el-col>
</el-row>
</template>
<script>
export default {
computed: {
dynamicSegment () {
return this.$route.params.id
}
}
}
</script>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
#roomContent h2 {
text-align:left;
font-size: 1.1em;
border-bottom: 1px solid #dedede;
}
#roomContent ul li {text-align:left}
#roomContent .am-list-news-bd {text-align:left}
#roomContent .am-panel-default {
border-color: #ddd;
}
#roomContent .am-panel {
border-top:1px dotted #dedede;
}
#roomContent .am-list-news-default {
margin: 10px;
margin-top: 30px;
background-color: #fff;
border-radius: 0;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
#roomContent .am-list-news-default .am-list .am-list-item-desced .am-list-item-text {
margin-top: .5rem;
color: #757575;
}
#roomContent ul{
padding-left: 0px;
}
#roomContent .am-list li {
margin: 5px;
position: relative;
display: block;
background-color: #fff;
border-bottom: 1px solid #dedede;
}
#roomContent .am-list-news-default .am-list .am-list-item-text {
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3em;
max-height: 2.6em;
}
#roomContent.am-list-item-text {
line-height: 1.3;
font-size: 1.1rem;
color: #999;
margin: 0;
}
#roomContent.am-list-news-default .am-list .am-list-item-thumb-left .am-list-thumb {
padding-left: 0;
}
#roomContent.am-list .am-list-item-desced a, .am-list .am-list-item-thumbed a {
padding-right: 0;
}
#roomContent a {
color: #0e90d2;
}
#roomContent a, ins {
text-decoration: none;
}
#roomContent a {
background-color: transparent;
}
</style>
myMenu.vue
<template> <el-row> <el-menu :default-active="activeIndex" class="el-menu-demo" id="myMenuid" mode="horizontal" @select="handleSelect"> <el-col :span="6">Luobov萝卜屋</el-col> <el-submenu index="1"> <template slot="title">南京</template> <el-menu-item index="1-1">北京</el-menu-item> <el-menu-item index="1-2">南京</el-menu-item> <el-menu-item index="1-3">杭州</el-menu-item> </el-submenu> <el-menu-item index="2"><router-link to="/SearchRooms">查询</router-link></el-menu-item> <el-menu-item index="3"><router-link to="/about">求组</router-link></el-menu-item> <el-col :span="2">.</el-col> <div v-if="!this.$store.state.logined"> <el-menu-item index="4"><router-link to="/signup"> 注册</router-link></el-menu-item> <el-menu-item index="5"><router-link to="/login">登陆</router-link></el-menu-item> </div> <div v-else> <el-menu-item index="6"><router-link to="/messages"><i class="el-icon-bell"></i>消息<i class="bg-info">(5)</i></router-link></el-menu-item> <el-submenu index="7"> <template slot="title">wang</template> <el-menu-item index="7-1"><i class="el-icon-edit"></i><router-link to="/postrooms">源编辑</router-link></el-menu-item> <el-menu-item index="7-2"><i class="el-icon-setting"></i>用户设置</el-menu-item> </el-submenu> <el-menu-item index="8"><i class="el-icon-arrow-right"></i>退出</el-menu-item> </div> </el-menu> </el-row> </template> <style type="text/css"> #myMenuid li { border-radius: 0; color: #0e90d2; background: 0 0; } #myMenuid a{ text-decoration:none; } </style> <script> export default { data() { return { activeIndex: '1', activeIndex2: '1', logined_prop:true }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); // alert(key); //if(key==5) this.logined_prop=true; // console.log(this.$store.state.logined); //alert(this.$store.state.logined); if(key==8) { this.$store.state.logined=false; //this.logined_prop=! this.logined_prop; } //lert(this.$store.state.logined); //this.logined_prop=!this.logined_prop; } } } </script>
PostRooms.vue
<template> <el-row id="PostRooms"> <el-col :span="5">.</el-col> <el-col :span="14"> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">源管理</el-breadcrumb-item> </el-breadcrumb> </div> <div class="text item"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="liid" label="ID" width="150"> </el-table-column> <el-table-column prop="posttime" label="最后修改时间" width="120"> </el-table-column> <el-table-column prop="city" label="城市" width="120"> </el-table-column> <el-table-column prop="courtname" label="小区名" width="120"> </el-table-column> <el-table-column label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button> <el-button @click="editClick(scope.row)" type="text" size="mini">编辑</el-button> <el-button type="text" size="mini">删除</el-button> </template> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="editClick">新增</el-button> </div> </div> </el-card> </el-col> <el-col :span="5">.</el-col> </el-row> </template> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card{ margin-top:30px; } </style> <script> export default { methods: { handleClick(row) { console.log(row); //alert(row.liid); this.$router.push("room/"+row.liid); }, editClick(row) { console.log(row); //alert(row.liid); this.$router.push("addroom"); } }, data() { return { tableData: [{ liid: '1033223211', posttime: '2016-05-03', city: '南京', areaname: '雨花台', courtname: '雨花台-翠岛花城' }, { liid: '1033223212', posttime: '2017-05-03', city: '南京', areaname: '雨花台', courtname: '雨花台-双龙嘉园' }] } } } </script>
Login.vue
<template> <el-row id="signup"> <el-col :span="5">.</el-col> <el-col :span="14"> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">用户</el-breadcrumb-item> <el-breadcrumb-item>登陆</el-breadcrumb-item> </el-breadcrumb> <el-button style="float: right; padding: 3px 0" type="text">登陆</el-button> </div> <div class="text item"> <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="usrname"> <el-input v-model.number="ruleForm2.usrname"></el-input> </el-form-item> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item> </el-form> </div> </el-card> </el-col> <el-col :span="5">.</el-col> </el-row> </template> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card{ margin-top:30px; } #signup { text-align: left; } </style> <script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var checkUsrname = (rule, value, callback) => { if (value === '') { callback(new Error('请输入用户名')); } else { callback(); } }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm2.checkPass !== '') { this.$refs.ruleForm2.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm2.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm2: { pass: '', checkPass: '', age: '', usrname:'' }, rules2: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ], usrname: [ { validator: checkUsrname, trigger: 'blur' } ], } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //alert('submit!'+ this.$store.state.logined ); this.$store.state.logined = true; //alert(this.$store.state.logined ); this.$router.push("SearchRooms"); //this.render(this.$store.state.logined ); this.$ajax({ method: 'post', url: '/login', data: { usrname: this.ruleForm2.usrname, pass: this.ruleForm2.pass } }) } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
AddRoom.vue
<template> <el-row id="AddRoom"> <el-col :span="5">.</el-col> <el-col :span="14"> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">房间</el-breadcrumb-item> <el-breadcrumb-item>添加</el-breadcrumb-item> </el-breadcrumb> <el-steps :active="1" finish-status="success" style="margin-top: 28px;"> <el-step title="1、文本信息"></el-step> <el-step title="2、图片"></el-step> <el-step title="3、完成"></el-step> </el-steps> <el-button style="margin-top: 12px;" type="primary" @click="next">下一步</el-button> <el-button style="margin-top: 12px;float: right;" @click="next">取消</el-button> </div> <div class="text item"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="即时配送"> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源"> <el-radio-group v-model="form.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> </el-form> </div> </el-card> </el-col> <el-col :span="5">.</el-col> </el-row> </template> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card{ margin-top:30px; } #AddRoom { text-align: left; } </style> <script> export default { data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); }, next(){ //alert(1); this.$router.push("addroom2"); } } } </script>
AddRoom2.vue
<template> <el-row id="AddRoom"> <el-col :span="5">.</el-col> <el-col :span="14"> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">房间</el-breadcrumb-item> <el-breadcrumb-item>添加</el-breadcrumb-item> </el-breadcrumb> <el-steps :active="2" finish-status="success" style="margin-top: 28px;"> <el-step title="1、文本信息"></el-step> <el-step title="2、图片"></el-step> <el-step title="3、完成"></el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">完成</el-button> <el-button style="margin-top: 12px;float: right;" @click="next">取消</el-button> </div> <div class="text item"> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </div> </el-card> </el-col> <el-col :span="5">.</el-col> </el-row> </template> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card{ margin-top:30px; } #AddRoom { text-align: left; } </style> <script> export default { data() { return { fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); } } } </script>
SignUp.vue
<template> <el-row id="signup"> <el-col :span="5">.</el-col> <el-col :span="14"> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">用户</el-breadcrumb-item> <el-breadcrumb-item>注册</el-breadcrumb-item> </el-breadcrumb> <el-button style="float: right; padding: 3px 0" type="text">注册</el-button> </div> <div class="text item"> <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item prop="email" label="邮箱" > <el-input ></el-input> </el-form-item> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="类型"> <el-radio-group v-model="ruleForm2.a"> <el-radio label="租客"></el-radio> <el-radio label="房东"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm2.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item> </el-form> </div> </el-card> </el-col> <el-col :span="5">.</el-col> </el-row> </template> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card{ margin-top:30px; } #signup { text-align: left; } </style> <script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm2.checkPass !== '') { this.$refs.ruleForm2.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm2.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm2: { pass: '', checkPass: '', age: '' }, rules2: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
浙公网安备 33010602011771号