Element中Slider滑块的具体使用

组件—滑块

基础用法

<template>
 <div class="block">
  <span class="demonstration">默认</span>
  <el-slider v-model="value1"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">自定义初始值</span>
  <el-slider v-model="value2"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">隐藏 Tooltip</span>
  <el-slider v-model="value3" :show-tooltip="false"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">格式化 Tooltip</span>
  <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">禁用</span>
  <el-slider v-model="value5" disabled></el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value1: 0,
    value2: 50,
    value3: 36,
    value4: 48,
    value5: 42
   }
  },
  methods: {
   formatTooltip(val) {
    return val / 100;
   }
  }
 }
</script>

离散值

<template>
 <div class="block">
  <span class="demonstration">不显示间断点</span>
  <el-slider
   v-model="value1"
   :step="10">
  </el-slider>
 </div>
 <div class="block">
  <span class="demonstration">显示间断点</span>
  <el-slider
   v-model="value2"
   :step="10"
   show-stops>
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value1: 0,
    value2: 0
   }
  }
 }
</script>

带有输入框

<template>
 <div class="block">
  <el-slider
   v-model="value"
   show-input>
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: 0
   }
  }
 }
</script>

范围选择

<template>
 <div class="block">
  <el-slider
   v-model="value"
   range
   show-stops
   :max="10">
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: [4, 8]
   }
  }
 }
</script>

竖向模式

<template>
 <div class="block">
  <el-slider
   v-model="value"
   vertical
   height="200px">
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: 0
   }
  }
 }
</script>

展示标记

<template>
 <div class="block">
  <el-slider
   v-model="value"
   range
   :marks="marks">
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: [30, 60],
    marks: {
     0: '0°C',
     8: '8°C',
     37: '37°C',
     50: {
      style: {
       color: '#1989FA'
      },
      label: this.$createElement('strong', '50%')
     }
    }
   }
  }
 }
</script>

Attributes

Events

到此这篇关于Element中Slider滑块的具体使用的文章就介绍到这了,更多相关Element Slider滑块内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • PyQt5每天必学之滑块控件QSlider

    QSlider 是一个具有可来回拉动手柄的控件.有时使用滑块比输入数字或使用旋转框更方便. 在我们的例子中,我们将创建一个滑块和一个标签.标签显示图像.滑块将控制标签显示的图像. #!/usr/bin/python3 # -*- coding: utf-8 -*- """ PyQt5 教程 这个例子显示了一个QSlider控件的使用方法. 作者:我的世界你曾经来过 博客:http://blog.csdn.net/weiaitaowang 最后编辑:2016年8月3日 &quo

  • Java Swing JSlider滑块的实现示例

    Java Swing JSlider滑块的实现示例

    1. 概述 官方JavaDocsApi: javax.swing.JSlider JSlider,滑块. 以图形方式在有界区间内通过移动滑块来选择值的组件. 滑块可以显示主刻度标记以及主刻度之间的次刻度标记.刻度标记之间的值的个数由 setMajorTickSpacing(int) 和 setMinorTickSpacing(int) 来控制.刻度标记的绘制由 setPaintTicks(boolean) 控制. 滑块也可以在固定时间间隔(或在任意位置)沿滑块刻度打印文本标签.标签的绘制由 se

  • WPF滑块控件(Slider)的自定义样式

    前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出界面如下.我们点击确定. 点击确定后,我们的页面的Resources中,增加了一系列样式代码,而滑块代码会被修改为如下样子: 可以看到,系统为我们的Slider控件增加了样式--Style="{DynamicResource SliderStyle1}" 现在我们查看样式SliderSty

  • iOS中的UISlider滑块组件用法总结

    PC上的滑块是很丑陋的,因为我们只能通过鼠标去拖动他.不过当Jobs把它移植到IOS上时一切变得酷起来,因为我们可以通过手指去拖动它,这种感觉是很妙的. 滑块为用户提供了一种可见的做范围调整的方法,用户可以通过拖动一个滑动条改变它的值,并且可以对其配置以合适不同值域.你可以设置滑块值的范围,也可以在两端加上图片,以及进行各种调整让它更美观.滑块非常适合用于表示在很大范围(但不精确)的数值中进行选择,比如音量设置.灵敏度控制等诸如此类的用途. 一.创建 滑块是一个标准的UIControl.我们可以

  • jQuery插件slider实现拖动滑块选取价格范围

    jQuery插件slider实现拖动滑块选取价格范围

    在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式.本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解. jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件.要想实现滑块拖动,需要在页面head间先载入如下js. <script type="text/javascript" src="js/jquery.js"><

  • Element中Slider滑块的具体使用

    组件-滑块 基础用法 <template> <div class="block"> <span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider> </div> <div class="block"> <span class=&quo

  • 创建图片对比slider滑块示例详解

    目录 引言 CSS JavaScript 定义 HTML 结构 定义 CSS 样式 实际代码 引言 在这篇文章, 我们会创建一个 slider 滑块来对比两张图片. 老样子,话不多说,先看效果. CSS .container { position: relative; } .resizer { background-color: #cbd5e0; cursor: ew-resize; height: 100%; left: 50%; position: absolute; top: 0; wid

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • vue element中axios下载文件（后端Python）

    •axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c

  • Element中的Cascader（级联列表）动态加载省\市\区数据的方法

    element中的cascader其实是有动态加载次级选项的方法. 方法的原理是利用址(引用)传递,动态修改:options. var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: "tom"} http://element-cn.eleme.io/#/zh-CN/component/cascader#dong-tai-jia-zai-ci-ji-xuan-xiang 其中找到究竟需要在那层添加数据就变成

  • element 中 el-menu 组件的无限极循环思路代码详解

    实现思路主要组件嵌套(组件自己调用自己) 下面是组件所需要的数据 { "code": 1, "data": { "menuVoList": [ { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587610158, &q

  • element中el-container容器与div布局区分详解

    用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-aside:侧边栏容器. el-main:主要区域容器. el-footer:底栏容器. 以上组件采用了 flex 布局,elemen-ui官方文档链接: http://element-cn.eleme.io/#/zh-CN/component/container 此外,el-container 的子元

  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf

  • element中的$confirm的使用

    可以诸如此类的封装一下 /* * 公用提示窗 * @export * @param {string}[desc="确认操作"]弹框提示文字 * @param {string}[title="提示"]弹框标题 * @param{string}[confirmButtonName ='确认']确认按钮文字 * @param {string}[cancelButtonName="取消"] 取消按钮文字 * @param{boolean}[disting

  • element中table高度自适应的实现

    1.开发环境 vue+element 2.电脑系统 windows10专业版 3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下: 4.在对应的vue模板中添加如下代码: <el-table :data="tableData" row-key="id" sortable style="width: 96%" :

随机推荐