整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Vue学习 开始走向VUE开发4-v-html使用详解

-html的作用是设置和修改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="修改内部样式" @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>的标签用于插入v-html,还有一个<input>标签用于设置改变<div>标签中的v-html的内容。

(2)第二个vue实例挂载在test上进行插值。

程序结果:

(1)默认样式



可以明显的看到vm1实例被渲染且vm实例也被渲染,从红色方框中的内容可以看到就是v-html的值text1的值。

(2)点击后的样式



点击后可以看到text1的值发生了改变,但是其中的关于vm实例中的内容没有被绑定替换。所以一般使用v-html进行设置和修改innerHTML的值,所以尽量不要使用v-html组合模板。

天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是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 设置组件的名称

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的代码即可. 下图是运行的结果效果

vue3.x越来越稳定及vite2.0的快速迭代推出,加上很多大厂相继推出了vue3的UI组件库,在2021年必然受到开发者的再一次热捧。

Vue3迭代更新频繁,目前star高达20.2K+

// 官网地址
https://v3.vuejs.org/

Vitejs目前的star达到15.7K+

// 官网地址
https://vitejs.dev/

项目介绍

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技术架构的仿微信PC端界面聊天实例。

以上是仿制微信界面聊天效果,同样也支持QQ皮肤。

技术栈

  • 使用技术:vue3.0+vuex4+vue-router4
  • UI组件库:element-plus(饿了么Vue3 pc端组件库)
  • 弹窗组件:V3Layer(基于Vue3自定义桌面端弹窗)
  • 滚动条组件:V3Scroll(基于Vue3自定义虚拟美化滚动条)
  • iconfont图标:阿里字体图标库

Vue3.x自定义弹窗组件

大家看到的所有弹窗功能,均是自己开发的vue3.0自定义弹窗V3Layer组件。

前段时间有过一篇详细的分享,这里就不作介绍了。感兴趣的话可以去看看。

vue3.0系列:Vue3自定义PC端弹窗组件V3Layer

Vue3.x自定义美化滚动条组件

为了使得项目效果一致,所有页面的滚动条均是采用vue3.0自定义组件实现。

v3scroll 一款轻量级的pc桌面端模拟滚动条组件。支持是否原生滚动条、自动隐藏、滚动条大小/层叠/颜色等功能。

大家感兴趣的话,可以去看看这篇分享。

Vue3.0系列:vue3定制美化滚动条组件v3scroll

vue.config.js项目配置

/**
 * Vue3.0项目配置
 */

const path = require('path')

module.exports = {
    // 基本路径
    // publicPath: '/',

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启https
        https: false,
        // 编译完是否打开网页
        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'))
    }
}

Vue3引入/注册公共组件

// 引入饿了么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拦截登录状态

vue3.0中使用全局路由钩子拦截登录状态。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判断当前路由地址是否需要登录权限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登录授权
            V3Layer({
                content: '还未登录授权!', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模块

如上图:聊天编辑框部分支持文字+emoj表情、在光标处插入表情、多行文本内容。

编辑器抽离了一个公共的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>

另外还支持粘贴截图发送,通过监听paste事件,判断是否是图片类型,从而发送截图。

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)
            }
        }
    }
})

还支持拖拽图片至聊天区域进行发送。

<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开发仿微信/QQ聊天实战项目就分享到这里。

基于vue3.0+vant3移动端聊天实战|vue3聊天模板实例