首页 > 其他分享 >Vue3 响应式全局对象json 动态绑定界面二 （方块矩阵样式）

Vue3 响应式全局对象json 动态绑定界面二 （方块矩阵样式）

时间：2023-07-21 12:12:18浏览次数：37  
标签：scale 100% transform height width json background Vue3 方块

效果

main.js

//全局对象
const globalData=reactive({
    extTelMonitorData: [
    {
        title: '用户组一',
            list: [
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1000",
                    userID: "1",
                    userName: "刘亦菲",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1001",
                    userID: "2",
                    userName: "娜然",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1002",
                    userID: "3",
                    userName: "佟丽娅",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1003",
                    userID: "3",
                    userName: "迪丽热巴",
                    isRegister: false,
                    callStatus:""
                }
                ]
            },
            {
                title: '用户组二',
                list: [
                {
                    userName: '张三',
                    number: 1003,
                    isRegister: false 
                },
                {
                    userName: '王一',
                    number: 1005,
                    isRegister: false 
                } 
            ]
            },
            {
                title: '用户组三',
                list: [
                {
                    userName: '刘中',
                    number: 1006,
                    isRegister: false 
                },
                {
                    userName: '李毅',
                    number: 1007,
                    isRegister: false 
                } 
                ]
            },
            {
                title: '全部分机',
                list: [
                {
                    userName: '李安',
                    number: 1008,
                    isRegister: false 
                },
                {
                    userName: '李毅',
                    number: 1009,
                    isRegister: false 
                    }
                ]
            }
        
    ] 
    ,
    missedCallData:"",
    currentUserTel:"",
})
app.provide('globalData', globalData);

在main.js的函数中 改变 extTelMonitorData 的值 从而改变界面 

//分机状态
function websocket_resMsg_extTelStatus(msg){
    let length = msg.length;  
    if(length>12){
　　　　var msgExtTelStatusData= msg.substr(12);
        //globalExtTelMonitorData=msgExtTelStatus;
        //globalData.extTelMonitorData=JSON.parse(msgExtTelStatus);
    　　 //将字符串转为json对象
    　　globalData.extTelMonitorData=eval('('+msgExtTelStatusData+')');
    　　console.log('收到分机状态 '+ msgExtTelStatusData);
    }
 
}

子组件ExtTelStatusComponent.vue 中

html部分

v-for  遍历 Json数组，赋值显示

<template>
<div class="IndConB flex" id="divExtTelStatus"> 
    <el-row :gutter="74"  v-for="(dataItem, index) in globalData.extTelMonitorData[0].list" :key="index">
        <el-col :span="8">  
            <div style="width:190px;">
            <a href="javascript:;" class="IndCona"  >
                <div class="IndConaH flexC Huans" style="width:95%;"><img src="../assets/images/pic/phone01.png">
                    <p  >&nbsp;&nbsp;&nbsp;{{dataItem.userExten}}</p></div>
                <div class="IndConaP" style="width:95%;">
                    <div class="IndConaPz Huans">名称: {{dataItem.userName}}</div>
                    <div class="IndConaPz Huans">状态: {{dataItem.callStatus}}</div>
                </div>
                <div class="IndConaF flexC fl-cen" style="width:95%;"><img src="../assets/images/pic/tanhao.png">
                    <p>{{dataItem.isRegister}}</p></div>
                
                <div class="IndConaD Huans">
                    <p>名称 : 调度电话</p>
                    <p>号码 : {{dataItem.userExten}}</p>
                    <p>状态 : {{dataItem.isRegister}}</p>
                    <p>分区 : {{dataItem.groupID}}</p>
                    <p>终端 : {{dataItem.userDomain}}</p>
                </div>
            </a>
            </div>
        </el-col>
        &nbsp;
    </el-row> 
    
</div>
</template>

javascript部分

<script>
// 在子组件中注入全局对象
import { inject, watch } from 'vue'

export default {
  // 组件名称
    name: 'ExtTelStatusComponent',
    data() {
        return {
            selected_index:0,
            pageContentData: [],
            activeIndex: '0',
            currentPage4: 1,
            total: 20,
        };
    },
    setup() {
        // 注入全局对象
        const globalData = inject('globalData');
 
        watch(() => globalData.extTelMonitorData, (newValue) => {
            // 更新
            globalData.extTelMonitorData=newValue;
            console.log("ExtTelStatusComponent watch "+globalData.extTelMonitorData[0].list);    
        })

        return {
            globalData
        };

  },

  mounted() {
    
  },
  methods: {
  
  }
    
}
</script>

css样式

<style scoped>

