问题

最近有个需求是要要使用datav中的组件，但是官方提供的只有vue/react版本的，我的项目是angular框架的，不知道语法支不支持

解决

通过官方文档提供的umd引入的方式，UMD版可直接使用script标签引入，引入后将自动把所有组件注册为Vue全局组件，

但是他有的组件是单标签，我给他修改成双标签有的组件能行有的组件不能行，于是我统一将其用字符串拼接的方式,在js里面做处理

参考文档

代码

<!DOCTYPE html>
<html>
<head>
    <title>DataV</title>
    <script src="http://10.134.112.169/CIIoT_Picture/tb_vuetest/js/vue.js"></script>
    <!--调试版-->
    <script src="http://10.134.112.169/CIIoT_Picture/tb_vuetest/js/datav.map.vue.js"></script>
    <!--压缩版 生产版本-->
    <script src="http://10.134.112.169/CIIoT_Picture/tb_vuetest/js/datav.min.vue.js"></script>
    <style>
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .demo {
            background-color: black;
            width: 800px;
            height: 400px;
        }

        .change {
            width: 20%;
            height: 8%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 80%;
            margin-top: -4.5%;
            color: antiquewhite;
            background-color: rgb(55, 162, 218);
            display: none;
        }

        .demo:hover .change {
            display: flex;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="demo">
            <dv-digital-flop :config="config.config1" id="flop"> </dv-digital-flop>
            <div class="change" @click="change">数据切换</div>
        </div>

    </div>

    <script>
        const config1 = {
            number: [10, 100],
            content: '{nt}个{nt}元'
        }

        const config2 = {
            number: [100, 1000],
            content: '{nt}个{nt}元'
        }

        var app = new Vue({
            el: '#app',
            data: {
                config: {
                    config1,
                    config2
                },
                flag: true

            },
            methods: {
                change() {

                    if (this.flag == true) {
                        app.$data.config.config1 = config2
                    } else {
                        app.$data.config.config1 = config1
                    }
                    this.flag = this.flag ? false : true
                }
            }
        })
    </script>
</body>

</html>

datav使用之数字翻牌器（umd方式引入vue）

问题

解决

参考文档

代码