1.el-upload

1.1基本配置

  1.  <el-upload
  2.   class="upload-demo"
  3.   accept="image/jpeg, image/jpg, image/png"// 可上传类型
  4.   ref="myUpload"//类似id名,可用this.$refs.myUpload获取refs对象
  5.   action="http://api.qx121.net/api/Rikaze/UploadFile"//图片上传地址
  6.   :on-preview="handlePreview"//图片预览
  7.   :before-upload="beforeAvatarUpload"//上传之前
  8.   :on-remove="handleRemove"//删除之前
  9.   :on-success="handleSucess"//成功后
  10.   :file-list="fileList"//储存上传的img
  11.   list-type="picture"//上传预览分割
  12.   :auto-upload="false"//是否自动上传
  13.   :on-change="imgBroadcastChange"//发生改变的钩子
  14.   v-model="form.fmsrc"//数据绑定
  15.   >
  16.     <el-button size="small" type="primary">上传图片</el-button>
  17.   <div slot="tip" class="el-upload__tip">支持上传image/jpeg,image/jpg,image/png文件，且不超过500kb</div>
  18. </el-upload>
  1. export default {
  2.     name: 'Wtable',
  3.     components: {
  4.         quillEditor
  5.     },
  6.     data() {
  7.         return {                     
  8.             form: {
  9.                 btitle: '',
  10.                 lxtypename: '特色产品',
  11.                 fmsrc: '',
  12.                 description: ''
  13.             },            
  14.             //上传
  15.             fileList: [] //这个是上传图片的信息
  16.         };
  17.     },
  18.   methods: {
  19.     saveEdit(form) {
  20.       console.log('表单提交', this.form);
  21.       this.$refs.myUpload.submit(); //上传图片
  22.       this.editVisible = false;           
  23.     },
  24.     handleRemove(file, fileList) {},
  25.     handlePreview(file) {},        
  26.     handleSucess(response, file, fileList) {// 上传成功
  27.       console.log(response, file, fileList); 
  28.       //图片上传成功后提交form表单
  29.     },
  30.     beforeAvatarUpload(file) {      
  31.     },
  32.     // 上传列表发生变化
  33.     imgBroadcastChange(file, fileList) {
  34.     }
  35.   }
  36. }

1.2限制上传

  2. 复制代码
  4. <template>
  5.   <div class="select_invoice">
  6.     <el-upload
  7.       class="upload-demo"
  8.       :multiple="true"
  9.       :action="uploadPath"
  10.       :data="uploadData"
  11.       accept="bmg,.png,.jpg,.jpeg"
  12.       :before-upload="beforeUpload"
  13.       :on-success="handleSuccess"
  14.       :on-error="hanldeError"
  15.       multiple
  16.       :limit="20">
  17.       <el-button size="small" type="primary">添加图片</el-button>
  18.     </el-upload>
  19.   </div>
  20. </template>
  22. 复制代码
  23. 压缩的方法放在before-upload中,这个方法可以接受一个promise,提一下,最好下载新版本的element-UI,以前的旧版本可能不支持返回promise
  25. js
  26. 复制代码
  28. <script>
  29.   // 引入image-conversion
  30.   import imageConversion from 'image-conversion' 
  32.   methods: {
  33.     // 第一种,不考虑图片长宽,只考虑图片大小的情况,图片超过4M就压缩
  34.     beforeUpload (file) {
  35.       return new Promise((resolve, reject) => {
  36.         let isLt2M = file.size / 1024 / 1024 < 4 // 判定图片大小是否小于4MB
  37.         if (isLt2M) {
  38.           resolve(file)
  39.         }
  40.         console.log(file)
  41.         // 压缩到400KB,这里的400就是要压缩的大小,可自定义
  42.         imageConversion.compressAccurately(file, 400).then(res => {
  43.           // console.log(res)
  44.           resolve(res)
  45.         })
  46.       })
  47.     },
  49.     //第二种,图片大小超过4M,长度超过2000就压缩
  50.     beforeUpload2 (file) {
  51.       // 图片不大于4m,宽度不大于2000
  52.       return new Promise((resolve, reject) => {
  53.         let _URL = window.URL || window.webkitURL
  54.         let isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
  55.         // 这里需要计算出图片的长宽
  56.         let img = new Image()
  57.         img.onload = function () {
  58.           file.width = img.width // 获取到width放在了file属性上
  59.           file.height = img.height // 获取到height放在了file属性上
  60.           let valid = img.width > 2000 // 图片宽度大于2000
  61.           // console.log(11, file)
  62.           // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
  63.           if (valid || isLt2M) {
  64.             imageConversion.compressAccurately(file, {
  65.               size: 400,
  66.               width: 2000
  67.             }).then(res => {
  68.               // console.log(33, res)
  69.               resolve(res)
  70.             })
  71.           } else resolve(file)
  72.         }
  73.         // 需要把图片赋值
  74.         img.src = _URL.createObjectURL(file)
  75.       })
  76.     },
  77.   }
  78. </script>
  80. 复制代码
  81. 这样就实现了图片的自动压缩功能,这个组件还有一些其他功能,使用的时候如果有其他需求,可以看下文档https://github.com/WangYuLue/image-conversion

