Nearly Picked Makefiles

    uvue-crud

    1.3.2 • Public • Published

    uvue-crud

    安装

    npm/yarn 安装方式

    npm i uvue-crud
    or
    yarn add uvue-crud
    

    下载安装方式

    https://ext.dcloud.net.cn/plugin?id=5071

    快速上手

    引入 uview

    由于组件库依赖于 uview,所以需要先引入 uview,安装 uview

    注册组件

    //main.js
    import uvueCrud from "uvue-crud";
    Vue.use(uvueCrud);

    配置 easycom 规则

    // pages.json
    {
        "easycom": {
    		//下载安装方式
            //"^uvue(.*)": "@/uvue-crud/components/uvue-$1/uvue-$1.vue",
    		//npm安装方式
            "^uvue(.*)": "uvue-crud/components/uvue-$1/uvue-$1.vue",
        },
        "pages": [
            // ......
        ]
    }

    示例代码

    uvue-list

    <template>
      <view>
        <uvue-list :option="option" :data="data">
          <template #title="{ row }">
            <view>{{ row.title }}</view>
          </template>
          <template #content="{ row }">
            <view>{{ row.content }}</view>
          </template>
          <template #right="{ row }">
            <view>{{ row.time }}</view>
          </template>
        </uvue-list>
      </view>
    </template>
    
    <script>
      export default {
        data() {
          return {
            option: {
              formPath: "/pages/form/form"
            },
            data: [
              {
                title: "title1",
                content: "content1",
                time: new Date().toLocaleDateString()
              },
              {
                title: "title2",
                content: "content2",
                time: new Date().toLocaleDateString()
              },
              {
                title: "title3",
                content: "content3",
                time: new Date().toLocaleDateString()
              }
            ]
          };
        }
      };
    </script>

    uvue-form

    <template>
      <view>
        <uvue-form v-model="formData" :option="formOption" @submit="handleSubmit"></uvue-form>
      </view>
    </template>
    
    <script>
      export default {
        data() {
          return {
            formData: {
              username: "admin",
              sex: "1"
            },
            formOption: {
              labelWidth: "auto",
              column: [
                {
                  label: "用户名",
                  prop: "username",
                  rules: [{ required: true, message: "请输入用户名", trigger: "change" }]
                },
                {
                  label: "性别",
                  prop: "sex",
                  type: "action",
                  dictData: [
                    { label: "男", value: "1" },
                    { label: "女", value: "0" }
                  ]
                }
              ]
            }
          };
        }
      };
    </script>

    Install

    npm i uvue-crud

    DownloadsWeekly Downloads

    4

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    54 kB

    Total Files

    21

    Last publish

    Collaborators

    • soullyoko