Ant Design Vue教程

Ant Design Vue Slider change 拖动事件

Ant Design Vue Slider change 拖动事件,即一直拖动一直会触发这个事件,和afterChange事件不同的是,afterChange事件需要松开鼠标才会触发。

webpack方式

<template>
  <div>
    <a-slider @change="change"/>
    <div> {{currVal}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currVal: '',
    };
  },
  methods: { 
    //change事件
   change(value){
     this.currVal=value
   }
  },
};
</script>

浏览器直接引入JS方式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue slider change事件例子</title>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
   <!--浏览器方式下有些事件无法响应,需要引入vue-dash-event插件-->
<script src="https://www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
    <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css?aaa" rel="stylesheet" />
    <style>
        body {
            padding: 10px
        } 
    </style>
</head>
<body>
<div id="app"> 
 <a-slider @change="change"></a-slider> 
  <div> {{currVal}}</div>
</div>
<script>
 Vue.use(window['vue-dash-event']);
 var app = new Vue({
    el: '#app',
     data() {
       return {
      currVal: '',
        };
    },
    methods: {
    change(value){
    this.currVal=value;
     }
  },
});
 </script>
</body>
</html>

例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Slider 滑动输入条 Slider 属性 afterChange 事件 change 拖动事件 Switch 开关