点击按钮实现文字内容转换

效果图：

 点击W显示经度（西经），点击E显示经度（东经），点击S显示纬度（南纬），点击N显示纬度（北纬）。同时“该坐标为：”中的西经、东经、南纬和北纬也会随之切换。

在输入框中输入对应的经度和纬度值，下方的“该坐标为：”中的数值也会随之更新。

 将鼠标放在W\E\S\N相应的按钮上，会出现不同的提示框。

实现方法：

template中：

<div class="dialogLongitude">
         <span class="dialogLongitudeTitle">
                 经度({{ longitude.type }})
          </span>
         <el-input
                v-model="longitude.value"
                placeholder="请填写坐标经度">
         </el-input>

          <el-tooltip
                  class="item"
                  effect="dark"
                  content="西经"
                  placement="top"
                  >
                <span
                   class="longitudeLeft"
                   @click="changeLatAndLon('w')"
                >
                    W
                </span>
         </el-tooltip>
         <el-tooltip
                 class="item"
                 effect="dark"
                 content="东经"
                 placement="top"
             >
                 <span
                     class="longitudeRight"
                     style="position: relative"
                     @click="changeLatAndLon('e')"
                  >
                     E
                 </span>
          </el-tooltip>
</div>
 <div class="dialogLongitude">
       <span class="dialogLongitudeTitle">
               纬度({{ latitude.type }})
       </span>
       <el-input
             v-model="latitude.value"
             placeholder="请填写坐标纬度"
       ></el-input>
       <el-tooltip
             class="item"
             effect="dark"
             content="南纬"
             placement="bottom"
       >
              <span
                 class="longitudeLeft"
                  @click="changeLatAndLon('s')"
                 >
                 S
             </span>
      </el-tooltip>
      <el-tooltip
               class="item"
               effect="dark"
               content="北纬"
               placement="bottom"
                >
              <span
                  class="longitudeRight"
                  @click="changeLatAndLon('n')"
                 >
                 N
                </span>
      </el-tooltip>
 </div>
<div class="coordinate">
        该坐标为：
       <span class="coordinateContent">
           {{
                   longitude.type +
                   longitude.value +
                   '°' +
                   ';' +
                   latitude.type +
                  latitude.value +
                  '°'
           }}
       </span>
 </div>

script---data中：

data() {
        return {
            // currentImg1: running,
            dialogVisible: false,
            longitude: {
                type: '东经',
                value: '',
            },
            latitude: {
                type: '北纬',
                value: '',
            },
}

script---methods中：

methods: {
     changeLatAndLon(val) {
            switch (val) {
                case 'w':
                    this.longitude.type = '西经';
                    break;
                case 'e':
                    this.longitude.type = '东经';
                    break;
                case 's':
                    this.latitude.type = '南纬';
                    break;
                case 'n':
                    this.latitude.type = '北纬';
                    break;
                default:
                    break;
            }
        },
}

style中设置样式：

.dialogLongitude {
                display: flex;
                align-items: center;
                height: 40px;
                width: 297px;
                margin-top: 20px;
                background-color: #1e242a;
                .dialogLongitudeTitle {
                    font-size: 12px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Medium;
                    font-weight: 500;
                    text-align: left;
                    color: #b0d9ff;
                    margin-left: 20px;
                }
                .el-input {
                    width: 137px;
                    .el-input__inner {
                        background-color: #1e242a;
                        border: 0;
                        // opacity: 0.3;
                        font-size: 12px;
                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                        font-weight: 400;
                        text-align: left;
                        color: #ffffff;
                    }
                }
                .longitudeLeft {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    background: rgba(65, 77, 90, 0.5);
                    border: 1px solid #395064;
                    font-size: 14px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                    font-weight: 400;
                    text-align: center;
                    color: #668cb3;
                    cursor: pointer;
                }
                .longitudeRight {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    background: rgba(70, 125, 184, 0.5);
                    border: 1px solid #395064;
                    font-size: 14px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                    font-weight: 400;
                    text-align: center;
                    color: #ffffff;
                    cursor: pointer;
                }
}