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(); //输出music1if (audio != undefined) {audio.catch(error => {//confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回falsethis.$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();}},
}

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

在页面上添加浮动按钮
让表格呈现纵向边框线:在<el-table>中添加border 利用vivew框架实现页面右上方浮动的退出/进入全屏和设置按钮如何像上图一样,使下拉框中默认的触发样式颜色取消呢? 用&l ...
html页面怎么添加打印,在网页中添加打印按钮或链接的方法
在网页中添加打印按钮或链接的方法发布时间:2020-05-27 17:38:35 来源:亿速云阅读:347 作者:鸽子打印按钮或链接是对网页的简单添加 CSS(层叠样式表)使你可以控制屏幕上的网 ...
QT 为按钮添加图标并设置透明
QT 为按钮添加图标并设置透明 qt中自带的控件有时不能满足我们的需求,这时可以自定义一些控件,最简单的是将按钮变成我们想要的图标,在尝试的过程中有一个按钮的阴影问题,我的想法是添加图标后就完全看不到 ...
jsf用于页面判断的标签_JSF –在JSF视图页面中添加标签，图像，按钮和文本字段
jsf用于页面判断的标签 There are various UI components that JSF framework includes by default. Let us see some ...
Qt中按钮图标的设置、按钮按下时浮动效果设置以及 QT的EXE程序图标设置
本文内容皆为Qt 5.13版本. 使用 IDE为 QTCreator.若是 VS+QT插件环境则可能有略微差异. 推荐一个不错的图标网站,大部分资源都可以免费下载: https://www.easyi ...
asp登录页面跳转到注册页面_Java 添加页面跳转按钮到PDF文档
概述当我们在查阅含有大量页面的PDF时,可通过在页面上添加跳转按钮来实现页面转换,以达到节约时间,提高效率的目的.本文将通过Java程序来演示如何给PDF文档添加页面跳转按钮.通常来说跳转可分为两种 ...
datatables 添加时间按钮_Java 添加页面跳转按钮到PDF文档
概述当我们在查阅含有大量页面的PDF时,可通过在页面上添加跳转按钮来实现页面转换,以达到节约时间,提高效率的目的.本文将通过Java程序来演示如何给PDF文档添加页面跳转按钮.通常来说跳转可分为两种 ...
Vue组件库 View UI 来看看这80种奇奇怪怪的按钮
80种奇奇怪怪的按钮,先睹为快! 本文详细讲解 View UI 中,Button 组件的样式配置和单击事件响应. 目录一.按钮样式 1.1 颜色 1.2 大小 1.3 按钮形状 1.4 背景透明 1 ...
教师资格考试系统报“访问超时，请点击页面右上角“退出”按钮后重新登录。”解决方法
[现象] [解决方法] 解决方法1:使用 IE 系列浏览器.如使用 IE11 浏览器,请将 neea.edu.cn 域名添加到兼容性站点列表中. 解决方法2:如果你是程序员,就跟踪一下报错原因,例如笔 ...

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

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

最新文章

热门文章