1.3图片回显

2.el-pagination

分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。

2.1前端分页

前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。

  1. <template>
  2.  <div class="app">    
  3.      <!-- 将获取到的数据进行计算 -->   
  4.      <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
  5.          <el-table-column prop="date" label="日期" width="180"></el-table-column>
  6.          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  7.          <el-table-column prop="address" label="地址"></el-table-column>
  8.      </el-table>
  9.       <div class="tabListPage">
  10.            <el-pagination @size-change="handleSizeChange" 
  11.                           @current-change="handleCurrentChange" 
  12.                           :current-page="currentPage" 
  13.                           :page-sizes="pageSizes" 
  14.                           :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
  15.                           :total="totalCount">
  16.              </el-pagination>
  17.        </div>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22.    data(){
  23.        return {
  24.             // 总数据
  25.            tableData:[],
  26.            // 默认显示第几页
  27.            currentPage:1,
  28.            // 总条数，根据接口获取数据长度(注意：这里不能为空)
  29.            totalCount:1,
  30.            // 个数选择器（可修改）
  31.            pageSizes:[1,2,3,4],
  32.            // 默认每页显示的条数（可修改）
  33.            PageSize:1,
  34.        }
  35.    },
  36.  methods:{
  37.        getData(){
  38.              // 这里使用axios，使用时请提前引入
  39.              axios.post(url,{
  40.                   orgCode:1
  41.              },{emulateJSON: true},
  42.              {
  43.                headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
  44.               }
  45.               ).then(reponse=>{
  46.                    console.log(reponse)
  47.                    // 将数据赋值给tableData
  48.                    this.tableData=data.data.body
  49.                    // 将数据的长度赋值给totalCount
  50.                    this.totalCount=data.data.body.length
  51.               }) 
  52.          },
  53.        // 分页
  54.         // 每页显示的条数
  55.        handleSizeChange(val) {
  56.            // 改变每页显示的条数 
  57.            this.PageSize=val
  58.            // 注意：在改变每页显示的条数时，要将页码显示到第一页
  59.            this.currentPage=1
  60.        },
  61.          // 显示第几页
  62.        handleCurrentChange(val) {
  63.            // 改变默认的页数
  64.            this.currentPage=val
  65.        },
  66.    },
  67.    created:function(){
  68.          this.getData() 
  69.    }
  70. }
  71. </script>

2.2后端分页

