您的位置:68399皇家赌场 > 服务器租用 > 使用Vue写一个datepicker的亲自过问,vuedatepicker示例

使用Vue写一个datepicker的亲自过问,vuedatepicker示例

发布时间:2019-08-23 21:45编辑:服务器租用浏览(184)

    大肆Json转成冬天列表的方式现身说法,json冬季列表示例

    前言

    不明了大家有未有察觉,在网络海人民广播广播台湾大学树状插件都以供给固定格式的Json,但本身在生成Json的时候没怀恋这一个,所以就只能和睦拼接字符串来变化严节列表.

    比如:

    {
     "顶层菜单1":[
     {
      "domain":"顶层菜单1",
      "runType":"background",
      "moduleName":"子菜单",
      "memo":"描述",
      "srcFile":"",
      "depends":[]
     }
     ],
     "顶层菜单2":[
     {
      "domain":"顶层菜单2",
      "runType":"background",
      "moduleName":"子菜单1",
      "memo":"描述",
      "srcFile":"",
      "depends":[]
     },
     {
      "domain":"顶层菜单2",
      "runType":"background",
      "moduleName":"子菜单2",
      "memo":"描述",
      "srcFile":"",
      "depends":[]
     }
     ],
     "顶层菜单3":[]
    }
    

    平素贴代码吧…

    dataObject = JSON.parse(data);
    var html = '<ul>';
    var domainName;
    var moduleName;
    for ( var n in dataObject) {
      html  = '<li>'   n   '<ul class="listItem">';
      for (var i = 0; i < dataObject[n].length; i  ) {
        domainName=dataObject[n][i].domain;
        moduleName=dataObject[n][i].moduleName;
        html  = '<a href="#">'   '<li>'  moduleName   '</li>'  '</a>';
      }
      html  = '</ul></li>';
    }
    html  = '</ul>';
    $('#sidebar').append(html);
    

    总结

    如上便是那篇小说的全体内容了,希望本文的开始和结果对大家的求学或许职业能拉动一定的协助,假设有问号大家能够留言沟通。

    前言 不精晓大家有未有开采,在网络海人民广播电视台湾大学树状插件都以索要固定格式的Json,但自个儿在...

    您恐怕感兴趣的篇章:

    • Vue.js Ajax动态参数与列表展现实现格局
    • Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
    • AngularJS达成数量列表的加码、删除和升高下移等效率实例
    • 将List对象列表转变到JSON格式的类完成方式
    • VUEJS实战之创设基础并渲染出列表(1)
    • 听他们讲BootStrap Metronic开拓框架经验总计【二】列表分页处理和插件JSTree的使用
    • javascript贯彻列表切换效果
    • JSON的String字符串与Java的List列表对象的互动转换
    • jsp页面 列表 显示ajax异步完成方式
    • JS动态的把左臂列表增多到左边的落实代码(可上下移动)
    • 动用js来贯彻缩略语列表、文献来源链接和飞速键列表

    错误码列表

    错误码 说明
    0 正确
    1 错误
    2 参数错误

    filter

    2.0中的filter只好在mustache绑定中央银行使,假如想在指令式绑定中绑定过滤后的值,能够选择计算属性。小编在月份和星期的显示中接纳到了过滤器来过滤语言类型,但自个儿事先是在指令式绑定中应用的filter,所以供给如下修改,:

    //修改前
    <div class="month-box" @click="chType('month')" v-text="tmpMonth   1 | month language"></div>
    //修改后,filter传参的方式也变了,变成了函数调用的风格
    <div class="month-box" @click="chType('month')">{{tmpMonth   1 | month(language)}}</div>
    

    比如:


    三种利用方法

    对此一个Vue组件,假设是利用webpack vue-loader的.vue单文件写法,小编希望那样使用:

    //App.vue
    <script>
     import datepicker from 'path/to/datepicker.vue'
     export default {
      components: { datepicker}
     }
    </script>
    

    一旦是一贯在浏览器中运用,那么自个儿梦想datepicker那些组件是暴光在大局下的,能够这样使用:

    //index.html
    <html>
     <script src="path/to/vue.js"></script>
     <script src="path/to/datepicker.js"></script>
     <body>
      <div id="app"></div>
      <script>
       new Vue({
        el: '#app',
        components: { datepicker }
       })
      </script>
     </body>
    </html>
    

    那边小编选拔了webpack作为包装工具,使用webpack的output.library和output.linraryTarget这两日个性就足以把您的bundle文件作为库文件打包。library定义了库的名字,libraryTarget定义了您想要打包的格式,具体能够看文档。小编梦想团结的库能够通过datepicker加载到,并且打包成umd格式,因而小编的webpack.config.js是如此的:

    module.exports = {
     entry: './index.js',
     output: {
      path: './dist',
      library: 'datepicker',
      filename: 'vue-datepicker.js',
      libraryTarget: 'umd'
     },
     module: {
      loaders: [
       {test: /.vue$/, loaders: ['vue']},
       {test: /.js$/, exclude: /node_modules/, loaders: ['babel']}
      ]
     }
    }
    

    包装实现的模块便是二个umd格式的模块啦,能够在浏览器中一贯动用,也足以包容require.js等模块加载器使用!

    以上正是那篇小说的全体内容了,希望本文的剧情对我们的就学只怕办事能推动一定的助手,假设有疑问我们能够留言沟通。

    • 支出进度中有的时候必要整理接口并且写一份接口文书档案,那是接纳马克Down写的一份演示,先预览下样子:

    从Datepicker.vue入手

    以.vue的艺术写Vue组件是一种特殊写法,每种Vue文件包蕴template, script, style三部分,template最佳不要成为一部分实例,所以最外层先套一层div,当做整个组件的根成分。三个datepicker一般由两局地构成,一个用来突显日期的input框,叁个用来选取日期的panel,因为小编意识input在活动端会自动唤起键盘,所以并未有选拔input,直接用了div模拟,通过点击事件决定panel的显隐。value是最后的结果,供给和父组件通讯,所以将value写成了prop,在父组件中动用value.sync="xxx",datepicker的value就和父组件的xxx双向绑定了。

    <template>
     <div class="date-picker">
      <div class="input" v-text="value" @click="panelState = !panelState">
     </div>
     <div class="date-panel" v-show="panelState">
     </div>
    </template>
    
    <scrip>
     export default {
      data () {
       return {
        panelState: false //初始值,默认panel关闭
       }
      },
      props: {
       value: String
      }
     }
    </script>
    

    前言

    接口列表

    接口 说明
    /p/global/strategy 请求全局策略
    /p/user/userLogin 用户登录接口

    prop.sync弃用

    prop的sync弃用了,迁移方案是接纳自定义事件,並且Datepicker这种input类型组件,能够使用表单输入组件的自定义事件视作替换方案。自定义组件也可以利用v-model指令了,不过必得满足八个标准:

    1. 选拔多个value的prop
    2. 值发生变化时,触发贰个input事件,传入新值。

    于是Datepicker的施用办法亦非<datepicker value.sync="now"></datepicker>了,而是<datepicker v-model="now"></datepicker>。组件本身向父级传值的方法也不均等了:

    //1.x版本,设置了value的值会同步到父级
    this.value = `${this.tmpYear}-${('0'   (this.month   1)).slice(-2)}-${('0'   this.date).slice(-2)}`
    
    //2.x版本,需要自己触发input事件,将新值作为参数传递回去
    let value = `${this.tmpYear}-${('0'   (this.month   1)).slice(-2)}-${('0'   this.date).slice(-2)}`
    this.$emit('input', value)
    
    dataObject = JSON.parse(data);
    var html = '<ul>';
    var domainName;
    var moduleName;
    for ( var n in dataObject) {
      html  = '<li>'   n   '<ul class="listItem">';
      for (var i = 0; i < dataObject[n].length; i  ) {
        domainName=dataObject[n][i].domain;
        moduleName=dataObject[n][i].moduleName;
        html  = '<a href="#">'   '<li>'  moduleName   '</li>'  '</a>';
      }
      html  = '</ul></li>';
    }
    html  = '</ul>';
    $('#sidebar').append(html);
    

    接口详细的情况

    • 大局计策

      • 接口地址:/p/global/strategy

      • 归来格式:Json

      • 恳求格局:Post

      • 呼吁示例:http://www.baidu.com/p/global/strategy

      • 接口备注:通过客户新闻,伏乞得到全局战略。

      • 伸手参数表达:

        名称 类型 必填 说明
        marking string true 企业标识
        account string true 用户名
        pw string true 用户密码
      • 归来参数表明:

        名称 类型 说明
        rt int 状态码
        data object 具体数据
        identify_method int 登录方式
        send_url string 推送地址
      • JSON重回示例:

           {
               "rt": 0,
               "data": {
                   "identify_method": "3",
                   "send_url": "www.jianshu.com"
               }
           }
        

    • www.68399.com ,报到接口

      • 接口地址:/p/global/login

      • 回去格式:Json

      • 恳请格局:Post

      • 伸手示例:http://www.baidu.com/p/global/login

      • 接口备注:通过客户音讯,央浼得到全局计策。

      • 伸手参数表达:

        名称 类型 必填 说明
        marking string true 企业标识
        account string true 用户名
        pw string true 用户密码
      • 回去参数表达:

        名称 类型 说明
        rt int 状态码
        data object 具体数据
        identify_method int 登录方式
        send_url string 推送地址
      • JSON重返示例:

           {
               "rt": 0,
               "data": {
                   "identify_method": "3",
                   "send_url": "www.jianshu.com"
               }
           }
        

    • 在简书的马克Down编辑器中不帮衬部分标签,如不协助锚点:<span></span>,颜色:<font color=red>等,预览效果是剔除了那某些。
    • MarkDown的语法
    • 起来文件:
     ## 接口列表
    
    |  接口  | 说明 |
    |------ |----- |
    |[/p/global/strategy](#strategy)| 请求全局策略|
    |[/p/user/userLogin](#login) | 用户登录接口|
    
    ***
    ##错误码列表
    |  错误码  | 说明 |
    |------ |----- |
    |   0   | 正确 |
    |   1   | 错误 |
    |   2   | 参数错误|
    
    ## 接口详情
    * 全局策略
    
        * 接口地址:/p/global/strategy
    
        * 返回格式:Json
    
        * 请求方式:Post
    
        * 请求示例:http://www.baidu.com/p/global/strategy
    
        * 接口备注:通过用户信息,请求获得全局策略。
    
        * 请求参数说明:
    
            | 名称 | 类型 | 必填 |说明|
            |----- |------| ---- |----|
            |marking |string|true|企业标识|
            |<font color=red>account | string |true|用户名|
            |<font color=red>pw | string |true|用户密码|
    
        * 返回参数说明:
    
            | 名称 | 类型 |说明|
            |----- |------|----|
            | rt | int|状态码
            |data | object|具体数据|
            |identify_method | int|登录方式|
            |send_url | string|推送地址|
    
        * JSON返回示例:
    
                 {
                     "rt": 0,
                     "data": {
                         "identify_method": "3",
                         "send_url": "www.jianshu.com"
                     }
                 }
    
    
    ---
    
    * 登录接口
    
        * 接口地址:/p/global/login
    
        * 返回格式:Json
    
        * 请求方式:Post
    
        * 请求示例:http://www.baidu.com/p/global/strategy
    
        * 接口备注:通过用户信息,请求获得全局策略。
    
        * 请求参数说明:
    
            | 名称 | 类型 | 必填 |说明|
            |----- |------| ---- |----|
            |marking |string|true|企业标识|
            |<font color=red>account | string |true|用户名|
            |<font color=red>pw | string |true|用户密码|
    
        * 返回参数说明:
    
            | 名称 | 类型 |说明|
            |----- |------|----|
            | rt | int|状态码
            |data | object|具体数据|
            |identify_method | int|登录方式|
            |send_url | string|推送地址|
    
        * JSON返回示例:
    
                 {
                     "rt": 0,
                     "data": {
                         "identify_method": "3",
                         "send_url": "www.jianshu.com"
                     }
                 }
    
    
    ---
    

    目录结构

    全数的首先步依旧是创造项目,只是纯粹组件,结构并不复杂,Datepicker.vue是最重大的零部件文件,dist是webpack的输出文件夹,index.js是webpack打包的进口文件,最终是webpack的布局文件,用来对大家的库文件进行打包用的。由此项目结构正是那般:

    .
    ├── Datepicker.vue
    ├── LICENSE
    ├── README.md
    ├── dist
    │ └── vue-datepicker.js
    ├── index.js
    ├── package.json
    └── webpack.config.js
    

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:使用Vue写一个datepicker的亲自过问,vuedatepicker示例

    关键词: 68399皇家赌场 Android