整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
-html的作用是設(shè)置和修改innerHTML。
下面來看看示例程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-html</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test1">
<div v-html="text1"></div>
<input type="button" value="修改內(nèi)部樣式" @click="change()">
</div>
<script>
var vm1=new Vue({
el:'#test1',
data:{
text1:"<div id=\"test\"><div>Name is :{{name}}</div><div>Local Name is: {{jifukui[0].name}}</div></div>"
},
methods:{
change:function(){
this.text1="<div id=\"test\"><div>name is :{{name}}</div><div>Local name is: {{jifukui[0].name}}</div></div>"
}
}
});
var vm = new Vue({
el: '#test',
data: {
name:"hahahhaha" ,
jifukui:[
{
name:"jifukui"
}
]
},
});
</script>
</body>
</html>
（1）程序中包含兩個vue示例vm1掛載在test1上，text1包含一個<div>的標(biāo)簽用于插入v-html，還有一個<input>標(biāo)簽用于設(shè)置改變<div>標(biāo)簽中的v-html的內(nèi)容。
（2）第二個vue實例掛載在test上進行插值。
（1）默認樣式
可以明顯的看到vm1實例被渲染且vm實例也被渲染，從紅色方框中的內(nèi)容可以看到就是v-html的值text1的值。
（2）點擊后的樣式
點擊后可以看到text1的值發(fā)生了改變，但是其中的關(guān)于vm實例中的內(nèi)容沒有被綁定替換。所以一般使用v-html進行設(shè)置和修改innerHTML的值，所以盡量不要使用v-html組合模板。
天是2021.7.14,是個好日子.好久沒發(fā)布文章了.今天發(fā)布下如何在在html頁面中使用vue3.義縣游學(xué)電子科技一直以技術(shù)文章為主.以下是h5的頁面源碼:
<html>
<script src="https://unpkg.com/vue@next"></script>
<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>
</div>
</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html頁面中引用VUE3的演示頁面</h1>",
}
}
}
const app=Vue.createApp(htmls)
// 簡單語法注冊或獲取全局組件.注冊還會自動使用給定的 id 設(shè)置組件的名稱
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}
)
app.mount("#vue")
</script>
</html>
分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運行的結(jié)果效果
著vue3.x越來越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發(fā)者的再一次熱捧。
Vue3迭代更新頻繁，目前star高達20.2K+。
// 官網(wǎng)地址
https://v3.vuejs.org/Vitejs目前的star達到15.7K+。
// 官網(wǎng)地址
https://vitejs.dev/vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實例。
以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。
大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。
前段時間有過一篇詳細的分享，這里就不作介紹了。感興趣的話可以去看看。
vue3.0系列：Vue3自定義PC端彈窗組件V3Layer
為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現(xiàn)。
v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。
大家感興趣的話，可以去看看這篇分享。
Vue3.0系列：vue3定制美化滾動條組件v3scroll
/**
* Vue3.0項目配置
*/
const path = require('path')
module.exports = {
// 基本路徑
// publicPath: '/',
// 輸出文件目錄
// outputDir: 'dist',
// assetsDir: '',
// 環(huán)境配置
devServer: {
// host: 'localhost',
// port: 8080,
// 是否開啟https
https: false,
// 編譯完是否打開網(wǎng)頁
open: false,
// 代理配置
// proxy: {
// '^/api': {
// target: '<url>',
// ws: true,
// changeOrigin: true
// },
// '^/foo': {
// target: '<other_url>'
// }
// }
},
// webpack配置
chainWebpack: config => {
// 配置路徑別名
config.resolve.alias
.set('@', path.join(__dirname, 'src'))
.set('@assets', path.join(__dirname, 'src/assets'))
.set('@components', path.join(__dirname, 'src/components'))
.set('@layouts', path.join(__dirname, 'src/layouts'))
.set('@views', path.join(__dirname, 'src/views'))
}
}// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'
// 引入vue3滾動條組件v3scroll
import V3Scroll from '@components/v3scroll'
// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'
import Utils from './utils'
const Plugins = app => {
app.use(ElementPlus)
app.use(V3Layer)
app.use(V3Scroll)
// 注冊公共組件
app.component('WinBar', WinBar)
app.component('SideBar', SideBar)
app.component('Middle', Middle)
app.provide('utils', Utils)
}
export default Plugins項目中主面板毛玻璃效果(虛化背景)
<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
<filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
<image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
</svg>
<div class="blur-cover"></div>
</div>vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判斷當(dāng)前路由地址是否需要登錄權(quán)限
if(to.meta.requireAuth) {
if(token) {
next()
}else {
// 未登錄授權(quán)
V3Layer({
content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
onEnd: () => {
next({ path: '/login' })
}
})
}
}else {
next()
}
})如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。
編輯器抽離了一個公共的Editor.vue組件。
<template>
<div
ref="editorRef"
class="editor"
contentEditable="true"
v-html="editorText"
@click="handleClick"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
style="user-select:text;-webkit-user-select:text;">
</div>
</template>另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。
editorRef.value.addEventListener('paste', function(e) {
let cbd = e.clipboardData
let ua = window.navigator.userAgent
if(!(e.clipboardData && e.clipboardData.items)) return
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i]
// console.log(item)
// console.log(item.kind)
if(item.kind == 'file') {
var blob = item.getAsFile()
if(blob.size === 0) return
// 讀取圖片記錄
var reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function() {
var _img = this.result
// 返回圖片給父組件
emit('pasteFn', _img)
}
}
}
})還支持拖拽圖片至聊天區(qū)域進行發(fā)送。
<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
// ...
</div>const handleDragEnter = (e) => {
e.stopPropagation()
e.preventDefault()
}
const handleDragOver = (e) => {
e.stopPropagation()
e.preventDefault()
}
const handleDrop = (e) => {
e.stopPropagation()
e.preventDefault()
// console.log(e.dataTransfer)
handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
let files = filelist.files
if(files.length >= 2) {
v3layer.message({icon: 'error', content: '暫時支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
return false
}
for(let i = 0; i < files.length; i++) {
if(files[i].type != '') {
handleFileAdd(files[i])
}else {
v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
}
}
}大家如果感興趣可以自己去試試哈。
ok，基于vue3+element-plus開發(fā)仿微信/QQ聊天實戰(zhàn)項目就分享到這里。
基于vue3.0+vant3移動端聊天實戰(zhàn)|vue3聊天模板實例
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