后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据

  1. <template>
  2.   <div class="app">  
  3.       <el-table :data="tableData" style="width: 100%">
  4.           <el-table-column prop="date" label="日期" width="180"></el-table-column>
  5.           <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  6.           <el-table-column prop="address" label="地址"></el-table-column>
  7.       </el-table>
  8.        <div class="tabListPage">
  9.             <el-pagination @size-change="handleSizeChange" 
  10.                            @current-change="handleCurrentChange" 
  11.                            :current-page="currentPage" 
  12.                            :page-sizes="pageSizes" 
  13.                            :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
  14.                            :total="totalCount">
  15.               </el-pagination>
  16.         </div>
  17.  </div>
  18. </template>
  19. <script>
  20. export default {
  21.     data(){
  22.         return {
  23.              // 总数据
  24.             tableData:[],
  25.             // 默认显示第几页
  26.             currentPage:1,
  27.             // 总条数，根据接口获取数据长度(注意：这里不能为空)
  28.             totalCount:1,
  29.             // 个数选择器（可修改）
  30.             pageSizes:[1,2,3,4],
  31.             // 默认每页显示的条数（可修改）
  32.             PageSize:1,
  33.         }
  34.     },
  35.   methods:{
  36.          // 将页码，及每页显示的条数以参数传递提交给后台
  37.         getData(n1,n2){
  38.               // 这里使用axios，使用时请提前引入
  39.               axios.post(url,{
  40.                    orgCode:1,
  41.                    // 每页显示的条数
  42.                    PageSize:n1,
  43.                    // 显示第几页
  44.                    currentPage:n2,
  45.               },{emulateJSON: true},
  46.               {
  47.                 headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
  48.                }
  49.                ).then(reponse=>{
  50.                     console.log(reponse)
  51.                     // 将数据赋值给tableData
  52.                     this.tableData=data.data.body
  53.                     // 将数据的长度赋值给totalCount
  54.                     this.totalCount=data.data.body.length
  55.                }) 
  56.           },
  57.         // 分页
  58.          // 每页显示的条数
  59.         handleSizeChange(val) {
  60.             // 改变每页显示的条数 
  61.             this.PageSize=val
  62.             // 点击每页显示的条数时，显示第一页
  63.             this.getData(val,1)
  64.             // 注意：在改变每页显示的条数时，要将页码显示到第一页
  65.             this.currentPage=1  
  66.         },
  67.           // 显示第几页
  68.         handleCurrentChange(val) {
  69.             // 改变默认的页数
  70.             this.currentPage=val
  71.             // 切换页码时，要获取每页显示的条数
  72.             this.getData(this.PageSize,(val)*(this.pageSize))
  73.         },
  74.     },
  75.     created:function(){
  76.           this.getData(this.PageSize,this.currentPage) 
  77.     }
  78.  }
  79. </script>

3.el-input

3.1的密码显隐

  • 使用

5.ElementUI的使用 - 图15.ElementUI的使用 - 图2

  1. <el-form-item label="密码" prop="password">
  2.         <el-input
  3.           v-model="LoginformData.password"
  4.           maxlength="16"
  5.           placeholder="密码"
  6.           prefix-icon="el-icon-lock"
  7.           show-password
  8.           clearable
  9.         ></el-input>
  10.       </el-form-item>
  • 问题
    • 眼睛点击前后状态一样
    • 眼睛点击后鼠标光标跑到内容最前面
  • 解决办法,自己写显示隐藏

5.ElementUI的使用 - 图35.ElementUI的使用 - 图4

  1. <el-form-item label="密码" prop="password">
  2.    <el-input :type="passw" v-model="adduser.password" style="width: 300px;" >
  3.       <%-- input中加图标必须要有slot="suffix"属性，不然无法显示图标 --%>
  4.       <i slot="suffix" :class="icon" @click="showPass"></i>
  5.    </el-input>
  6.  </el-form-item>
  1. <script type="text/javascript">
  2.   var app = new Vue({
  3.     el:"#app",
  4.     data:{
  5.       users:[],
  6.       total:100,
  7.       pageSize:5,
  8.       pageNum:1,
  9.       //用于显示或隐藏添加修改表单
  10.       add:false,
  11.       //用于改变Input类型
  12.       passw:"password",
  13.       //用于更换Input中的图标
  14.       icon:"el-input__icon el-icon-view",
  15.       adduser:{
  16.         id:null,
  17.         name:null,
  18.         password:null,
  19.         dept_id:null
  20.       },
  21.     },
  22.     methods:{
  23. 　　　　　　　//密码的隐藏和显示
  24.       showPass(){
  25. 　　　　　　　　　　//点击图标是密码隐藏或显示
  26.         if( this.passw=="text"){
  27.           this.passw="password";
  28.           //更换图标
  29.           this.icon="el-input__icon el-icon-view";
  30.         }else {
  31.           this.passw="text";
  32.           this.icon="el-input__icon el-icon-loading";
  33.         };
  34.       }
  35.     },
  36.   })
  37. </script>

