drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Button & Table Cell

Browse source 
Button add custom event @click，you can use @click in i-button now;
Table Cell support data from content
This commit is contained in:
梁灏 2017-03-15 15:27:04 +08:00
parent 2ac208b99d
commit 99d0429e27
4 changed files with 231 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

199
examples/routers/table.vue
View file

@ -1,169 +1,82 @@
<!--<template>-->
<!--<Card>-->
<!--<Table border :content="self" :columns="columns7" :data="data6"></Table>-->
<!--</Card>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--self: this,-->
<!--columns7: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name',-->
<!--render (row, column, index) {-->
<!--return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;-->
<!--}-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--},-->
<!--{-->
<!--title: '操作',-->
<!--key: 'action',-->
<!--width: 150,-->
<!--align: 'center',-->
<!--render (row, column, index) {-->
<!--return `<i-button type="primary" size="small" @click.native="show(${index})">查看</i-button> <i-button type="error" size="small" @click.native="remove(${index})">删除</i-button>`;-->
<!--}-->
<!--}-->
<!--],-->
<!--data6: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--show (index) {-->
<!--console.log(`姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`)-->
<!--},-->
<!--remove (index) {-->
<!--this.data6.splice(index, 1);-->
<!--}-->
<!--},-->
<!--mounted () {-->
<!--setTimeout(() => {-->
<!--// this.data6.splice(2, 1);-->
<!--}, 3000)-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<div> <i-table border :content="self" :columns="columns7" :data="data6"></i-table>
<i-table border :columns="columns6" :data="data5"></i-table>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
columns6: [ info: '123',
{ self: this,
title: '日期', columns7: [
key: 'date'
},
{ {
title: '姓名', title: '姓名',
key: 'name' key: 'name',
// render (row, column, index) {
// return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
// }
}, },
{ {
title: '年龄', title: '年龄',
key: 'age', key: 'age'
filters: [
{
label: '大于25岁',
value: 1
},
{
label: '小于25岁',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
}, },
{ {
title: '地址', title: '地址',
key: 'address', key: 'address'
filters: [ },
{ {
label: '北京', title: '操作',
value: '北京' key: 'action',
}, width: 150,
{ align: 'center',
label: '上海', render (row, column, index) {
value: '上海' return `<i-button type="primary" size="small" @click="show(${index})">{{ info }}查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
},
{
label: '深圳',
value: '深圳'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
} }
} }
], ],
data5: [ data6: [
{ {
name: '王小明', name: '王小明',
age: 18, age: 18,
address: '北京市朝阳区芍药居', address: '北京市朝阳区芍药居'
date: '2016-10-03'
}, },
{ // {
name: '张小刚', // name: '张小刚',
age: 25, // age: 25,
address: '北京市海淀区西二旗', // address: '北京市海淀区西二旗'
date: '2016-10-01' // },
}, // {
{ // name: '李小红',
name: '李小红', // age: 30,
age: 30, // address: '上海市浦东新区世纪大道'
address: '上海市浦东新区世纪大道', // },
date: '2016-10-02' // {
}, // name: '周小伟',
{ // age: 26,
name: '周小伟', // address: '深圳市南山区深南大道'
age: 26, // }
address: '深圳市南山区深南大道',
date: '2016-10-04'
}
] ]
} }
},
computed: {
dddfff () {
return this.info
}
},
methods: {
show (index) {
this.$Modal.info({
title: '用户信息',
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
},
mounted () {
setTimeout(() => {
this.info = '444';
}, 3000);
} }
} }
</script> </script>

288
examples/routers/upload.vue
View file

@ -1,147 +1,175 @@
<!--<template>-->
<!--<div>-->
<!--<div class="demo-upload-list" v-for="item in uploadList">-->
<!--<template v-if="item.status === 'finished'">-->
<!--<img :src="item.url">-->
<!--<div class="demo-upload-list-cover">-->
<!--<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>-->
<!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
<!--</div>-->
<!--</template>-->
<!--<template v-else>-->
<!--<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>-->
<!--</template>-->
<!--</div>-->
<!--<Upload-->
<!--ref="upload"-->
<!--:show-upload-list="false"-->
<!--:default-file-list="defaultList"-->
<!--:on-success="handleSuccess"-->
<!--:format="['jpg','jpeg','png']"-->
<!--:max-size="2048"-->
<!--:on-format-error="handleFormatError"-->
<!--:on-exceeded-size="handleMaxSize"-->
<!--@on-progress="handleProgress"-->
<!--:before-upload="handleBeforeUpload"-->
<!--multiple-->
<!--type="drag"-->
<!--action="//jsonplaceholder.typicode.com/posts/"-->
<!--style="display: inline-block;width:58px;">-->
<!--<div style="width: 58px;height:58px;line-height: 58px;">-->
<!--<Icon type="camera" size="20"></Icon>-->
<!--</div>-->
<!--</Upload>-->
<!--{{ visible }}-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--defaultList: [-->
<!--{-->
<!--'name': 'a42bdcc1178e62b4694c830f028db5c0',-->
<!--'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'-->
<!--},-->
<!--{-->
<!--'name': 'bc7521e033abdd1e92222d733590f104',-->
<!--'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'-->
<!--}-->
<!--],-->
<!--imgName: '',-->
<!--visible: false,-->
<!--uploadList: []-->
<!--}-->
<!--},-->
<!--computed: {-->
<!--// uploadList () {-->
<!--// return this.$refs.upload ? this.$refs.upload.fileList : [];-->
<!--// }-->
<!--},-->
<!--watch: {-->
<!--},-->
<!--mounted () {-->
<!--this.uploadList = this.$refs.upload.fileList;-->
<!--// console.log(this.$refs.upload.fileList)-->
<!--},-->
<!--methods: {-->
<!--handleView (name) {-->
<!--this.imgName = name;-->
<!--this.visible = true;-->
<!--},-->
<!--handleRemove (file) {-->
<!--// 从 upload 实例删除数据-->
<!--const fileList = this.$refs.upload.fileList;-->
<!--this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);-->
<!--},-->
<!--handleSuccess (res, file) {-->
<!--// 因为上传过程为实例，这里模拟添加 url-->
<!--file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';-->
<!--file.name = '7eb99afb9d5f317c912f08b5212fd69a';-->
<!--},-->
<!--handleFormatError (file) {-->
<!--this.$Notice.warning({-->
<!--title: '文件格式不正确',-->
<!--desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'-->
<!--});-->
<!--},-->
<!--handleMaxSize (file) {-->
<!--this.$Notice.warning({-->
<!--title: '超出文件大小限制',-->
<!--desc: '文件 ' + file.name + ' 太大，不能超过 2M。'-->
<!--});-->
<!--},-->
<!--handleBeforeUpload () {-->
<!--const check = this.uploadList.length < 5;-->
<!--if (!check) {-->
<!--this.$Notice.warning({-->
<!--title: '最多只能上传 5 张图片。'-->
<!--});-->
<!--}-->
<!--return check;-->
<!--},-->
<!--handleProgress (s) {-->
<!--console.log(s)-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<style>-->
<!--.demo-upload-list{-->
<!--display: inline-block;-->
<!--width: 60px;-->
<!--height: 60px;-->
<!--text-align: center;-->
<!--line-height: 60px;-->
<!--border: 1px solid transparent;-->
<!--border-radius: 4px;-->
<!--overflow: hidden;-->
<!--background: #fff;-->
<!--position: relative;-->
<!--box-shadow: 0 1px 1px rgba(0,0,0,.2);-->
<!--margin-right: 4px;-->
<!--}-->
<!--.demo-upload-list img{-->
<!--width: 100%;-->
<!--height: 100%;-->
<!--}-->
<!--.demo-upload-list-cover{-->
<!--display: none;-->
<!--position: absolute;-->
<!--top: 0;-->
<!--bottom: 0;-->
<!--left: 0;-->
<!--right: 0;-->
<!--background: rgba(0,0,0,.6);-->
<!--}-->
<!--.demo-upload-list:hover .demo-upload-list-cover{-->
<!--display: block;-->
<!--}-->
<!--.demo-upload-list-cover i{-->
<!--color: #fff;-->
<!--font-size: 20px;-->
<!--cursor: pointer;-->
<!--margin: 0 2px;-->
<!--}-->
<!--</style>-->
<template> <template>
<div> <div>
<div class="demo-upload-list" v-for="item in uploadList"> <Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
<template v-if="item.status === 'finished'"> <i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
<img :src="item.url">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
</template>
</div>
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
@on-progress="handleProgress"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="//jsonplaceholder.typicode.com/posts/"
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="camera" size="20"></Icon>
</div>
</Upload> </Upload>
{{ visible }} <i-button @click.native="handleUpload">上传</i-button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
defaultList: [ file: null
{
'name': 'a42bdcc1178e62b4694c830f028db5c0',
'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
},
{
'name': 'bc7521e033abdd1e92222d733590f104',
'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
}
],
imgName: '',
visible: false,
uploadList: []
} }
}, },
computed: {
// uploadList () {
// return this.$refs.upload ? this.$refs.upload.fileList : [];
// }
},
watch: {
},
mounted () {
this.uploadList = this.$refs.upload.fileList;
// console.log(this.$refs.upload.fileList)
},
methods: { methods: {
handleView (name) { handleBeforeUpload (file) {
this.imgName = name; this.file = file;
this.visible = true; return false;
}, },
handleRemove (file) { handleUpload () {
// 从 upload 实例删除数据 this.$refs.file.post(this.file);
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
},
handleSuccess (res, file) {
// 因为上传过程为实例，这里模拟添加 url
file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
file.name = '7eb99afb9d5f317c912f08b5212fd69a';
},
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
});
},
handleBeforeUpload () {
const check = this.uploadList.length < 5;
if (!check) {
this.$Notice.warning({
title: '最多只能上传 5 张图片。'
});
}
return check;
},
handleProgress (s) {
console.log(s)
} }
} }
} }
</script> </script>
<style>
.demo-upload-list{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list img{
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
display: block;
}
.demo-upload-list-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>

9
src/components/button/button.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<button :type="htmlType" :class="classes" :disabled="disabled"> <button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick">
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
<Icon :type="icon" v-if="icon && !loading"></Icon> <Icon :type="icon" v-if="icon && !loading"></Icon>
<span v-if="showSlot" ref="slot"><slot></slot></span> <span v-if="showSlot" ref="slot"><slot></slot></span>
@ -64,8 +64,13 @@
]; ];
} }
}, },
methods: {
handleClick (event) {
this.$emit('click', event);
}
},
mounted () { mounted () {
this.showSlot = this.$refs.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; this.showSlot = this.$slots.default !== undefined;
} }
}; };
</script> </script>

24
src/components/table/cell.vue
View file

@ -52,36 +52,32 @@
const template = this.column.render(this.row, this.column, this.index); const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div'); const cell = document.createElement('div');
cell.innerHTML = template; cell.innerHTML = template;
// const _oldParentChildLen = $parent.$children.length;
// const _newParentChildLen = $parent.$children.length;
// if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag
// this.uid = $parent.$children[$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update
// }
this.$el.innerHTML = ''; this.$el.innerHTML = '';
let methods = {}; let methods = {};
Object.keys($parent).forEach(key => { Object.keys($parent).forEach(key => {
const func = $parent[`${key}`]; const func = $parent[key];
if (typeof(func) === 'function' && func.name === 'boundFn') { if (typeof(func) === 'function' && func.name === 'boundFn') {
methods[`${key}`] = func; methods[key] = func;
} }
}); });
const res = Vue.compile(cell.outerHTML); const res = Vue.compile(cell.outerHTML);
// todo 临时解决方案
const component = new Vue({ const component = new Vue({
render: res.render, render: res.render,
staticRenderFns: res.staticRenderFns, staticRenderFns: res.staticRenderFns,
methods: methods methods: methods,
data () {
return $parent._data;
}
}); });
const Cell = component.$mount(); const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el); this.$refs.cell.appendChild(Cell.$el);
} }
}, },
destroy () { destroy () {
const $parent = this.content;
for (let i = 0; i < $parent.$children.length; i++) {
if ($parent.$children[i]._uid === this.uid) {
$parent.$children[i].$destroy();
}
}
}, },
toggleSelect () { toggleSelect () {
this.$parent.$parent.toggleSelect(this.index); this.$parent.$parent.toggleSelect(this.index);