element-ui

[uniquejava]

http://element.eleme.io/#/en-US/component/quickstart

https://github.com/lukehoban/es6features#math--number--string--array--object-apis

升级

从1.x到2.x的变化: https://segmentfault.com/a/1190000012051823

除此之外, Cyper新增如下:

1. 发现$notify组件的position在命名上发生了变化, 比如之前的bottom right改成了bottom-right

后台模板

https://github.com/PanJiaChen/vueAdmin-template

怎么给组件样式..

element的各种组件基本上即没有class也没有style属性, 比如el-button没有style属性,怎么给它加样式呢?

最简单的办法, 是用div将el-btn包裹起来.. 然后将样式加在div上

<div class="hello"> <el-button> ... </div>

.hello {
  .el-button {
  }
}

[uniquejava]

Form inline

我想在 个别行放置两列, 找不到方案, 自己简单解决了下:

  .el-form-item.inline {
    display: inline-block;
  }

<el-form :model="csv" label-position="left" label-width="110px">
<el-form-item label="CSV Encoding:" class="inline">
  <el-select v-model="csv.encoding">
    <el-option label="UTF8" value="UTF8"></el-option>
    <el-option label="GBK" value="GBK"></el-option>
  </el-select>
</el-form-item>
<el-form-item label="Starting Line:" class="inline" style="margin-left: 1em;">
  <el-input-number v-model="csv.startingLine" :min="1"></el-input-number>
</el-form-item>
 <el-button @click="cancel">Cancel</el-button>
 <el-button type="primary" @click="ok">Confirm</el-button>
</el-form>

其它样式调整

<el-dialog title="My Dialog" :visible.sync="visible" class="compact" width="80%">

/* 减少form行间距 */
.el-form-item {
  margin-bottom: 0.5em;
}

/* 消除dialog body上的空档 */
  .el-dialog__wrapper.compact {
    .el-dialog__body {
      padding: 0 20px 1em 20px;
    }
  }

[uniquejava]

File Upload

 <el-upload
  v-if="csv.uploadMode === 1"
  ref="elUpload"
  class="upload-demo"
  drag
  action="http://localhost:1234/xxx/api/upload"
  :data="csv"
  :file-list="fileList"
  :on-success="onCsvUploaded"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
  <div class="el-upload__tip" slot="tip">CSV file with a size less than 500kb</div>
</el-upload>

spring boot接收

@PostMapping("/upload")
public Map<String, Object> singleFileUpload(@RequestParam("file") MultipartFile file, String encoding,
        int startingLine) throws Exception

References

https://segmentfault.com/a/1190000012234747 http://blog.csdn.net/m0_37893932/article/details/79237308

[uniquejava]

遇到的坑

checkbox的label和value和我的认知相反

<el-checkbox-group v-model="modules">
  <el-checkbox :label="0b1" disabled checked>minimal</el-checkbox>
  <el-checkbox :label="0b10">YYYY</el-checkbox>
  <el-checkbox :label="0b100">ZZZZZZZZ</el-checkbox>
</el-checkbox-group>

el-tag让input获得focus

<el-tag v-for="(tag,i) in outputText" :key="i"
                    closable
                    :disable-transitions="false"
                    @close="removeValue(i)">
              {{tag}}
            </el-tag>

            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="refConstantInput"
              size="mini"
              @keyup.enter.native="addConstant"
              @blur="addConstant"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="mini" @click="showInput">+
            </el-button>

 showInput(){
        this.inputVisible = true;

        this.$nextTick(f => {
          this.$refs.refConstantInput.$refs.input.focus();
        });
      },

取得slot中的文本

this.valueInEdit = this.$slots.default[0].text.trim();

取得div的大小

let rect = this.$refs.slotContainer.getBoundingClientRect();
const {width, height} = rect;

cascader中props中的value写错了

fullPath写成了fullpath

[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'getElementsByClassName' of undefined"

(found in )

子组件中props的值没有更新???

出现这种情况的原因: 1) 你传递的是对象类型 2)在parent中更新props记得要用=号/this.$set等这些方法, 不然子组件不会检测到props的更新.

注意从parent到 child数据是单向流动, parent中传递的props会实时更新到child中.

[uniquejava]

DND

不过目前可以用 https://github.com/RubaXa/Sortable 来做拖拽

import Sortable from 'sortablejs'

let el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
let sortable = Sortable.create(el)

见: https://github.com/ElemeFE/element/issues/3543

参考IndexGroup和FacetSelector

总结传递数据到子组件去修改的一般套路.

icon

http://www.fontawesome.com.cn/faicons/

https://github.com/Justineo/vue-awesome

Dynamic sizing You can make the icons scale dynamically according to your font-size by adding the following CSS:

.fa-icon {
  width: auto;
  height: 1em; /* or any other relative font sizes */

  /* You would have to include the following two lines to make this work in Safari */
  max-width: 100%;
  max-height: 100%;
}

[uniquejava]

在el-form-item上使用v-if

required的提示信息会出现错误, 换成v-show解决.(但是即便隐藏的form-item在validate时也会做校验!!) 解决办法是在form上rules, 自定义validator.

  rules: {
        supplierCode: [
          { required: true, message: '请输入供应商代码', trigger: 'blur' },
          { min: 2, max: 50, message: '长度应在2-50之间', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!this.supplierCodeExist) {
                callback()
              } else {
                if (
                  this.dialogStatus === 'update' &&
                  value === this.originalSupplierCode
                ) {
                  // 修改页面中 CODE未做修改
                  callback()
                } else {
                  callback(new Error('供应商代码已经存在.'))
                }
              }
            }
          }
        ]

清除表单

在点cancel和OK的处理函数都调用如下方法

this.$refs['form'].resetFields();

我对loading组件的定制

.el-loading-mask {
  position: fixed;
  background-color: rgba(220, 220, 220, 0.2);
}

.el-loading-parent--relative {
  position: inherit !important;
}

.el-loading-spinner {
  margin-top: 0;
  top: 45%;
}

.el-loading-spinner .el-loading-text {
  color: #1b1464;
  text-align: center;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  top: -6em;
}

.el-loading-spinner .circular {
  height: 3rem;
  width: 3rem;
}
.el-loading-spinner .path {
  stroke: #1b1464;
  fill-opacity: 0.8;
}

[uniquejava]

有关tree组件

node: draggingNode, dropNode -- DND中当前节点 data: node.data -- node上绑定的原始数据 parent: node.parent -- node的父结点

highlight-current 高亮当前结点

[uniquejava]

有关table column不能用v-show动态显示和隐藏， 要用v-if, 然而v-if会让表格抖动的厉害。

解决办法:

 <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" v-if="showAddress" key="1">
      </el-table-column>
      <el-table-column prop="address" label="地址" v-if="!showAddress" key="2">
      </el-table-column>
    </el-table>