search

mowatermelon / studyNode

Learning record
MIT License
4 stars 1 forks source link

2018-11-27 #192

Open mowatermelon opened 5 years ago

mowatermelon commented 5 years ago

移动端高清代码


    <script>
        /** 高清方案脚本 */
    !function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.vl=function(e,t){var n=e||100,r=t||750,a=i.document,d=navigator.userAgent,o=d.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=d.match(/U3\/((\d+|\.){5,})/i),s=l&&parseInt(l[1].split(".").join(""),10)>=80,u=a.documentElement,c=1;if(o&&o[1]>534||s){u.style.fontSize=n+"px";var p=a.createElement("div");p.setAttribute("style","width: 1rem;display:none"),u.appendChild(p);var m=i.getComputedStyle(p).width;if(u.removeChild(p),m!==u.style.fontSize){var v=parseInt(m,10);c=100/v}}var f=a.querySelector('meta[name="viewport"]');f||(f=a.createElement("meta"),f.setAttribute("name","viewport"),a.head.appendChild(f)),f.setAttribute("content","width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1");var h=function(){u.style.fontSize=n/r*u.clientWidth*c+"px"};h(),i.addEventListener("resize",h)},e.exports=t["default"]}]);
        // 设置基础字体大小及字体缩放比例
        vl(100, 750);
    </script>

    <script>
      const readys = [];
      window.onReady = (func) => {
        if (func) {
          readys.push(func);
        }
      };
      window.onload = () => {
        readys.forEach(func => {
          func();
        });
      };
    </script>
mowatermelon commented 5 years ago

