精华内容
下载资源
问答
  • Vue监听手机滑动事件vue-touch

    万次阅读 2019-10-22 15:17:22
    使用vue-touch插件手机滑动事件的监听,及后续操作的执行。 源码工程地址:VueTouch 效果图 安装 npm install vue-touch@next 使用方式 步骤一:main.js中引入vue-touch //main.js中引入: import VueTouch from '...

    介绍

    使用vue-touch插件手机滑动事件的监听,及后续操作的执行。

    源码工程地址:VueTouch

    效果图

    在这里插入图片描述

    安装

    npm install vue-touch@next
    

    使用方式

    步骤一:main.js中引入vue-touch

    //main.js中引入:
    import VueTouch from 'vue-touch'
    Vue.use(VueTouch, {name: 'v-touch'})
    
    

    步骤二:实现滑动监听代码

    export default {
      name: 'vue_touch_index',
      data: () => ({
        img_list: [
          {
            src: '../../static/img/vue_touch_img_1.png'
          },
          {
            src: '../../static/img/vue_touch_img_2.png'
          },
          {
            src: '../../static/img/vue_touch_img_3.png'
          },
          {
            src: '../../static/img/vue_touch_img_4.png'
          },
        ],
        selected: 0
      }),
      methods: {},
      render(h) {
        return h('div', {
          staticClass: 'col-grow items-center text-center q-pa-sm'
        }, [
          h('v-touch', {
            on: {
              swipedown: () => {
                this.selected = this.selected === 0 ? 0 : this.selected - 1
                if (this.selected === 0)
                  this.$q.ok("已到顶!")
              },
              swipeup: () => {
                this.selected = this.selected === 3 ? 3 : this.selected + 1
                if (this.selected === 3)
                  this.$q.ok("已到底!")
    
              }
            }
    
          }, [
            h('img', {
              style: {
                height: '100%',
                width: '400px'
              },
              attrs: {
                src: this.img_list[this.selected].src
              }
            })
          ])
        ])
      }
    }
    
    
    

    事件列表

    在这里插入图片描述

    事件名称事件描述
    pan在指定的 DOM 区域内,一个手指放下并移动事件,即触屏中的拖动事件
    panstart拖动开始
    panmove拖动过程
    panend拖动结束
    pancancel拖动取消
    panleft向左拖动
    panright向右拖动
    panup向上拖动
    pandown向下搬动
    swipe在指定的 DOM 区域内,一个手指快速的在触屏上滑动,即平时用到最多的滑动事件
    swipeleft向左滑动
    swiperight向右滑动
    swipeup向上滑动
    swipedown向下滑动
    pinch在指定的 DOM 区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件
    pinchstart多点触控开始
    pinchmove多点触控过程
    pinchend多点触控结束
    pinchcancel多点触控取消
    pinchin多点触控时两手指越来越近
    pinchout多点触控时两手指越来越远
    press在指定的 DOM 区域内,这个事件相当于 PC 端的 Click 事件,不能包含任何的移动,最小按压时间为 500ms,常用于我们在手机上用的复制粘贴等功能
    pressup点击事件离开时触发
    tap在指定的 DOM 区域内,一个手指轻拍或点击时触发该事件(类似 PC 端的 click),该事件最大点击时间为 250ms,如果超过 250ms 则按 press 事件处理
    rotate在指定的 DOM 区域内,当两个手指或更多手指呈圆型旋转时触发
    rotatestart旋转开始
    rotatemove旋转过程
    rotateend旋转结束
    rotatecancel旋转取消

    插件地址:vue-touch

    展开全文
  • vue 所有按钮、vue Button 所有属性、vue a-button 所有属性、vue 按钮所有属性...import { Button } from ‘ant-design-vue’; Vue.use(Button); 1.按钮类型 Primary Default Dashed Danger Link ...

    vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue

    1.组件注册

    import { Button } from ‘ant-design-vue’;
    Vue.use(Button);

    1.按钮类型

    在这里插入图片描述
    按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

    <template>
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="danger">Danger</a-button>
        <a-button type="link">Link</a-button>
      </div>
    </template>
    

    2.按钮组合

    在这里插入图片描述
    可以将多个 Button 放入 Button.Group 的容器中。
    通过设置 sizelarge small 分别把按钮组合设为大、小尺寸。若不设置 size,则尺寸为中。

    <template>
      <div id="components-button-demo-button-group">
        <h4>Basic</h4>
        <a-button-group>
          <a-button>Cancel</a-button>
          <a-button type="primary">OK</a-button>
        </a-button-group>
        <a-button-group>
          <a-button disabled>L</a-button>
          <a-button disabled>M</a-button>
          <a-button disabled>R</a-button>
        </a-button-group>
        <a-button-group>
          <a-button type="primary">L</a-button>
          <a-button>M</a-button>
          <a-button>M</a-button>
          <a-button type="dashed">R</a-button>
        </a-button-group>
    
        <h4>With Icon</h4>
        <a-button-group>
          <a-button type="primary">
            <a-icon type="left" />Go back
          </a-button>
          <a-button type="primary">
            Go forward<a-icon type="right" />
          </a-button>
        </a-button-group>
        <a-button-group>
          <a-button type="primary" icon="cloud" />
          <a-button type="primary" icon="cloud-download" />
        </a-button-group>
      </div>
    </template>
    <style>
    #components-button-demo-button-group h4 {
      margin: 16px 0;
      font-size: 14px;
      line-height: 1;
      font-weight: normal;
    }
    #components-button-demo-button-group h4:first-child {
      margin-top: 0;
    }
    #components-button-demo-button-group .ant-btn-group {
      margin-right: 8px;
    }
    </style>
    

    3.不可用状态

    在这里插入图片描述
    添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变

    <template>
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button type="primary" disabled>Primary(disabled)</a-button>
        <br />
        <a-button>Default</a-button>
        <a-button disabled>Default(disabled)</a-button>
        <br />
        <a-button type="dashed">Dashed</a-button>
        <a-button type="dashed" disabled>Dashed(disabled)</a-button>
        <br />
        <a-button type="link">Link</a-button>
        <a-button type="link" disabled>Link(disabled)</a-button>
        <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
          <a-button ghost>Ghost</a-button>
          <a-button ghost disabled>Ghost(disabled)</a-button>
        </div>
      </div>
    </template>
    

    4.幽灵按钮

    在这里插入图片描述
    幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。

    <template>
      <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
        <a-button type="primary" ghost>Primary</a-button>
        <a-button ghost>Default</a-button>
        <a-button type="dashed" ghost>Dashed</a-button>
        <a-button type="danger" ghost>Danger</a-button>
        <a-button type="link" ghost>Link</a-button>
      </div>
    </template>
    

    5.图标按钮

    在这里插入图片描述
    当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件。
    如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。

    <template>
      <div>
        <a-button type="primary" shape="circle" icon="search"></a-button>
        <a-button type="primary" icon="search">Search</a-button>
        <a-button shape="circle" icon="search" />
        <a-button icon="search">Search</a-button>
        <a-button shape="circle" icon="search" />
        <a-button icon="search">Search</a-button>
        <a-button type="dashed" shape="circle" icon="search" />
        <a-button type="dashed" icon="search">Search</a-button>
      </div>
    </template>
    

    6.加载中状态

    第三个按钮为悬浮:
    在这里插入图片描述
    添加 loading 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。

    <template>
      <div>
        <a-button type="primary" loading>
          Loading
        </a-button>
        <a-button type="primary" size="small" loading>
          Loading
        </a-button>
        <br />
        <a-button type="primary" :loading="loading" @mouseenter="enterLoading">
          mouseenter me!
        </a-button>
        <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
          延迟1s
        </a-button>
        <br />
        <a-button shape="circle" loading />
        <a-button type="primary" shape="circle" loading />
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          loading: false,
          iconLoading: false,
        }
      },
      methods: {
        enterLoading () {
          this.loading = true
        },
        enterIconLoading () {
          this.iconLoading = { delay: 1000 }
        },
      },
    }
    </script>
    

    7.多个按钮组合

    在这里插入图片描述
    按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到 Dropdown.Button 中组合使用。

    <template>
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button>secondary</a-button>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1">1st item</a-menu-item>
            <a-menu-item key="2">2nd item</a-menu-item>
            <a-menu-item key="3">3rd item</a-menu-item>
          </a-menu>
          <a-button>
            Actions <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
    </template>
    <script>
    export default {
      methods: {
        handleMenuClick(e) {
          console.log('click', e);
        }
      }
    }
    </script>
    

    8.按钮尺寸

    在这里插入图片描述
    按钮有大、中、小三种尺寸。
    通过设置 sizelarge small 分别把按钮设为大、小尺寸。若不设置 size,则尺寸为中。

    <template>
      <div>
        <a-radio-group :value="size" @change="handleSizeChange">
          <a-radio-button value="large">Large</a-radio-button>
          <a-radio-button value="default">Default</a-radio-button>
          <a-radio-button value="small">Small</a-radio-button>
        </a-radio-group>
        <br /><br />
        <a-button type="primary" :size="size">Primary</a-button>
        <a-button :size="size">Normal</a-button>
        <a-button type="dashed" :size="size">Dashed</a-button>
        <a-button type="danger" :size="size">Danger</a-button>
        <a-button type="link" :size="size">Link</a-button>
        <br />
        <a-button type="primary" shape="circle" icon="download" :size="size" />
        <a-button type="primary" icon="download" :size="size">Download</a-button>
        <br />
        <a-button-group :size="size">
          <a-button type="primary">
            <a-icon type="left" />Backward
          </a-button>
          <a-button type="primary">
            Forward<a-icon type="right" />
          </a-button>
        </a-button-group>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          size: 'large',
        }
      },
      methods: {
        handleSizeChange (e) {
          this.size = e.target.value
        },
      },
    }
    </script>
    

    9.block 按钮

    在这里插入图片描述
    block属性将使按钮适合其父宽度。

    <template>
      <div>
        <a-button type="primary" block>Primary</a-button>
        <a-button block>Default</a-button>
        <a-button type="dashed" block>Dashed</a-button>
        <a-button type="danger" block>Danger</a-button>
        <a-button type="link" block>Link</a-button>
      </div>
    </template>
    

    2.API

    1.属性:

    推荐顺序为:type -> shape -> size -> loading -> disabled

    属性说明类型默认值
    disabled按钮失效状态booleanfalse
    ghost幽灵属性,使按钮背景透明,版本 2.7 中增加booleanfalse
    href点击跳转的地址,指定此属性 button 的行为和 a 链接一致string-
    htmlType设置 button 原生的 type 值,可选值请参考 HTML 标准stringbutton
    icon设置按钮的图标类型string-
    loading设置按钮载入状态boolean | { delay: number }false
    shape设置按钮形状,可选值为 circle round 或者不设string-
    size设置按钮大小,可选值为 small large 或者不设stringdefault
    target相当于 a 链接的 target 属性,href 存在时生效string-
    type设置按钮类型,可选值为 primary dashed danger link 或者不设string-
    block将按钮宽度调整为其父宽度的选项booleanfalse

    2.事件

    事件名称说明回调参数
    click点击按钮时的回调(event) => void
    展开全文
  • vue render 嵌套 iview Poptip 及on-ok事件

    千次阅读 2019-01-11 10:25:22
    'on-ok': ()=> { //调用删除方法 this.remove(params.index) console.log('删除') }, 'on-cancel': ()=> { console.log('取消') } } },[ h('Button', { props: { type: 'error', size: 'small' }, ...
    columns4: [
      {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.modalShow(params.index)
              }
            }
            }, '编辑'),
            h('Poptip', {
              style:{
                textAlign: 'left'
              },
              props: {
                placement:'left-start',
                confirm: true,
                title: '确定删除吗?',
              },
              on: {
                // 必须是箭头函数写法
                'on-ok': ()=> {
                  //调用删除方法
                  this.remove(params.index)
                    console.log('删除')
                },
                'on-cancel': ()=> {
                    console.log('取消')
                }
              }
            },[
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    //this.remove(params.index)
                  }
                }
              }, '删除')
            ]),
          ]);
        }
      }
    ],
     

     

    展开全文
  • vue 右键 单击 事件

    万次阅读 2019-04-28 16:33:20
    1. 去掉浏览器默认事件,添加自定义事件 @contextmenu.prevent="show()" //show 为自定义事件 上代码: <button type="button" class="btn btn-primary" @contextmenu.prevent="show()">保存</...

    1. 去掉浏览器默认事件,添加自定义事件

         @contextmenu.prevent="show()"  //show 为自定义事件

    上代码:

       

    <button type="button" class="btn btn-primary" @contextmenu.prevent="show()">保存</button>

    自定义方法:

    methods:{ 
    show:function(){
          alert("触发了右击事件");
        },
    }

    Ok!!!

    展开全文
  • vue 回车事件 失焦事件

    千次阅读 2019-12-13 17:55:54
    Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <input @keyup.enter=“submit”> 在使用过程中,如果页面只针对一个Input添加键盘enter事件,可以直接按照官方文档定义的别名增加相应事件就可以了 ...
  • Vue拖放库,没有任何依赖关系。 为Vue提供的本机HTML5拖放实现。 安装 npm install vue-draggable <!-- or --> yarn add vue-draggable 设置 安装插件 import Vue from 'vue' import VueDraggable from '...
  • vue事件绑定详解

    千次阅读 2017-05-31 22:42:22
    在上篇中,我们说到了Vue时间绑定用v-on,今天我们就来详细说说。缩写:@修饰符:.stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式...
  • 最近在搞收银台页面调用终端机的项目,上面领导只是给了一个原生js的demo,让用vue写页面,搞了一天没怎么出成果,最后是监听事件的锅,别的不多说,直接上代码: 写在created里面就好了,ok啦 ...
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。
  • vue事件之vm.$on事件和v-on事件

    千次阅读 2019-10-14 21:58:38
    vm.$on: 看vue官网对vm.$on事件的理解是:它监听当前实例上的自定义事件事件可以有vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 v-on:vue官网对其用法的描述是,绑定事件的监听器。事件类型有...
  • 原因:根据vue官方文档,得知click事件作用于组件内部,如果组件内没有写click事件,便会无响应。 解决办法:可以用@click.native=“click”解决 <quit @click.native="clickQuit()" v-if="show"></quit...
  • vue中比如你给父元素设置了鼠标点击事件,父元素的儿砸也设置了点击事件,但是有时候点击了儿...在vue中我们怎么阻止呢接下来我们来看在vue中怎么阻止冒泡与捕获事件的 请各位看下面代码 .stop 阻止冒泡事件 .cap...
  • vue】使用vue-cli4.0快速搭建一个项目

    万次阅读 多人点赞 2019-10-25 10:38:43
    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁...
  • 最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的...
  • vue-阻止默认事件

    2019-09-24 08:07:36
    <div id="app"> <!--<div @click=""></div> <div :bind></div>...div v-if="ok">123</div>--> <!--<div v-else-if="ok">qwer</...
  • Vue基础

    万次阅读 2020-11-04 16:54:30
    Vue入门 一、什么是vue? JavaScript的框架 框架是不同于向jQuery这样的js库,框架需要遵守它的规则,才能使用 二、vue的特点 JavaScript框架 简化Dom操作 响应式数据驱动 三、实现第一个vue程序 导入vue.js...
  • Vue基本使用

    万次阅读 2021-01-19 19:06:43
    Vue 快速使用 第一步 引入vue.js [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdShsdmF-1611054368487)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-...
  • Vue教程

    千次阅读 2019-08-05 09:42:57
    Vue安装与使用 Vue起步 Vue基本结构 Vue基本指令 Vue绑定样式 Vue循环指令 Vue条件语句 Vue过滤器 Vue按键修饰符 Vue自定义指令 Vue监听属性 Vue计算属性 Vue生命周期 Vue ajax 安装方法 get方法 post方法 axios API...
  • vue-vueadmin记录

    千次阅读 2019-09-23 19:14:19
    title: vue-vueadmin记录 categories: Vue tags: [vue, vueadmin, js, 记录] date: 2019-09-06 17:37:10 comments: false vue-vueadmin记录 相关资料 官方资料 GitHub - ...
  • vue按钮绑定事件向后台传值

    热门讨论 2021-05-20 15:20:45
    前台vue代码: <el-button :disabled="changeBtn" plain @click="remoteCon(1)" :class="pixelType == 0 ? 'btnin' : ''" >前进</el-button > 四个按钮都绑定remoteCon()事件,参数分别为1,2...
  • vue 树形菜单事件 右击自定义菜单

    千次阅读 2019-05-03 20:14:06
    效果图: 精髓代码: 父组件: 树形结构加自定义菜单 添加 修改 删除 引入树体 import myTree from "./treeMenu.vue"; 定义树体及数据 data() { return { theData: myData, menuName: "menuName", // 显示菜单名称的...
  • vue2-dragula:OK_hand:拖放是如此简单,以至于对@ dstray-git提供的vue-dragula进行拖放的dragula drag'n drop库的Vue包装程序造成了伤害。 这个库已经是vue2-dragula:OK_hand:拖放是如此简单,以至于伤害了Vue包装...
  • 狂神说Vue笔记整理

    万次阅读 多人点赞 2020-12-11 09:13:04
    狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网...
  • vue全套教程(实操)

    万次阅读 多人点赞 2020-03-15 00:37:42
    一、MVVM模式和第一个Vue程序 1.什么是 MVVM 该层向上与视图层进行双向数据绑定 向下与 Model 层通过接口请求进行数据交互 2.第一个Vue程序  1、创建一个 HTML 文件  2、引入 Vue.js <script src=...
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • 作者 | Jeskson 来源 | 达达前端小酒馆 Vue概述: MVX模式简介,Vue框架简介,Vue.js的...Vue事件与表单: 事件处理,事件对象,事件委派,表单处理 MVX模式简介: MVX框架模式:MVC+MVP+MVVM MVC: Model模型+V...
  • vue的回车键按下触发登录事件

    千次阅读 2019-09-23 14:43:23
    created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } methods:{ async login() { this.$refs.form.validate(_ => { if (_) { c...
  • coderwhy vue讲义

    2020-11-10 11:06:03
    B站最火的vue资料,超级nice,ok
  • vue入门

    千次阅读 2020-02-13 21:06:16
    会创建Vue实例,知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 了解vue-router使用 0.前言 前几天我们已经对后端的技术栈有了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,687
精华内容 14,674
关键字:

ok事件vue

vue 订阅