Vue3动态html和动态vue对象和动态vue组件
在vue3的单页应用项目(spa)中好像不能创建动态的html并绑定动态的vue对象,于是想了些办法,算是基本实现了效果,可以用于制作打印模板,直接调用浏览器的打印功能或者给lodop这样的web打印插件提供打印模板
·
在vue3的单页应用项目(spa)中好像不能创建动态的html并绑定动态的vue对象,于是想了些办法,算是基本实现了效果,可以用于制作打印模板,直接调用浏览器的打印功能或者给lodop这样的web打印插件提供打印模板
在html中如何动态创建vue对象
首先看一下在独立的html中如何创建一个动态的vue对象
就是受了这个方法的启发搞出了spa中的动态html加载方法
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 导入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
<!-- 导入 Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- 导入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
<title>Element Plus demo</title>
</head>
<body>
<div id="app">
<button onclick="abc()">开始</button>
<el-button @click="createComponent">{{ message }}</el-button>
<component :is="componentName"></component>
</div>
<script>
const App = {
methods: {
//根据数据源和打印模板创建打印组件
createComponent: function () {
console.log("createComponent");
//创建组件
app.component("myc", {
template: "<div>myComponent</div>", //打印模板
});
//更新组件
this.componentName = "myc"; //显示打印组件
},
},
data() {
return {
componentName: "",
message: " Hello Element Plus",
};
},
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
如何在单页面vue3项目中动态创建组件(编译后)
这个方法是捣鼓了两天搞出来 , 如果还有更好的办法请一定留言告诉我
1 利用v-html添加模板
<template>
<h1>print demo</h1>
<h3>先定义一个id="print"的v-html,把打印模板绑定到它上面</h3>
<h3>再调用全局方法 mountPrintData(printJsonData) 把json数据源传传入即可</h3>
<h3>mountPrintData会创建出vue对象,绑定到v-html上,渲染打印模板</h3>
<button @click="doMount">动态创建vue对象</button>
<div id="print" v-html="printHtml" style="border: 1px red solid"></div>
</template>
<script setup lang="ts">
import { ref, nextTick } from "vue";
//更新模板
const doMount = () => {
printHtml.value = "<div></div>"; //触发printHtml.value的变更,否则无法还原模板
nextTick(() => {
printHtml.value = printTemplate; //还原模板
nextTick(() => {
updateData();
});
});
};
//更新数据
const updateData = () => {
let count = Math.random() * 10; //模拟数据源变更
let printJsonData = {
abc: "abc:" + count,
vif: true,
list: [
{ name: "baozi1" },
{ name: "baozi2" },
{ name: "baozi3" },
{ name: "baozi4" },
{ name: "baozi5" },
{ name: "baozi6" },
],
};
mountPrintData(printJsonData);
};
let printTemplate = `
<div>
<div>{{ data.abc }}</div>
<div v-if="data.vif">v-if-true</div>
<div v-if="false">v-if-false</div>
<div v-for="item in data.list">{{item.name}}</div>
</div>`;
const printHtml = ref(printTemplate);
</script>
2 在public目录添加一个文件(mountPrintData.js)放全局方法
const mountPrintData = function (printData, vhtmlDivId = 'print') {
clog('mountPrintData')
clog(printData)
const App = {
data() {
return {
data: printData,
}
},
}
const app = Vue.createApp(App)
app.mount('#' + vhtmlDivId)
}
// 控制台日志,支持传一个参数(对象/字符串), 也支持传两个参数(标志,日志消息<可以是对象,可以是字符串>)
const clog = function (flag, value = 'xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx') {
try {
let tmp = ''
// 如果value为默认值,则没有传递第二个参数,只处理第一个参数
if (value === `xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx`) {
tmp = JSON.stringify(flag)
console.log(tmp)
} else if (isNull(value)) {
tmp = JSON.stringify(flag)
console.log(tmp + ':')
} else if (isNull(flag)) {
tmp = JSON.stringify(value)
console.log(':' + tmp)
} else {
tmp = JSON.stringify(value)
console.log(flag + ':' + tmp)
}
return tmp
} catch (err) {
console.log('log', err)
return ' 空对象或者空字符串 '
}
}
// 判断对象,数组,字符串是否为空,例如: 'undefined' , 'null' , '' , ' ' , {} , [] 全部判断为空
const isNull = function (obj) {
if (typeof obj === 'object') {
let json = JSON.stringify(obj)
if (json === '{}') {
return true
}
if (json === '[]') {
return true
}
return false
}
let str = String(obj)
if (str === 'undefined' || str === 'null' || str === '' || !str || !/[^\s]/.test(str)) {
return true
}
return false
}
3 在html.index中引入全局方法和vue.js
因为是在系统运行时动态创建vue对象,所以必须独立引入vue3.js
其中vue3.js可以直接用CDN的方式引入:
生产环境中肯定是要下载后引入的
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script type="text/javascript" src="vue3.js"></script>
<script type="text/javascript" src="mountPrintData.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
由此实现了运行时动态创建vue对象
更多推荐
已为社区贡献8条内容
所有评论(0)