some vue components base on flexible
基于手淘 flexible.js 的 Vue 组件
前言:
- 目前手头的移动端Vue项目是用手淘的 lib-flexible 作适配的,并用 px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible。
- 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷。
- 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中常用的、简单的 组件单独拎出来。
- 此为小白之作,论代码质量、难易程度、复用度,远不及各位大佬之杰作,求轻喷。同时,也恳请各位,提出意见和建议,不胜感激!
- GitHub地址:vue-flexible-components
-
-
-
组件位置:src/components/TextScroll.vue(不能npm,只能手动下载使用)
-
下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用
-
props
props 说明 类型 可选值 默认值 dataList 滚动文字数据
(由于数据结构不同,需更改组件内的dom结构)Array [ ] scrollType 滚动效果 String 'scroll-up'
'scroll-up-linear'
'scroll-left'
'scroll-left-linear''scroll-up' -
示例
<text-scroll :dataList="data" scrollType="scroll-up" > </text-scroll>
-
-
-
-
组件位置:src/components/TextScroll.vue(不能npm,只能手动下载使用)
-
下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用
-
props
props 说明 类型 可选值 默认值 toastShow 控制显示框显示、隐藏。需添加.sync修饰符才能自动关闭,详见例子 Boolean false
truefalse message 提示信息 String iconClass icon小图标 String success
warning
closeiconImage 自定义小图标(图片需require引入) duration 定时器(毫秒),控制弹框显示时间,负数代表不执行定时任务 Number 1500 position 弹框位置(距顶) String '50%' -
$emit
$emit 说明 参数 toastClose 弹框关闭回调 -
示例
// 默认效果,只有提示信息 <toast message = '默认信息' :toastShow.sync = 'isShow1' // 需添加.sync修饰符,才能达到自动关闭的效果,否则只能监听toastClose手动关闭 ></toast> // 关于sync的说明,请看官网(主要是为了达到双向数据绑定,子组件修改父组件状态) // 增加自带小图标 <toast message = 'success' iconClass = 'success' :toastShow.sync = 'isShow2' ></toast>
// 自定义类型 <toast message = '自定义' position = '70%' :duration = '-1' //负数代表不执行定时任务,自己根据需要去关闭 :iconImage='bg' // 自定义icon小图标,在data中需require引入,看下面 :toastShow = 'isShow5' // 因为需要手动关闭,所以不需要.sync了 @toastClose = 'isClose5' // 监听回调,手动关闭,看下面 ></toast> data() { return { this.isShow5 : true, bg: require('../assets/logo.png'), // 图片必须用require进来 } }, isClose5() { setTimeout(()=>{ this.isShow5 = false; }, 2000) }
-
# install dependencies
npm install
# serve with hot reload at localhost:8780
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.