之前一直在VUE3的框架中使用VUE3。
但是我们在做一个小页面的时候，没有必要独立创建一个VUE项目的时候，我们该如何使用VUE3呢？
下边我这边直接放出一个示例，复制粘贴就能用
这里我使用了VUE3+element-plus
<!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">
<title>导出真实实验数据</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script src="//unpkg.com/element-plus@1.0.2-beta.46/lib/index.full.js"></script>
</head>
<style>
div {
height: 30px;
line-height: 30px;
}
</style>
<body>
<br><br><br><br><br><br><br>
<div style="width:100%;" id="app">
<div style="width:400px;margin:0 auto;">
<h2>导出真实实验数据</h2>
<p>
<div>虚拟实验id（必填）</div>
<el-input v-model="exp_id" placeholder="请输入虚拟实验id"></el-input>
</p>
<p>
<div>学校id（非必填）</div>
<el-input v-model="school_id" placeholder="请输入学校id"></el-input>
</p>
<p>
<div>60-100分人数比例（非必填） </div>
<el-input v-model="upRatio" placeholder="0-100之间的数字"></el-input>
</p>
<p>
<div>选择日期（非必填）</div>
<el-date-picker v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期"></el-date-picker>
</p>
<p>
<div>生成随机虚拟分数（非必填）</div>
<el-radio v-model="randomScore" label="true">是</el-radio>
<el-radio v-model="randomScore" label="false">否</el-radio>
</p>
<p>
<el-button type="primary" @click="exportExcel">导出数据</el-button>
</p>
</div>
</div>
</body>
</html>
<script>
Object.assign(window, Vue);
const vue3Composition = {
setup() {
const data = reactive({
// 虚拟实验id
exp_id: '',
// 生成随机虚拟分数(true/false)
randomScore: false,
// 日期时间
dateTime: [],
// 60-100分人数比例
upRatio: '',
// 学校id
school_id:'',
});
/**
* @name: 导出excel
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-10
*/
const exportExcel = () => {
var startTime = '';
var endTime = '';
var url = "https://dev.mools.net";
if(!data.exp_id)
{
Message.warning("请填写虚拟实验id");return;
}
if(data.dateTime.length > 0)
{
startTime = format(data.dateTime[0], "yyyy-MM-dd") + " 00:00:00";
endTime = format(data.dateTime[1], "yyyy-MM-dd") + " 23:59:59";
// data.dateTime[0].valueOf(); => date日期变时间戳
}
if((data.upRatio != '' && data.upRatio > 100) || (data.upRatio != '' && data.upRatio < 0))
{
Message.warning("不能大于100且不能小于0"); return;
}
var lastUrl = url + '?exp_id='+ data.exp_id + '&startTime='+ startTime+'&endTime='+endTime+'&upRatio='+ data.upRatio+'&randomScore='+ data.randomScore+'&school_id='+ data.school_id;
window.open(lastUrl);
}
/**
* @name: js日期Date格式化为字符串
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-07-05
* @param: date obj js日期对象
* @param: fmt string 日期格式（yyyy-MM-dd hh:mm:s）
* @return: 字符串格式：2020-10-13 12:00:01
*/
const format = (date, fmt) => {
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
(o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
/**
* @name: 将data绑定值dataRef
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-10
*/
const dataRef = toRefs(data);
return {
exportExcel,
...dataRef
}
},
}
// ElementPlus.locale(ElementPlus.lang.zhCn);
const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
</script>
再赘述一次，上边的代码复制粘贴即可使用
有好的建议，请在下方输入你的评论。
欢迎访问个人博客
https://guanchao.site
网友评论