春節將至，iView 近期的一些更新

春節將至，iView 也帶來了戊戌年最後的一些更新。

首先是上週更新的 3.2.2 版本，這個版本更新了近 20 項內容，主要解決核心版本 3.2 中 Select 組件的一些問題。3.2.2 版本是很是值得更新的，首先是 3.2 開始，Table 組件支持了 slot-scope 寫法，也就說，在表格組件中自定義列模板，不用再使用 Render 函數了（固然 3.2 仍然是兼容 Render 的，並無廢棄，因此不影響以前的代碼）。好比一個修改當前行數據的示例，如今能夠這樣寫：

<template>
  <Table :columns="columns" :data="data">
    <template slot-scope="{ row, index }" slot="name">
      <Input type="text" v-model="editName" v-if="editIndex === index" />
      <span v-else>{{ row.name }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="age">
      <Input type="text" v-model="editAge" v-if="editIndex === index" />
      <span v-else>{{ row.age }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="birthday">
      <Input type="text" v-model="editBirthday" v-if="editIndex === index" />
      <span v-else>{{ getBirthday(row.birthday) }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="address">
      <Input type="text" v-model="editAddress" v-if="editIndex === index" />
      <span v-else>{{ row.address }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="action">
      <div v-if="editIndex === index">
        <Button @click="handleSave(index)">保存</Button>
        <Button @click="editIndex = -1">取消</Button>
      </div>
      <div v-else>
        <Button @click="handleEdit(row, index)">操做</Button>
      </div>
    </template>
  </Table>
</template>
<script> export default { data () { return { columns: [ { title: '姓名', slot: 'name' }, { title: '年齡', slot: 'age' }, { title: '出生日期', slot: 'birthday' }, { title: '地址', slot: 'address' }, { title: '操做', slot: 'action' } ], data: [ { name: '王小明', age: 18, birthday: '919526400000', address: '北京市朝陽區芍藥居' }, { name: '張小剛', age: 25, birthday: '696096000000', address: '北京市海淀區西二旗' }, { name: '李小紅', age: 30, birthday: '563472000000', address: '上海市浦東新區世紀大道' }, { name: '周小偉', age: 26, birthday: '687024000000', address: '深圳市南山區深南大道' } ], editIndex: -1, // 當前聚焦的輸入框的行數 editName: '', // 第一列輸入框，固然聚焦的輸入框的輸入內容，與 data 分離避免重構的閃爍 editAge: '', // 第二列輸入框 editBirthday: '', // 第三列輸入框 editAddress: '', // 第四列輸入框 } }, methods: { handleEdit (row, index) { this.editName = row.name; this.editAge = row.age; this.editAddress = row.address; this.editBirthday = row.birthday; this.editIndex = index; }, handleSave (index) { this.data[index].name = this.editName; this.data[index].age = this.editAge; this.data[index].birthday = this.editBirthday; this.data[index].address = this.editAddress; this.editIndex = -1; }, getBirthday (birthday) { const date = new Date(parseInt(birthday)); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return `${year}-${month}-${day}`; } } } </script>
複製代碼

這種寫法要比 Render 更簡單明瞭，也更符合 Vue.js 的語法。

3.2.2 版本是對 3.2 版本形成的一些問題修復，因此建議你們直接更新到最新的 3.2.2 版本。

除了 iView 組件庫，iView 文檔也作了一些更新。

1. 支持了從 iView Developer 一鍵受權登陸：

   

   登陸後，從 iView 文檔就能夠接收到通知，若是你是社區付費會員，還能夠選擇屏蔽贊助商廣告。以後 iView 全部的生態產品，都將使用這樣的一鍵受權登陸，好比 iView Run 也將集成登陸，這樣用戶就能夠保存示例了。

2. 文檔新增了提問題、寫示例、提 Issues 的快捷入口：

   

3. 文檔將額外的設置和社區信息整合到了一個抽屜裏：

   

4. 如今文檔中全部的示例，都支持直接在 iView Run 中打開了：

   

   iView Run 中的預覽效果更接近一個 .vue 文件，相比 jsFiddle 要更簡單操做，並且對於中國用戶來講，訪問速度也是極快的，由於 iView 的主要服務都使用了全球 CDN 加速，幾乎是秒開的。這些優質的體驗會增長很多運營成本，但爲了用戶着想，是必需要支持的。

新年前 iView 不會再有版本更新了，不過立刻也會更新文檔首頁新春版（放心，咱們的組件庫代碼沒有彩蛋！）。

最後，iView 預祝你們 2019 年快樂多一點，bug 少一點！