View UI——页面右上角添加浮动按钮（设置、退出全屏、进入全屏）

tabindex 用法说明
实现以下功能：（用的是View UI组件库）

先创建一个存放浮动按钮的<div>

<div class="right_top" v-if="buttonVisible">
</div>
......
//设置对应样式位置大小
.right_top {
  position: fixed; //位置：浮动在其他页面上方
  right: 2vh; //定位按钮距离右边的位置
  top: 0; //上
  width: auto;//宽度
  height: 5vh;
  //width: auto;
 //子元素有margin、border、padding时，会减去子元素content区域相对应的width值
 //父元素的content = 子元素（content + padding + border + margin )
}

新建两个浮动按钮（在创建好的<div>中新建）

此处是用了阿里图标，下载图片后复制到image文件中，以图片形式嵌入按钮中
如果View UI的图标中有想要的字体图标，直接引用即可，比较方便

//引用View UI图标
//方法1
<Button size="small" type="text" shape="circle">
  <Icon type="md-settings" style="font-size: 3vh"/> //可通过style或者class设置字体图标的颜色大小相对位置 
</Button>
//方法2
<Button size="small" type="text" shape="circle"  icon="ios-log-out"></Button>
//引用阿里图标（方法之一，设置好图片样式直接下载，添加到src/assets/image文件夹中，在需要使用的地方直接引用即可）
<Button size="small" type="text" shape="circle">
  <img src="@/assets/image/fullscreen-exit.png" alt="" />
</Button>

设置好按钮后给按钮添加功能

• 设置——给设置按钮添加下拉框，包含音效开关、单选、退出登录 功能

<Dropdown trigger="click" placement="bottom-start" style="padding-top:0.5vh">
//触发方式，可选值为 hover（悬停）click（点击）contextMenu（右键）custom（自定义），使用 custom 时，需配合 visible 一起使用
//placement:下拉框相对按钮的位置
  <Button size="small" type="text" shape="circle"><Icon type="md-settings" style="font-size: 3vh"/></Button>
  //创建下拉框
  <Dropdown-menu slot="list" style="width:200px">
  	//展示周期
  	<Dropdown-item>
  	</Dropdown-item>
  	//音效开关
  	<Dropdown-item>
  	</Dropdown-item>
  	//退出登录
  	<Dropdown-item>
  	</Dropdown-item>
  </Dropdown-menu>
</Dropdown>

1.展示周期

<span>展示周期:</span>
  <br>
  <RadioGroup id="cycleRadioGroup" v-model="radioNum" vertical @on-change="onCycleChanged()">
    <Radio :label="0">
      <span class="radio_span">24小时</span>
    </Radio>
    <Radio :label="1">
      <span class="radio_span">今天</span>
    </Radio>
    <Radio :label="2">
      <span class="radio_span">近7天</span>
    </Radio>
    <Radio :label="3">
       <span class="radio_span">近30天</span>
    </Radio>
  </RadioGroup>
  ......
  data() {
    return {
   radioNum: 2,//单选,默认值“近7天”
   	 }
   },
   
   methods{
    onCycleChanged() {
      this.post("city_brain/switch_cycle", {
        cycleFlag: this.cycleValues[this.radioNum]
      }).then((res) => {
        if (res.errorCode === 0) {
          this.util.setLocalStorage("radioNum", this.radioNum);
          this.showSettings = false;
        }
      });
    }
   },
......
//样式
.radio_span {
  font-size: 14px;
  display: inline-block;
  position: absolute;
  padding-left: 0.5vw;
}

• 音效开关

<Dropdown-item>
  <span>音效：</span>
  <i-switch size="large" v-model="enableSound" @on-change="onSoundOnOff()">
    <span slot="open">ON</span>
    <span slot="close">OFF</span>
  </i-switch>
</Dropdown-item>
......
enableSound: true, //设置开启未默认状态
......
methods:{
playSound() {
      if (!this.enableSound) {
        return;
      }
      let audio = document.getElementById("music1").play(); //输出music1
      if (audio != undefined) {
        audio.catch(error => {
        //confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false
          this.$Modal.confirm({  //modal模态弹框
            title: "是否开启音效通知？",
            okText: "开启",
            cancelText: "关闭",
            closable: true,
            content: "<p>开启后新订单通知会播放音效提示</p>",
            //开启
            onOk: () => {
              this.enableSound = true;
              this.playSound();
            },
            //关闭
            onCancel: () => {
              this.enableSound = false;
            }
          });
        });
      }
    },
    //点击事件
     onSoundOnOff() {
      if (this.enableSound) {
        document.getElementById("music1").play();
      }
    },
}