3.2有时input无法输入

  • 原因,

    1. 其实已经输入,但是由于嵌套太深数据没更新出来

  • 解决办法
    ```javascript 

  2. - 缺点
  4.    可能会造成验证失效
  6. <a name="tA6Rq"></a>
  7. ## 4.el-form
  8. <a name="S7UHM"></a>
  9. ### 4.1表单清空
  11. - 方法一
  13. ```javascript
  14. handleReset(formName) {
  15.       console.log('清空表单');
  16.       this.$refs[formName].resetFields();
  17.       this.form = this.$options.data().form;
  18.  },
  • 方法二

重置表单数据，使用的地方特别多，我们封装为全局方法

  1. //重置表单，formRef为表单的ref值，excludeFields为要排除重新初始化值得属性
  2. Vue.prototype.$reset = function (formRef, ...excludeFields) {
  3.   this.$refs[formRef].resetFields();
  4.   let obj1 = this.$data;
  5.   let obj2 = this.$options.data.call(this);
  6.   if (!excludeFields || excludeFields.length === 0) {
  7.     excludeFields = ["ruleValidate"];
  8.   }
  9.   for (let attrName in obj1) {
  10.     if (excludeFields && excludeFields.includes(attrName)) {
  11.       continue;
  12.     }
  13.     obj1[attrName] = obj2[attrName];
  14.   }
  15. };


使用

  1. <template>
  2.   <el-dialog
  3.       v-el-drag-dialog
  4.       :close-on-click-modal="false"
  5.       :visible.sync="dialogVisible"
  6.       :title="model.id === 0 ? '新增车辆' : '编辑车辆'"
  7.       class="car-edit"
  8.       width="450px"
  9.       top="5vh"
  10.       @close="$reset('form')">//关闭后调用封装的表单清空方法
  11.     <el-form ref="form"
  12.              :model="model"
  13.              :rules="ruleValidate"
  14.              class="formFillWidth"
  15.              label-width="50px">
  16.       <el-form-item label="车牌" prop="carCard">
  17.         <el-input v-model="model.carCard" placeholder="请输入"/>
  18.       </el-form-item>
  19.       <el-form-item label="司机" prop="driver">
  20.         <el-input v-model="model.driver" placeholder="请输入"/>
  21.       </el-form-item>
  22.       <el-form-item label="备注" prop="remark">
  23.         <el-input v-model="model.remark" placeholder="请输入"/>
  24.       </el-form-item>
  25.     </el-form>
  26.     <span slot="footer">
  27.       <el-button @click="dialogVisible = false">取消</el-button>
  28.       <el-button :loading="submitLoading" type="primary" @click="handleSubmit">保存</el-button>
  29.     </span>
  30.   </el-dialog>
  31. </template>
  32. 复制代码
  • 如果验证报错
  1. data () {
  2.   return {
  3.     dialogVisible: false,
  4.     submitLoading: false,
  5.     model: {
  6.       id: 0,
  7.       carCard: "",
  8.       driver: "",
  9.       remark: "",
  10.     },
  11.     ruleValidate: {
  12.       carCard: {required: true, message: "不能为空", trigger: "blur"},
  13.     },
  14.   };
  15. },

