Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css">
</head>
<body>
  <div id="demo">
    <h3>下面是Vue.js实现的输入框数据绑定:</h3>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <br/>
    <h3>下面是ncform实现的表单:</h3>
    <ncform :form-schema="formSchema" form-name="your-form-name" v-model="formSchema.value" @submit="submit()"></ncform>
    <el-button @click="submit()">Submit</el-button>
    <br/><br/>
    <h3>下面是AMS实现的列表和表单(点新建按钮):</h3>
    <ams-block name="demolist"></ams-block>
    <ams-block name="demoDialog"></ams-block>
  </div>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@ncform/ncform/dist/vueNcform.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>
<script src="https://h5rsc.vipstatic.com/ams/ams@0.9.0.js"></script>
  <script type="text/javascript">
    const amsconfig = {
      "resources": {
          "demo": {
              "api": {
                  "prefix": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/",
                  "list": "list",
                  "withCredentials": true,
                  "contentType": "json",
                  "successCode": 0
              },
              "fields": {
                  "id": {
                      "type": "text",
                      "label": "ID",
                      "ctx": "view"
                  },
                  "testText": {
                      "type": "text",
                      "label": "名称"
                  },
                  "isDeleted": {
                      "type": "switch",
                      "label": "开关"
                  },
                  "testDate": {
                      "type": "datetime",
                      "label": "创建时间"
                  },
                  "testDatetime": {
                      "type": "date",
                      "label": "更新日期"
                  },
                  "testImage": {
                      "type": "image",
                      "label": "图片上传"
                  }
              }
          }
      },
      "blocks": {
          "listBlock1": {
              "events": {
                  "init": "@list",
                  "addItem": "demoDialog.show"
              },
              "type": "list",
              "resource": "demo",
            "operations": {
                "addItem": {
                    "type": "button",
                    "label": "新建",
                    "props": {
                        "type": "primary"
                    },
                    "slot": "searchs"
                }
            }
          }
      }
    }
    const amsDialogConfig = {
      "type": "dialog",
      "data": {
        "title": "dialog标题"
      },
      "blocks": {
        "demoform": {
          "type": "form",
          "resource": "demo",
          "ctx": "edit"
        }
      }
    }
    ams.block('demolist', amsconfig);
    ams.block('demoDialog', amsDialogConfig);
    
    Vue.use(vueNcform, { extComponents: ncformStdComps, /*lang: 'zh-cn'*/ });
    // Bootstrap the app
    new Vue({
      el: '#demo',
      data: {
        message: 'Hello! I am Vue',
        formSchema: {
          type: 'object',
          properties: {
            name: {
              type: 'string'
            }
          }
        }
      },
      methods: {
        submit() {
          this.$ncformValidate('your-form-name').then(data => {
            if (data.result) {
              // do what you like to do
            }
          });
        }
      }
    });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers