当前位置：首页 > news >正文

国外的包装设计网站杭州网络

news 2025/7/6 10:07:07

国外的包装设计网站,杭州网络,wordpress css 版本号,深圳龙华区大浪街道之前一直在VUE3的框架中使用VUE3。但是我们在做一个小页面的时候，没有必要独立创建一个VUE项目的时候，我们该如何使用VUE3呢？ 下边我这边直接放出一个示例，复制粘贴就能用这里我使用了VUE3element-plus <!DOCTYPE html&g…

之前一直在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({// 虚拟实验idexp_id: '',// 生成随机虚拟分数(true/false)randomScore: false,// 日期时间dateTime: [],// 60-100分人数比例upRatio: '',// 学校idschool_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>