5.el-checkbox

5.1 实现全选

  1. <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  2.     <el-checkbox-group v-model="checkedList">
  3.     <el-checkbox :class="'type-item' + index" v-for="(item, index) in types" :label="item.value" :key="item.val" @change="handleCheckedCitiesChange">{{ item.label }}</el-checkbox>
  4. </el-checkbox-group>
  6. <script>
  7. export default {
  8.   data() {
  9.     return {
  10.       checkedList: [],
  11.       checkAll: false,
  12.       types:[
  13.           {
  14.             label: '区域站',
  15.             value: 1
  16.           },
  17.           {
  18.             label: '国家站',
  19.             value: 2
  20.           }
  21.         ]
  22.     };
  23.   },
  24.   methods: {
  25.     handleCheckAllChange(val) {
  26.       console.log('全选', val);
  27.       this.checkAll = val;
  28.       if (val) this.checkedList = [1, 2, 3, 4, 5, 6];
  29.       else this.checkedList = [];
  30.     },
  31.     handleCheckedCitiesChange(val) {
  32.       console.log('单选', this.checkedList);
  33.     }
  34.   },
  35.   created() {},
  36.   mounted() {}
  37. };

5.2单选互斥

  1.  <el-checkbox-group v-model="checkRangeList" @change="handleCheckedRange">
  2.    <el-checkbox label="5公里">5公里</el-checkbox>
  3.    <el-checkbox label="10公里">10公里</el-checkbox>
  4.    <el-checkbox label="20公里">20公里</el-checkbox>
  5. </el-checkbox-group>
  7. <script>
  8. export default {
  9.   data() {
  10.     return {
  11.       checkRangeList: [],
  12.       checkStationsList: []
  13.     };
  14.   },
  15.   methods: {
  16.     handleCheckedRange(val) {
  17.       if (this.checkRangeList.length > 1) {
  18.         this.checkRangeList.splice(0, 1);
  19.       }
  20.       console.log(this.checkRangeList);
  21.     },
  22.   },
  23. };
  24. </script>

6.el-radio

6.1 可取消

  1. <el-radio-group v-model="radio2">
  2.   <el-radio @click.native.prevent="clickitem(3)" :label="3"> 备选项</el-radio>
  3.   <el-radio @click.native.prevent="clickitem(6)" :label="6"> 备选项</el-radio>
  4.   <el-radio @click.native.prevent="clickitem(9)" :label="9"> 备选项</el-radio>
  5. </el-radio-group>
  7. clickitem (e) {
  8.   e === this.radio2 ? this.radio2 = '' : this.radio2 = e
  9. },

7.el-dialog

