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

Vue · 發表 2019-01-23 20:06:18

摘要：春節將至，iView 也帶來了戊戌年最後的一些更新。首先是上週更新的 3.2.2 版本，這個版本更新了近 20 項內容，主要解決核心版本 3.2 中 Select 元件的一些問題。3.2.2 版本是非常值得更新的，首先是 3.2 開始，Table 元件支援了 slot-scope 寫法...

春節將至，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 文件也做了一些更新。

支援了從 iView Developer 一鍵授權登入：

登入後，從 iView 文件就可以接收到通知，如果你是社群付費會員，還可以選擇遮蔽贊助商廣告。之後 iView 所有的生態產品，都將使用這樣的一鍵授權登入，比如 iView Run 也將整合登入，這樣使用者就可以儲存示例了。

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

文件將額外的設定和社群資訊整合到了一個抽屜裡：

現在文件中所有的示例，都支援直接在 iView Run 中打開了：

iView Run 中的預覽效果更接近一個 .vue 檔案，相比 jsFiddle 要更簡單操作，而且對於中國使用者來說，訪問速度也是極快的，因為 iView 的主要服務都使用了全球 CDN 加速，幾乎是秒開的。這些優質的體驗會增加不少運營成本，但為了使用者著想，是必須要支援的。

新年前 iView 不會再有版本更新了，不過馬上也會更新文件首頁新春版（放心，我們的元件庫程式碼沒有彩蛋！）。

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

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

您可能也會喜歡…