jquery+mui+bootstrap实现评价页面改成纯vue实现
1.png
2.png
3.png
需求： jquery+mui+bootstrap实现评价页面，
包括评星，意见建议，邮箱，上传图片并把第一张显示在下方以及对每一个进行验证
jQuery图
vue图
对比两个
参考 https://www.jianshu.com/p/d63b1b002297
//上传一张图片显示
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
// 上传多张图片显示
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// 确保 `file.name` 符合我们要求的扩展名
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
jquery源码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>科可瑞尔</title>
<link rel="shortcut icon" href="images/fa.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="mui/css/mui.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<script src="config.js"></script>
<style type="text/css">
.mui-bar{
background-color: white;
}
body {
background-color: white;
/* font-size: 16px; */
font-size: 13px;
}
.icons i{
font-size: 30px;
margin-left:15px;
height: 40px;
color: #FFCC00;
}
.fileinput-button {
position: relative;
display: inline-block;
overflow: hidden;
}
.fileinput-button input{
position:absolute;
right: 0px;
top: 0px;
opacity: 0;
font-size: 20px;
}
</style>
</head>
<body style="background-color: white; color: black;">
<iframe id="target_fileSubmit" name="target_fileSubmit" style="display: none;"></iframe>
<header id="header" class="mui-bar mui-bar-nav">
<!-- <a href="index.jsp"><img style="text-align: left;" width="44px" alt="" src="images/return.png"></a> -->
<h1 class="mui-title">评价</h1>
<!-- <img style="float: right;" width="44px" alt="" src="images/plane.png"> -->
</header>
<!-- 五星 -->
<div style="margin-top: 50px; margin-left: 20px;">
<div class="icons mui-inline icons_envirnment" style="margin-top: 10px;">
机舱环境
<i data-index="1" class="mui-icon mui-icon-star"></i>
<i data-index="2" class="mui-icon mui-icon-star"></i>
<i data-index="3" class="mui-icon mui-icon-star"></i>
<i data-index="4" class="mui-icon mui-icon-star"></i>
<i data-index="5" class="mui-icon mui-icon-star"></i>
</div>
<br>
<div class="icons mui-inline icons_service">
服务态度
<i data-index="1" class="mui-icon mui-icon-star"></i>
<i data-index="2" class="mui-icon mui-icon-star"></i>
<i data-index="3" class="mui-icon mui-icon-star"></i>
<i data-index="4" class="mui-icon mui-icon-star"></i>
<i data-index="5" class="mui-icon mui-icon-star"></i>
</div>
<br>
<div class="icons mui-inline icons_food">
用餐口味
<i data-index="1" class="mui-icon mui-icon-star"></i>
<i data-index="2" class="mui-icon mui-icon-star"></i>
<i data-index="3" class="mui-icon mui-icon-star"></i>
<i data-index="4" class="mui-icon mui-icon-star"></i>
&
最低0.47元/天 解锁文章
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