7.1可拖拽

  • 创建自定义指令 ```javascript // directives.js import Vue from ‘vue’;

// v-dialogDrag: 弹窗拖拽 Vue.directive(‘dialogDrag’, { bind(el, binding, vnode, oldVnode) { // 获取拖拽内容头部 const dialogHeaderEl = el.querySelector(‘.el-dialog__header’); // 获取拖拽内容整体 这个rrc-dialog是我自己封装的组件 如果使用element的组件应写成.el-dialog const dragDom = el.querySelector(‘.rrc-dialog’); dialogHeaderEl.style.cursor = ‘move’;

  1. // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  2. const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
  4. // 鼠标按下事件
  5. dialogHeaderEl.onmousedown = (e) => {
  6.   // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
  7.   const disX = e.clientX - dialogHeaderEl.offsetLeft;
  8.   const disY = e.clientY - dialogHeaderEl.offsetTop;
  10.   // 获取到的值带px 正则匹配替换
  11.   let styL, styT;
  13.   // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  14.   if (sty.left.includes('%')) {
  15.     styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
  16.     styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
  17.   } else {
  18.     styL = +sty.left.replace(/\px/g, '');
  19.     styT = +sty.top.replace(/\px/g, '');
  20.   };
  22.   // 鼠标拖拽事件
  23.   document.onmousemove = function (e) {
  24.     // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
  25.     const l = e.clientX - disX;
  26.     const t = e.clientY - disY;
  28.     let finallyL = l + styL
  29.     let finallyT = t + styT
  31.     // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
  32.     // dragDom.offsetParent表示弹窗阴影部分
  33.     if (finallyL < 0) {
  34.       finallyL = 0
  35.     } else if (finallyL > dragDom.offsetParent.clientWidth - dragDom.clientWidth - dragDom.offsetParent.offsetLeft) {
  36.       finallyL = dragDom.offsetParent.clientWidth - dragDom.clientWidth - dragDom.offsetParent.offsetLeft
  37.     }
  39.     if (finallyT < 0) {
  40.       finallyT = 0
  41.     } else if (finallyT > dragDom.offsetParent.clientHeight - dragDom.clientHeight - dragDom.offsetParent.offsetLeft) (
  42.       finallyT = dragDom.offsetParent.clientHeight - dragDom.clientHeight - dragDom.offsetParent.offsetLeft
  43.     )
  45.     // 移动当前元素
  46.     dragDom.style.left = `${finallyL}px`;
  47.     dragDom.style.top = `${finallyT}px`;
  49.     //将此时的位置传出去
  50.     //binding.value({x:e.pageX,y:e.pageY})
  51.   };
  53.   document.onmouseup = function (e) {
  54.     document.onmousemove = null;
  55.     document.onmouseup = null;
  56.   };
  57. }

} })

  2. - 引入
  3. ```javascript
  4. //在main.js中全局引入
  5. import './directives'
  • 使用
    1. // call.center.detail.vue
    2. <el-dialog v-dialogDrag title="呼出结果" :visible.sync="dialogOutVisible">
    3. ...
    4. </el-dialog>

8.el-menu

8.1刷新选中

  1.   <el-menu
  2.         :default-active="defaultActiveIndex"
  3.         class="el-menu-vertical-demo"
  4.         @open="handleOpen"
  5.         @close="handleClose"
  6.         background-color="#0f1f43"
  7.         text-color="#fff"
  8.         active-text-color="#ef4873"
  9.         :default-openeds="['1', '2']"
  10.       >
  11.         <el-submenu index="1">
  12.           <template slot="title">
  13.             <i class="el-icon-location"></i>
  14.             <span>用户</span>
  15.           </template>
  16.           <el-menu-item-group>
  17.             <el-menu-item index="/admin/user">
  18.               <router-link to="/admin/user">
  19.                 用户管理
  20.               </router-link>
  21.             </el-menu-item>
  22.             <el-menu-item index="/admin/account">
  23.               <router-link to="/admin/account">
  24.                 账号管理
  25.               </router-link>
  26.             </el-menu-item>
  27.             <el-menu-item index="/admin/agent">
  28.               <router-link to="/admin/agent">
  29.                 三方公司
  30.               </router-link>
  31.             </el-menu-item>
  32.           </el-menu-item-group>
  33.         </el-submenu>
  34.         <el-submenu index="2">
  35.           <template slot="title">
  36.             <i class="el-icon-location"></i>
  37.             <span>房屋</span>
  38.           </template>
  39.           <el-menu-item-group>
  40.             <el-menu-item index="/admin/home">
  41.               <router-link to="/admin/home">房屋管理</router-link>
  42.             </el-menu-item>
  43.             <el-menu-item index="/admin/image">
  44.               <router-link to="/admin/image">图片管理</router-link>
  45.             </el-menu-item>
  46.           </el-menu-item-group>
  47.         </el-submenu>
  48.       </el-menu>
  1. export default {
  2.   data() {
  3.     return {
  4.       defaultActiveIndex: ''
  5.     };
  6.   },
  7.   mounted() {
  8.     this.defaultActiveIndex = window.location.href.replace(new RegExp('#', 'g'), '---').split('---')[1];
  10.     console.log(this.defaultActiveIndex);
  11.   },
  12. }