vue-flexible-components

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

TextScroll -- 文字滚动

• 效果展示

  

• 使用说明

  • 组件位置：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>
    

Toast -- 显示框

• 效果展示

  

• 使用说明

  • 组件位置：src/components/TextScroll.vue（不能npm，只能手动下载使用）

  • 下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用

  • props

    props	说明	类型	可选值	默认值
    toastShow	控制显示框显示、隐藏。需添加.sync修饰符才能自动关闭，详见例子	Boolean	falsetrue	false
    message	提示信息	String
    iconClass	icon小图标	String	successwarningclose
    iconImage	自定义小图标(图片需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)
      }
    

持续更新中。。。

Build Setup

# 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.