1. ive-vue-mobile

ive-vue-mobile

ive-vue-mobile

介绍

ive-vue-mobile 基于vue3封装了一些简单手机端常用的组件和方法。
库的总大小为400kb+,推荐使用按需引入的方法,方便Tree-Sharking。更多组件还在完善中,敬请期待。
css处理器使用的是scss,请预先安装好scss环境。

目录

组件

组件名称 说明 详细用法 文档
IveModal 弹窗组件 查看 查看
IveDrager 拖拽组件 查看 查看
IveLoading 加载组件 查看 查看
IveCountdown 倒计时组件 查看 查看
IvePullRefresh 下拉刷新&&触底加载组件 查看下拉刷新示例
查看触底加载示例
查看下拉刷新和触底加载同时存在的示例
查看

方法

方法名称 说明 详细用法 文档
copy 复制方法 查看 查看
validate 表单校验方法 查看 查看

安装

yarn install ive-vue-mobile --save

use in html 简单的介绍,以IveModal组件为例

<script src="vue3_path/vue.runtime.global.js"></script>
<script src="your_path/iveVueMobile.umd.js"></script>

<script>
  iveVueMobile.IveModal.show({
    title: "自定义模板",
    content: '{{label}}<input v-modal="name">',
    data: { name: "我和content模板中的值关联", label: 'exaxple'},
    footer: [
      {
        type: 'delete',
        text: '取消',
        onClick: (data, close) => {
          console.log(data);
          alert("你取消了");
          close();
        },
      },
      {
        type: 'primary',
        text: '确定',
        onClick: (data, close) => {
          console.log(data);
          if (data.name.length > 18) {
            close();
          } else {
            alert("name的长度小于18");
          }
        },
      },
    ]
  });
</script>

use in es2015

全局注册

import { createApp } from 'vue';
import IveVueMobile from 'ive-vue-mobile';

const app = createApp(App);
app.use(IveVueMobile);

On-demand 按需引入

import { IveModal } from 'ive-vue-mobile';
IveModal.show({
  title: "modalFormTemplate默认模板",
  content: IveModal.modalFormTemplate,
  data: { name: "name", label: 'modalFormTemplate的label'},
  footer: [
    {
      onClick: (data, close) => {
        console.log(data);
        if (data.name.length > 10) {
          close();
        } else {
          alert("name的长度小于10");
        }
      },
    },
  ]
});

More examples

For more examples, please visit 

https://github.com/xiaohouzimiantuo/ive-vue-mobile-examples

Dependencies