<template> <div class="content-container"> <div class="content-container-item content"> <!-- 使用transition加过渡效果 --> <transition-group tag="div" class="content-inner" name="list" m

Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式

git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 better-scroll 的实现. 在线例子 起步 安装 npm i --save vue-sliding-button 引入 import Vue from 'vue' import SlidingButton from 'vue-sliding-button' Vue.use(SlidingButt

写在前面的 这个人第一次尝试开发并发布一个 vue 的组件,该组件实现了类似 ios 手机淘宝客户端 -> 消息界面中消息的滑动删除功能等,如下为该组件的文档. 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 better-scroll 的实现. 在线例子 起步 安装 npm i --save vue-sliding-button 引入 import Vue from 'vue' import SlidingButton from 'vue-sliding-button' Vue.use(

前段时间有朋友私信我 Vue + TypeScript 的问题,然后就打算写一篇 Vue + TypeScript 封装组件的文章 正好公司项目中需要封装一个表头查询组件,就拿出来分享一下~ 组件的整体思路是通过一个 config 数组生成列表的头部表单: PS:配合<Vue 爬坑之路(九)—— 用正确的姿势封装组件>食用更佳 一.组件设计 这个组件由两部分组成:输入组件和按钮 其中输入组件可以通过 v-for 循环渲染,并通过 v-if 来切换输入框 input 和下拉框 select 每个

原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就叫 vii ,记录下在开发过程中遇到的 知识点 (都算比较基础,具体代码不会贴太多,都可以在 项目 仓库里看到). 上传文件很多项目都要用到,一些组件库里(ele/iview...) 文件上传组件 都是做成了标配,虽然 vii 和 uploader 定位还是有些差别,但实现上都有几个共同要点: 样子

在windows phone中,对于一个页面中 有图片列表的,滑动的时候,很容易被误认为是点击了图片,而打开图片详细信息等,原意是滑动列表,由此对图片添加2个事件,来控制其点击行为(滑动的时候,基本不会执行到do clicked something处)   private bool _isClickEnable = false; private DateTime _clickedTime;   private void Img1_OnMouseLeftButtonDown(object send

刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代码,其中的<page></page>就是分页组件 <div id="searchDiv"> <div style="width: 100%"> <label style="width: 5%"&g

列表查询组件代码, 简化拼接条件SQL语句的麻烦 多条件查询

v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 从0.x迁移 你需要做的唯一改动就是手动引入样式文件: 1 import 'viewerjs/dist/viewer.css' 安装 使用npm命令安装 1 npm install v-viewer 使用 引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用. 12345678910111213141516171819202122232425 <template>

本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页,引入文件路径需要自己更改 citySelect.js文件为拼音检索 目前是没有引入使用 有需要使用自取 链接:https://pan.baidu.com/s/1yBO0dqhfmXzITmWrMRI0ng 提取码:z05u 其他需求也可以自己添加,如有不懂的或者需要二级市下面的区县数据请+博主Q

简单介绍v-viewer的两种使用方法: Demo 安装依赖: npm install v-viewer --save 全局引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) 数据格式: 一:点击图片列表预览图片 <viewer :images="imagesList"> <img v-for="src in imagesList" :

Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考虑IE我们也可以在封装组件的时候为其兜底,本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口. 描述 先考虑首屏场景,当做一个主要为展示用的首屏时,通常会加载较多的资源例如图片等,如果我们不想在用户打开时就加载所有资源,而是希望

因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换.当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不甘心,就在GitHub找找找.........还真找到一个适合vue的插件,叫 viewerjs ,GitHub地址:https://github.com/fengyuanchen/viewerjs . 说实话,它的功能还是很多很强大的,大家可以自己去看.主要使用的旋转.翻转.缩放.上下切换.键盘操

技术栈 vite2 vue 3.0.5 vue-router 4.0.6 vue-data-state 0.1.1 element-plus 1.0.2-beta.39 前情回顾 表单控件 查询控件 轻量级状态管理 前面介绍的表单控件和查询控件,都是原子性的,实现自己的功能即可. 而这里要介绍的是管理后台里面的各个组件之间的状态关系. 为啥需要状态?因为组件划分的非常原子化(细腻),所以造成了很多的组件,那么组件之间就需要一种"通讯方式",这个就是状态了.不仅仅是传递数据,还可以实现事

最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影

一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目开发中图片的各种使用问题,经过总结,把一些经验分享一下.内容包括: WPF常用图像数据源ImageSource的创建: 自定义缩略图控件ThumbnailImage,支持网络图片.大图片.图片异步加载等特性: 动态图片gif播放控件: 图片列表样式,支持大数据量的虚拟化: 二． WPF常用图像数据源

本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能使用ViewPager控件. 2. 图片的自动切换: 可使用Timer或者ScheduledExecutorService,这个有多重方式可以实现. 同时要切换底部的dots(园点) 3.Handler+Message机制更新UI,这个相信大家都很熟练,不再描述 4. 实现的一些细节:注意本例中的优

本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一． 加载方式//class 加载方式<input class="easyui-slider" value="12" style="width:300px"data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />//J