*{ margin:0; padding:0;}
html,body{width: 100%; height:100%;} /**/
body{margin:0;color:#FFF; position: relative;font-size:12px;font-family:"microsoft yahei", Arial, Helvetica, sans-serif;background-color:#000;}
ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {margin:0px;padding:0px;border:none;list-style:none; font-weight: normal;}
a{text-decoration:none;  text-shadow:none;font-weight:normal;}
ul{list-style:none;}
textarea,input,button,select{outline:none;-webkit-appearance:none; font-family:Arial, Helvetica, sans-serif;}
a{color:#6c6c6c;text-decoration:none;}
img{border:none; display: block;}
span{margin:0; padding:0; cursor: auto;}
span:focus,div:focus {outline: none;}

.Huans{-webkit-box-sizing: border-box;box-sizing: border-box;}
.flex{display:-webkit-box;display: -ms-flexbox;display:flex;flex-wrap:wrap;align-items:flex-start;}
.flexC{display:-webkit-box;display: -ms-flexbox;display:flex;align-items:center; flex-wrap:wrap;}
.flexE{display:-webkit-box;display: -ms-flexbox;display:flex;align-items:flex-end; flex-wrap:wrap;}
.fl-bet{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content:space-between;}
.fl-cen{-webkit-box-pack: center;-ms-flex-pack: center;justify-content:center;}
.fl-end{-webkit-box-pack:right;-ms-flex-pack:right;justify-content:flex-end;}

.main {width: 100%;height:100%;padding:87px 0 0;z-index:1; position: relative;}
.IndDK{width: 100%;height:100%;padding: 0;z-index:1; position: relative;}
.menu{width:200px; height:100%; border-right:2px solid #000; background:#454648; padding-bottom: 87px; position: relative;}
.menuU{ font-size:14px; padding:15px 5px 10px; width:100%; height:100%;}
.menuU li{}
.menuUa{padding-left:19px; position: relative; height:32px; line-height:32px; color:#FFF;}
.menuUa:before{display:block;content:'';position: absolute; width:14px; height:14px; background-image: url("..//assets/images/icon/navJ01.png");left:0;top:9px;transition:0.5s;}
.menuU li .on:before{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform: rotate(-90deg);transition:0.5s;}
.menuUa p{}
.menuUa span{}
.menuUn{ padding-left: 7px; padding-top:15px; padding-bottom:5px;}
.menuUna{ line-height:28px;height:28px; padding-left:25px; width:100%;position: relative;color:#FFF;}
.menuUna:before{display:block;content:'';position: absolute; width:9px; height:25px; background-image: url("..//assets/images/icon/navJ02.png");left:0;top:-12px;}

.menunm{ background:#454648; border:2px solid #d3a306;width:100%; height:75px; padding-left: 4px; padding-right: 2px;left:0; bottom:87px; position: absolute;}
.menunmI{width:150px; height:46px; line-height:46px; padding:0 15px; background:#848484; border:none; color:#FFF; font-size:22px;font-family: "shuzhi";}
.menunma{opacity:0.3;width:35px;}
.menunmJ{width:35px; height: 35px;background-position: 0 0; background-repeat: no-repeat; background-size:100%; display: block;background-image: url("..//assets/images/pic/conI08.png");}
.menunma p{width:100%; display: block; text-align: center; font-size:12px; line-height:16px; color:#FFF;}
.menunma:hover .menunmJ{background-position: 0 -35px;}

.menunmD{width:20px; height:20px;transform: translate(0,-50%);left:50%;top:-20px; position: absolute;}

.menunmC{width:90%;right:0;left:0; margin:0 auto;bottom:80px; position: absolute; padding:4px 3px 1px; background:#2f3032; border-radius:3px; box-shadow:0 0 4px rgba(255,255,255,0.6); z-index:3; display: none;}
.menunmC a{width:32.5%; height:28px; line-height:28px; color:#FFF; font-weight:700; border-radius:3px; text-align:  center; font-size:18px; background:linear-gradient(to bottom,#b3caf5,#47494b); margin-bottom:3px;}

.IndRe{width:200px; height:100%; border-left:2px solid #000; background:#454648; padding-bottom: 87px; position: relative;}

.IndPhone{width:100%; height: 87px; position: absolute; bottom:0; left:0;}
.IndPhone img{width:85px; display:block}
.IndPhone p{color:#FFF; font-size: 12px; line-height:18px;}

.IndCon{width:100%; flex:1;height:100%; background:#353535; border-left:5px solid #f5f5f5;padding-bottom: 87px;position: relative; z-index:5}
.IndConH{background-color: #272727; height: 32px; color:#FFF; font-size: 12px;}
.IndConHp{padding:0 15px;}
.IndConHX{height:32px; border-left:1px solid #666;padding:0 15px;}
.IndConHa{ color:#FFF; position: relative;}
.IndConHlab{}
.IndConHlab input[type="checkbox"]{-webkit-appearance:none;vertical-align:middle;display:block;outline:none; background-position: center; background-repeat: no-repeat; background-size:100%; background-color:rgba(255,255,255,0);width:14px;height:14px;border:1px solid #999; border-radius:2px; margin-left:8px;}
.IndConHlab input[type="checkbox"]:checked{background-color:#999; background-image: url("..//assets/images/icon/check1.png")}

.IndCongB{z-index:5; padding:5px 0; position: absolute;left:30px; top:30px; font-size:14px; background:#848484; border-radius:5px; display: none;}
.IndcHa{padding:0 15px; line-height:32px; color:#FFF; width:120px;}
.IndcHa img{margin-right:5px; display: block;}
.IndcHa:hover{ background:#333;}

.IndFeNL li{position:relative;}
.IndFeNLB{z-index:5; padding:5px 0; position: absolute;left:0; top:30px;font-size:14px; background:#848484; border-radius:5px; display: none;}
.IndFeNLB input[type="checkbox"]{-webkit-appearance:none;vertical-align:middle;display:block;outline:none; background-position: center; background-repeat: no-repeat; background-size:100%; background-color:rgba(255,255,255,0);width:14px;height:14px;border:1px solid #999; border-radius:2px; margin-left:auto;}
.IndFeNLB input[type="checkbox"]:checked{background-color:#999; background-image: url("..//assets/images/icon/check1.png")}


.IndConK{width:100%; height: 100%; padding:15px 2.6%;}
.IndConB{width:100%;}
.IndCona{width:19.2%; margin-left: 1%; margin-bottom:14px; border-radius:6px; color:#FFF;transition:0.5s; position: relative;}
.IndCona:nth-child(5n+1){margin-left:0;}
.IndConaH{height:36px; padding:0 15px; background:linear-gradient(to bottom,#828282,#443e3d);border-top-left-radius:6px;border-top-right-radius:6px}
.IndConaH img{width:20px; display: block; margin-right:6px;}
.IndConaH p{ font-size:14px; line-height:20px;}
.IndConaP{}
.IndConaPz{ line-height:36px; border-bottom: 1px solid #353535; padding:0 20px; font-size:12px; width:100%; background:#6c6c6c;}
.IndConaF{ background:#575353; line-height:36px;height:36px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.IndConaF img{ width: 16px; display: block; margin-right:15px;}
.IndConaF p{ font-size:14px; line-height:24px;}
.IndCona:hover{-ms-transform:scale(1.01);-moz-transform:scale(1.01);-webkit-transform:scale(1.01);-o-transform:scale(1.01);transform:scale(1.01); transition:0.5s; box-shadow:0 0 10px rgba(255,255,255,0.8);}

.IndConaD{max-width:250px;font-size:14px;line-height:24px;position:absolute;top:0;left:95%;z-index:2;min-height:34px;padding:8px 15px;color: #fff;text-align:left;text-decoration:none;background-color:rgba(70,76,91,.9);border-radius:4px; -webkit-box-shadow:0 1px 6px rgba(0,0,0,.2);box-shadow: 0 1px 6px rgba(0,0,0,.2);white-space: nowrap; display: none; z-index:5}
.IndCona:hover{ z-index:1;}
.IndCona:hover .IndConaD{display:block;}

.IndConF{ background:#424345; position: absolute;width:100%; height: 87px; bottom:0; left:0;}
.IndConFa{width:14.2857%; opacity:0.3;}
.IndConFI{ width: 40px; height: 40px;background-position: 0 0; background-repeat: no-repeat; background-size:100%; display: block; margin:0 auto;}
.IndConFI1{background-image: url("..//assets/images/pic/conI01.png");}
.IndConFI2{background-image: url("..//assets/images/pic/conI02.png");}
.IndConFI3{background-image: url("..//assets/images/pic/conI03.png");}
.IndConFI4{background-image: url("..//assets/images/pic/conI04.png");}
.IndConFI5{background-image: url("..//assets/images/pic/conI05.png");}
.IndConFI6{background-image: url("..//assets/images/pic/conI06.png");}
.IndConFI7{background-image: url("..//assets/images/pic/conI07.png");}
.IndConFa p{width:100%; display: block; text-align: center; font-size:12px; line-height:20px; color:#FFF;}
.IndConFa:hover .IndConFI{background-position: 0 -40px;}


.IndReK{width:100%; height:100%; border-bottom:2px solid #000;/*align-content:stretch;align-items:stretch;*/align-content:flex-start}
.IndReK li{ background:#666; height: 33.333%; width:100%;/*align-items:stretch;align-content:stretch;*/}
.IndRea{background-image: linear-gradient(#272727,#2a2c2d,grey); color:#FFF; height: 38px; font-size: 12px; padding:0 16px; width:100%;}
.IndRea i{ width:8px; height:8px; background-image: url("..//assets/images/icon/jiao01.png"); background-position: center; background-repeat: no-repeat; background-size: 100%; display: block;transition:0.5s;}
.IndRea p{line-height:20px; margin-left:11px;}
.IndReK li.on{ height: 38px;}
.IndReK li.on .IndRea i{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform: rotate(-90deg);transition:0.5s;}
.IndReN{width:100%;}


@-webkit-keyframes enlarge{
    0%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);}
    50% {-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}
    100%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);}
}
@-moz-keyframes enlarge{
    0%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);}
    50% {-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}
    100%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);}
}
@keyframes enlarge{
    0%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);}
    50% {-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}
    100%{-ms-transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);}
}
.overH{overflow:auto;}
.overH::-webkit-scrollbar{width:4px;height:0;}/*滚动条整体样式*/
.overH::-webkit-scrollbar-thumb{background:#00e8e6; border-radius:4px}/*滚动条里面小方块*/
.overH::-webkit-scrollbar-track{background:rgba(255,255,255,0.2);}


</style>

 

标签：scale,100%,transform,height,width,json,background,Vue3,方块
From： https://www.cnblogs.com/hailexuexi/p/17570950.html

相关文章

  • Vue3 响应式全局对象json 动态绑定界面一 （列表样式）
    效果 man.js  定义响应式全局对象 globalDataconstglobalData=reactive({extTelListData:[{userExten:"1000",userName:"秦岚",callStatus:"通话"},{u......
  • Newtonsoft.Json 解析时 导致 List 增加的bug
    测试用例publicclassChild{publicinta=1;}publicclassParent{privateList<Child>_Children=newList<Child>(){newChild()};publicList<Child>Children{get......
  • 在Vue3中，解决 Echart tooltip 不显示的问题
    为什么在Vue中使用ECharts时图表显示异常？Vue3，中使用reactive及ref会导致ECharts的对象实例被代理成为响应式对象，影响ECharts对内部属性的访问，可能会导致图表无法正确显示等一系列意外问题，且会由于深度监听而极大地降低图表展示性能。解决方案为：使用普通变量声明ECh......
  • 前后端分离实现注册+登录（Vue3.0 + Django3.2)
    博客地址：https://www.cnblogs.com/zylyehuo/一、使用vite+webstorm搭建Vue环境，构建前端1、结构树2、main.jsimport{createApp}from'vue'//import'./style.css'importAppfrom'./App.vue'importrouterfrom"./utils/router";......
  • 读取MySQL中JSON文本会乱序
    如何读取MySQL中的JSON文本并保持顺序当我们在MySQL数据库中存储JSON文本时，有时候我们可能希望能够读取到与存储时相同的顺序。然而，由于MySQL的JSON类型是无序的，存储和读取时会导致JSON文本的顺序丢失。在本文中，我将向你展示如何通过使用MySQL内置函数和一些额外的代码来解决这个......
  • SheetJS/js-xlsx修改表头json_to_sheet修改表头
    [SheetJS/js-xlsx修改表头json_to_sheet修改表头_Aqvdrt的博客-CSDN博客](https://blog.csdn.net/qq_37027371/article/details/106022855)看官方文档看到的，记录一下，帮大家踩坑。//待展示的数据，可能是从后台返回的json数据或者是自己定义的objectconstdata=[{S:1,h:2,......
  • vue3 登录添加图形验证码
    1.新增组件IdentifyCode.vue，使用canvas绘制验证码内容：<template><divclass="s-canvas"@click="refreshCode"><canvasid="s-canvas":width="contentWidth":height="contentHeight"......
  • hyperf 创建 JSON RPC 服务
    JSONRPC服务hyperf框架为PHP打开了微服务的大门，而服务之间相互调用，又以RPC为基础。所以这个章节非常重要。但官方文档还是有些坑的，我以前就在这儿踩过坑。这里省略了接口类，只保留最主要的部分。 安装依赖composerrequirehyperf/json-rpccomposerrequirehyperf/rp......
  • java json转整形数组
    Java中Json转整型数组的方法在Java中，我们经常需要处理Json数据。Json是一种轻量级的数据交换格式，广泛应用于数据传输和配置文件中。在某些情况下，我们需要将Json中的数据转换为整型数组来进行进一步处理。本文将介绍如何在Java中将Json转换为整型数组，并提供相应的代码示例。使用Ja......
  • javascript中json 对象 数组之间相互转化的示例
    在JavaScript中，你可以使用JSON.stringify()将JSON对象转换为JSON字符串，使用JSON.parse()将JSON字符串转换为JSON对象。而要将JSON对象转换为数组，可以使用Object.values()方法，而要将数组转换为JSON对象，可以使用Array.reduce()方法。下面是这些转换的示例代码：将JSON对象转换为JSON......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99