模板字符串动态添加属性及添加方法

关注

已于 2023-07-10 10:09:23 修改 · 815 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

22.Vue绑定class样式为了讲好class样式，我们这里提前准备了7个样式作为例子来讲解。 basic就是最基本的边框。happy,sad,normal代表了3种心情，这三种心情在设置的时候需要3选一。这三个不能同时应用。而add1,add2,add3是可以同时使用的咱们先看看这两部分样式的效果：互斥部分：兼容部分：讲到这里7个样式我们就说完了，接下来我们就操作一下。需求1：basic是基础的，点击div将样式从normal切换为happy这个时候有人就会想这样去实现，给这个div绑定点击事件，在事件中根据这个div的id获阅读详情

模板字符串动态添加属性及添加方法

this.LatestPoint = new AMap.Marker({
              position: [this.LatestData.lon, this.LatestData.lat],
              icon: require('@/assets/green2.png'),
              offset: new AMap.Pixel(-18, -41),
              extData: this.LatestData,
              title: 'title'
            })
            this.LatestPoint.on('click', e => {
              const tempColor = `color${this.color}` // 动态修改class类名
              const info = e.target.De.extData
              // 点击展示详情框
              this.infoWindow = new window.AMap.InfoWindow({
                isCustom: true,
                content: null,
                autoMove: true,
                closeWhenClickMap: true,
                offset: new AMap.Pixel(16, -45)
              })
                var content = `<div style="position:relative;min-width: 20vw;height:24vh;background: #fff;border-radius: 5px;border: 1px solid #ccc;">
                <div style="height: 4vh;padding: 1vh;color: #000;font-size: 18px;"><span class="${tempColor}">${
                  this.queryMapData.vehicleNo
                }</span>
                <span style="font-size:12px;display:inline-block;background:#87d068;padding: 1px 8px;border-radius: 5px;margin-left: 18px;">${
                  info.vehState
                }</span>
                <span style="display:inline-block;margin-right: 5px;float:right;cursor:pointer" οnclick='closeInfo()' >x</span>
                </div>
                <hr color="#e8e8e8" width="100%">
                <div style="margin-top: 1.5vh;padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">上报时间：</span>${info.positiontime}</div>
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">车速：</span>${info.speed}km/h</div>
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">当前位置：</span>${info.address}</div>
                
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">车辆类型：</span>${info.vehType}</div>
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">当前行驶区县：</span>${info.belongPlace}</div>
                <div style="padding:0.2vh 1vh;padding-bottom:1vh"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">车辆定位信息：</span>(${info.lon.toFixed(6) + ',' + info.lat.toFixed(6)}) </div>
                </div>`
              
              this.infoWindow.setContent(content)
              window.closeInfo = (e) => {
                // 关闭信息弹框
                this.infoWindow.close()
              }
              this.infoWindow.open(this.map, e.target.getPosition())
            })