vue-form-making 的基础测试案例

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
  </head>
  <body>
    <div id="app">
      <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">

      </fm-generate-form>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          jsonData: {"list":[{"type":"time","name":"时间选择器","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":true,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":true,"format":"HH:mm:ss","required":false,"width":"","remoteFunc":"func_1543300909000_97181"},"key":"1543300909000_97181","model":"time_1543300909000_97181","rules":[]},{"type":"textarea","name":"多行文本","icon":"icon-diy-com-textarea","options":{"width":"20%","defaultValue":"","required":false,"pattern":"","placeholder":"2323232","remoteFunc":"func_1543300840000_6487"},"key":"1543300840000_6487","model":"textarea_1543300840000_6487","rules":[]},{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"remoteFunc":"func_1543300902000_17454"},"key":"1543300902000_17454","model":"rate_1543300902000_17454","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","remoteFunc":"func_1543300998000_3656"},"key":"1543300998000_3656","model":"grid_1543300998000_3656","rules":[]},{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"remoteFunc":"func_1543300894000_58254"},"key":"1543300894000_58254","model":"rate_1543300894000_58254","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"remoteFunc":"func_1543300899000_92419"},"key":"1543300899000_92419","model":"rate_1543300899000_92419","rules":[]}]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","remoteFunc":"func_1543300884000_83383"},"key":"1543300884000_83383","model":"grid_1543300884000_83383","rules":[]},{"type":"imgupload","name":"图片","icon":"icon-tupian","options":{"defaultValue":[],"size":{"width":100,"height":100},"width":"","tokenFunc":"funcGetToken","token":"odaWpqNvohuJr1UrGQgOixj4Kw05b1stVq2-YjKh:_r6guQcEjf80zH7QQPuzyhLD_8s=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImZvcm0tbWFraW5nIiwiZGVhZGxpbmUiOjE1NDMzMDQ1Nzd9","domain":"http://pfp81ptt6.bkt.clouddn.com/","disabled":false,"length":8,"multiple":true,"remoteFunc":"func_1543300876000_82878"},"key":"1543300920000_18778","model":"imgupload_1543300876000_82878","rules":[]},{"type":"imgupload","name":"图片","icon":"icon-tupian","options":{"defaultValue":[],"size":{"width":100,"height":100},"width":"","tokenFunc":"funcGetToken","token":"odaWpqNvohuJr1UrGQgOixj4Kw05b1stVq2-YjKh:_r6guQcEjf80zH7QQPuzyhLD_8s=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImZvcm0tbWFraW5nIiwiZGVhZGxpbmUiOjE1NDMzMDQ1Nzd9","domain":"http://pfp81ptt6.bkt.clouddn.com/","disabled":false,"length":8,"multiple":true,"remoteFunc":"func_1543300876000_82878"},"key":"1543300970000_54541","model":"imgupload_1543300876000_82878","rules":[]},{"type":"imgupload","name":"图片","icon":"icon-tupian","options":{"defaultValue":[],"size":{"width":100,"height":100},"width":"","tokenFunc":"funcGetToken","token":"odaWpqNvohuJr1UrGQgOixj4Kw05b1stVq2-YjKh:_r6guQcEjf80zH7QQPuzyhLD_8s=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImZvcm0tbWFraW5nIiwiZGVhZGxpbmUiOjE1NDMzMDQ1Nzd9","domain":"http://pfp81ptt6.bkt.clouddn.com/","disabled":false,"length":8,"multiple":true,"remoteFunc":"func_1543300876000_82878"},"key":"1543300966000_70315","model":"imgupload_1543300876000_82878","rules":[]},{"type":"imgupload","name":"图片","icon":"icon-tupian","options":{"defaultValue":[],"size":{"width":100,"height":100},"width":"","tokenFunc":"funcGetToken","token":"odaWpqNvohuJr1UrGQgOixj4Kw05b1stVq2-YjKh:_r6guQcEjf80zH7QQPuzyhLD_8s=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImZvcm0tbWFraW5nIiwiZGVhZGxpbmUiOjE1NDMzMDQ1Nzd9","domain":"http://pfp81ptt6.bkt.clouddn.com/","disabled":false,"length":8,"multiple":true,"remoteFunc":"func_1543300876000_82878"},"key":"1543300963000_57844","model":"imgupload_1543300876000_82878","rules":[]},{"type":"imgupload","name":"图片","icon":"icon-tupian","options":{"defaultValue":[],"size":{"width":100,"height":100},"width":"","tokenFunc":"funcGetToken","token":"odaWpqNvohuJr1UrGQgOixj4Kw05b1stVq2-YjKh:_r6guQcEjf80zH7QQPuzyhLD_8s=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImZvcm0tbWFraW5nIiwiZGVhZGxpbmUiOjE1NDMzMDQ1Nzd9","domain":"http://pfp81ptt6.bkt.clouddn.com/","disabled":false,"length":8,"multiple":true,"remoteFunc":"func_1543300876000_82878"},"key":"1543300876000_82878","model":"imgupload_1543300876000_82878","rules":[]},{"type":"editor","name":"编辑器","icon":"icon-fuwenbenkuang","options":{"defaultValue":"","width":"","remoteFunc":"func_1543300874000_64866"},"key":"1543300874000_64866","model":"editor_1543300874000_64866","rules":[]}],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}},
          editData: {},
          remoteFuncs: {

            funcGetToken (resolve) {
              // 图片 imgupload_1543300876000_82878
              // 获取到token数据后执行回调函数
              // resolve(token)
            },

            funcGetToken (resolve) {
              // 图片 imgupload_1543300876000_82878
              // 获取到token数据后执行回调函数
              // resolve(token)
            },

            funcGetToken (resolve) {
              // 图片 imgupload_1543300876000_82878
              // 获取到token数据后执行回调函数
              // resolve(token)
            },

            funcGetToken (resolve) {
              // 图片 imgupload_1543300876000_82878
              // 获取到token数据后执行回调函数
              // resolve(token)
            },

            funcGetToken (resolve) {
              // 图片 imgupload_1543300876000_82878
              // 获取到token数据后执行回调函数
              // resolve(token)
            },

          }
        },
        methods: {
          handleSubmit () {
            this.$refs.generateForm.getData().then(data => {
              // 数据校验成功
              // data 为获取的表单数据
            }).catch(e => {
              // 数据校验失败
            })
          }
        }
      })
    </script>
  </body>
  </html>