之前一直在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" >
<script src="http://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script src="http://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
