Nettle Pie Market

    ive-vue-mobile
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    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

    Install

    npm i ive-vue-mobile

    DownloadsWeekly Downloads

    1

    Version

    0.2.4

    License

    none

    Unpacked Size

    1.49 MB

    Total Files

    60

    Last publish

    Collaborators

    • iverry