基于vue使用awe-dnd组件实现拖拽排序
基于vue使用awe-dnd组件实现拖拽排序
awe-dnd 一款可任意拖动排序的vue插件。支持桌面和移动端,拖拽过渡动画美观。支持vue1和vue2版本。awe-dnd文档地址:https://www.npmjs.com/package/awe-dnd安装:npm install awe-dnd --save引入:import VueDNDfrom'awe-dnd' Vue.use(VueDND)html部
浏览:70 标签: awe-dnd 拖拽 vue
Vue自定义指令v-drag实现简单的拖拽效果
Vue自定义指令v-drag实现简单的拖拽效果
自定义指令v-drag (1)l 存在时 只能横向拖拽;(2)t 存在时 只能纵向拖拽;(3)l、t都存在时 可以任意方向拖拽;代码如下:<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-sca
浏览:65 标签: 拖拽 vue
Vue实现拖拽功能
Vue实现拖拽功能
1. 拖拽样式如下图,我们想实现的效果为:当方块从上方灰块被拖拽到下方时,下方灰块中会出现该方块。让我们先把以上页面效果实现:<stylescoped>.drag-field,.drop-field{height:10rem;box-sizing: border-box;padding:1rem;background-color:#eee;margin-top:1rem
浏览:57 标签: 拖拽 Vue
vue实现移动端瀑布流分页布局
vue实现移动端瀑布流分页布局
讲到瀑布流分页有一个方法一定是要用到的 pullToRefresh(),或者说还有一种代码量比较少,但是看起来不怎么高端的这个也没什么好解释的,想了解的可以去百度一下html代码:<divid="main"class="content"style="background-color: #FFFFFF; width: 100%;height:100%;position: ab
浏览:59 标签: 瀑布流布局 vue
vue实现瀑布流布局
vue实现瀑布流布局
h5列表的瀑布流布局也是很常见的,今天我们就来盘一下vue版的瀑布流布局方式。效果图:代码// 安装组件vue-waterfall2npn install vue-waterfall2 -S// main.js 注册使用组件import waterfall from 'vue-waterfall2'Vue.use(waterfall)// list.vue
浏览:74 标签: 瀑布流布局 vue
Vue自定义日历组件
Vue自定义日历组件
今天给大家介绍Vue的日历组件,可自定义样式、日历类型及支持扩展,可自定义事件回调、Props数据传输。线上demo演示:https://daishengloda.github.io/review/dist/index.html#/calendar效果图Template代码<Calendar:sundayStart="true":calendarType="1":mar
浏览:71 标签: 日历 vue
vue模仿机票自定义日历组件(区间选择)
vue模仿机票自定义日历组件(区间选择)
效果图:1. 创建组件  components > calander > index.vue<template><divclass="page"v-if="show"><divclass="box"><divclass="box_head"v-if="!propshow"><divclass="font28" @click="calanderShowData">取消</di
浏览:62 标签: 日历 vue
Vue自定义日历插件(可以选择日期区间段)
Vue自定义日历插件(可以选择日期区间段)
日历功能:1. 默认选择今天的日期时间段(1) 默认状态(默认选择当前日期的时间段(蓝底背景色代表选中时间段);(2) 当前日期之前的时间不可以选择(禁用了点击事件);(3) 当日历上的操作的年份月份小于当前时间的年份月份时禁止点击上一月的按钮;效果图:2. 选中状态(1) 可以跨年分跨月份选择;(2) 点击取消按钮时回复到默认的选择时间;效果图:代码如
浏览:69 标签: 日历 Vue
vue自定义日历:根据日期展示商品当天的价格
vue自定义日历:根据日期展示商品当天的价格
需求内容:根据不同时间段展示不同价格的日历。后端返回的数据结构如下:前端效果如下:========开始前我们先了解下获取日期的几个必要的知识点(1) 现在是12月,通过getMonth()获得的就是11,获取其它时间节点即是对应的数据(2) 获取指定日期的第一天和最后一天,知道上面的获取月份,现在我们想要获取4月份的第一天和最后一天:========封装
浏览:74 标签: 日历 vue
vue中引入高德地图实现定位功能
vue中引入高德地图实现定位功能
某次项目开发中,需要实现在web端实现定位功能。即实现在web端搜索定位的功能。首先看一下效果如下:功能也相对不是很难,就是需要调用调用地图插件来完成页面地图的加载与显示,本来是打算选取某度的地图,偶然发现高德地图的api也很详细,所以来尝试一下。闲话少说,看具体实现。1. 首先申请一个高德地图的开发平台秘钥这个秘钥在我们调用高德地图的api中需要使用到,所以必须要申请一
浏览:125 标签: 高德地图 vue
基于Vue结合高德地图api做的一个坐标拾取组件
基于Vue结合高德地图api做的一个坐标拾取组件
描述最近需要做一个地图坐标拾取的功能,根据用户点击的位置,获取当前点击位置的经纬度。根据用户输入的经纬度然后标记到那个点位。用高德地图写了一个这样的组件。实际效果如下图:说明如果对高德地图很熟悉的话,其实实现很简单。用户点击地图获取经纬度实现:监听用户在地图上的点击事件,获取到点击位置的经纬度,然后拿着这个经纬度,高德地图有个点标记工具,在那个位置标记这个点。用户输
浏览:87 标签: Vue 高德地图
Vue引入百度地图API,添加点击地图拾取坐标并且标记和地址搜索功能
Vue引入百度地图API,添加点击地图拾取坐标并且标记和地址搜索功能
html页面<template><el-form><el-row:gutter="24"><el-col:span="12"><el-col:span="12"><el-form-itemlabel="位置经度"prop="lng"><el-inputv-model="model.lng"type="number"class="input_number"
浏览:64 标签: Vue 百度地图

邮箱快速注册

忘记密码