码迷,mamicode.com
首页 > 其他好文 > 详细

Render函数:留言列表组件

时间:2019-06-30 17:09:52      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:更新   set   margin   数组   poi   实现   length   index   mode   

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="Vue.2.6.10.js"></script>
</head>
<style>
    [v-cloak]{
        display: none;
    }
    *{
        padding: 0;
        margin: 0;
    }
    .message{
        width: 450px;
        text-align: right;
    }
    .message div{
        margin-bottom: 12px;
    }
    .message span{
        display: inline-block;
        width: 100px;
        vertical-align: top;
    }
    .message input, .message textarea{
        width: 300px;
        height: 32px;
        padding: 0 6px;
        color:#657180;
        border: 1px solid #d7dde4;
        border-radius: 4px;
        cursor: text;
        outline: none;
    }
    .message input:focus, .message textarea:focus{
        border: 1px solid #3399ff;
    }
    .message textarea{
        height: 60px;
        padding: 4px 6px;
    }
    .message button{
        display: inline-block;
        padding: 6px 15px;
        border: 1px solid #39f;
        border-radius: 4px;
        color:#fff;
        background-color: #39f;
        cursor: pointer;
        outline: none;
    }
    .list{
        margin-top: 50px;
    }
    .list-item{
        padding: 10px;
        border-bottom: 1px solid #e3e833;
        overflow: hidden;
    }
    .list-item span{
        display: block;
        width: 60px;
        float: left;
        color:#39f;
    }
    .list-msg{
        display: block;
        width: 60px;
        text-align: justify;
    }
    .list-msg a{
        color: #9ea7b4;
        cursor: pointer;
        float: right;

    }
    .list-msg a:hover{
        color:#39f;
    }
    .list-nothing{
        text-align: center;
        color:#9ea7b4;
        padding: 20px;

    }

</style>
<body>
    <div id="app" v-cloak style="width: 500px;margin:0 auto; margin-top: 30px;">
        <div class="message">
            <v-input v-model=‘username‘></v-input>
            <v-textarea v-model=‘message‘ ref="message"></v-textarea>
            <button @click=‘handleSend‘>发布</button>
        </div>
        <list :list=‘list‘ @reply=‘handleReply‘></list>
    </div>
</body>
<script>
    Vue.component(vInput,{
        props:{
            value:{
                type:[String,Number],
                default:‘‘
            }
        },
        render(h) {
            var _this = this;
            return h(div,[
                h(span,昵称:),
                h(input,{
                    attrs:{
                        type:text
                    },
                    domProps:{
                        value:this.value  
                    },
                    on:{
                        //v-model在render中需要自己实现嗷
                        input:function(event){
                            _this.value = event.target.value;
                            _this.$emit(input,event.target.value)
                        }
                    }
                })
            ])
        },
    });

    Vue.component(vTextarea,{
        props:{
            value:{
                type:String,
                default:‘‘
            }
        },
        render(h) {
            var _this = this;
            return h(div,[
                h(span,留言内容),
                h(textarea,{
                    attrs:{
                        placeholder:说点什么
                    },
                    domProps:{
                        value:this.value
                    },
                    ref:message,
                    on:{
                        input:function(event){
                            _this.value = event.target.value;
                            _this.$emit(input,event.target.value)
                        }
                    }
                })
            ])
        },
        methods:{
            focus:function(){
                this.$refs.message.focus()
            }
        }
    })

    Vue.component(list,{
        props:{
            list:{
                type:Array,
                default:function(){
                    return [];
                }
            }
        },
        render(h) {
            var _this = this;
            var list = [];
            this.list.forEach(function(msg,index){
                var node = h(div,{
                    attrs:{
                        class:list-item
                    }
                },[
                    h(span,msg.name + ":"),
                    h(div,{
                        attrs:{
                            class:list-msg
                        }
                    },[
                        h(p,msg.message),
                        h(a,{
                            attrs:{
                                class:list-reply
                            },
                            on:{
                                click:function(){
                                    _this.handleReply(index);
                                }
                            }
                        },回复)
                    ])
                ])
                list.push(node);
            });
            if(this.list.length){
                return h(div,{
                    attrs:{
                        class:list
                    },
                },list);
            }else{
                return h(div,{
                    attrs:{
                        class:list-nothing
                    },
                },留言列表为空嗷,说点什么吧~)
            }
        },
        methods:{
            handleReply:function(index){
                this.$emit(reply,index);
            }
        }
    });

    //发布留言需要的数据主要有:昵称、留言内容,发布操作在根实例内完成,留言列表数据同样获取自app
    var app = new Vue({
        el:"#app",
        data:{
            username:‘‘,
            message:‘‘,
            list:[]
        },
        methods: {
            handleSend:function(){
                if(this.username === ‘‘){
                    window.alert(要输入昵称噢);
                    return
                }
                if(this.message === ‘‘){
                    window.alert(说点什么吧~);
                    return
                }
                this.list.push({
                    //List是一个对象数组?
                    name:this.username,
                    message:this.message
                });
                console.log(this.list);
                this.message = ‘‘;//置空输入栏
            },
            handleReply:function(index){
                var name = this.list[index].name;
                this.message = 回复@ + name + ":";
                this.$refs.message.focus();
            }
        },
    });

    //分析一哈:
    //v-input组件:生成<span>昵称</span>与输入栏,
    // 并设置输入栏的值为这个组件得到的值:在render函数中用on选项实现v-model
    //(需要domPropsyuon配合来实现双向绑定)当触发input事件,将v-input组件的value更新为
    //同时向根实例发送一个input事件

    //v-textarea组件:生成<span>留言内容<span>与文本输入域,在这里同样手动实现v-model
    //该组件中多包含了一个focus方法,this.$refs.message.focus()使得这个实例中render函数生成的textarea获得焦点

    //点击回复按钮,调用handleSend(),将昵称与留言内容传入list,置空输入栏,

    //▲list组件
    //接收到list后,使用list来渲染留言列表,同时在‘回复’按钮上传入昵称对应的index,当点击时调用handleReply方法
    //它的reply方法是为了调用根实例的同名方法
    //
</script>
</html>
View Code

预览效果:

技术图片

这几个Vue的小组件写下来,写的我真的好佩服尤大...

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<scriptsrc="Vue.2.6.10.js"></script>
</head>
<style>
[v-cloak]{
display: none;
}
*{
padding: 0;
margin: 0;
}
.message{
width: 450px;
text-align: right;
}
.messagediv{
margin-bottom: 12px;
}
.messagespan{
display: inline-block;
width: 100px;
vertical-align: top;
}
.messageinput, .messagetextarea{
width: 300px;
height: 32px;
padding: 0 6px;
color:#657180;
border: 1px solid #d7dde4;
border-radius: 4px;
cursor: text;
outline: none;
}
.messageinput:focus, .messagetextarea:focus{
border: 1px solid #3399ff;
}
.messagetextarea{
height: 60px;
padding: 4px 6px;
}
.messagebutton{
display: inline-block;
padding: 6px 15px;
border: 1px solid #39f;
border-radius: 4px;
color:#fff;
background-color: #39f;
cursor: pointer;
outline: none;
}
.list{
margin-top: 50px;
}
.list-item{
padding: 10px;
border-bottom: 1px solid #e3e833;
overflow: hidden;
}
.list-itemspan{
display: block;
width: 60px;
float: left;
color:#39f;
}
.list-msg{
display: block;
width: 60px;
text-align: justify;
}
.list-msga{
color: #9ea7b4;
cursor: pointer;
float: right;

}
.list-msga:hover{
color:#39f;
}
.list-nothing{
text-align: center;
color:#9ea7b4;
padding: 20px;

}

</style>
<body>
<divid="app"v-cloakstyle="width: 500px;margin:0 auto; margin-top: 30px;">
<divclass="message">
<v-inputv-model=‘username‘></v-input>
<v-textareav-model=‘message‘ref="message"></v-textarea>
<button@click=‘handleSend‘>发布</button>
</div>
<list:list=‘list‘@reply=‘handleReply‘></list>
</div>
</body>
<script>
Vue.component(‘vInput‘,{
props:{
value:{
type:[String,Number],
default:‘‘
}
},
render(h) {
var _this =this;
returnh(‘div‘,[
h(‘span‘,‘昵称:‘),
h(‘input‘,{
attrs:{
type:‘text‘
},
domProps:{
value:this.value
},
on:{
//v-model在render中需要自己实现嗷
input:function(event){
_this.value= event.target.value;
_this.$emit(‘input‘,event.target.value)
}
}
})
])
},
});

Vue.component(‘vTextarea‘,{
props:{
value:{
type:String,
default:‘‘
}
},
render(h) {
var _this =this;
returnh(‘div‘,[
h(‘span‘,‘留言内容‘),
h(‘textarea‘,{
attrs:{
placeholder:‘说点什么‘
},
domProps:{
value:this.value
},
ref:‘message‘,
on:{
input:function(event){
_this.value= event.target.value;
_this.$emit(‘input‘,event.target.value)
}
}
})
])
},
methods:{
focus:function(){
this.$refs.message.focus()
}
}
})

Vue.component(‘list‘,{
props:{
list:{
type:Array,
default:function(){
return [];
}
}
},
render(h) {
var _this =this;
var list = [];
this.list.forEach(function(msg,index){
var node =h(‘div‘,{
attrs:{
class:‘list-item‘
}
},[
h(‘span‘,msg.name+":"),
h(‘div‘,{
attrs:{
class:‘list-msg‘
}
},[
h(‘p‘,msg.message),
h(‘a‘,{
attrs:{
class:‘list-reply‘
},
on:{
click:function(){
_this.handleReply(index);
}
}
},‘回复‘)
])
])
list.push(node);
});
if(this.list.length){
returnh(‘div‘,{
attrs:{
class:‘list‘
},
},list);
}else{
returnh(‘div‘,{
attrs:{
class:‘list-nothing‘
},
},‘留言列表为空嗷,说点什么吧~‘)
}
},
methods:{
handleReply:function(index){
this.$emit(‘reply‘,index);
}
}
});

//发布留言需要的数据主要有:昵称、留言内容,发布操作在根实例内完成,留言列表数据同样获取自app
var app = new Vue({
el:"#app",
data:{
username:‘‘,
message:‘‘,
list:[]
},
methods: {
handleSend:function(){
if(this.username === ‘‘){
window.alert(‘要输入昵称噢‘);
return
}
if(this.message === ‘‘){
window.alert(‘说点什么吧~‘);
return
}
this.list.push({
//List是一个对象数组?
name:this.username,
message:this.message
});
console.log(this.list);
this.message = ‘‘;//置空输入栏
},
handleReply:function(index){
var name = this.list[index].name;
this.message = ‘回复@‘ + name + ":";
this.$refs.message.focus();
}
},
});

//分析一哈:
//v-input组件:生成<span>昵称</span>与输入栏,
// 并设置输入栏的值为这个组件得到的值:在render函数中用on选项实现v-model
//(需要domPropsyuon配合来实现双向绑定)当触发input事件,将v-input组件的value更新为
//同时向根实例发送一个input事件

//v-textarea组件:生成<span>留言内容<span>与文本输入域,在这里同样手动实现v-model
//该组件中多包含了一个focus方法,this.$refs.message.focus()使得这个实例中render函数生成的textarea获得焦点

//点击回复按钮,调用handleSend(),将昵称与留言内容传入list,置空输入栏,

//▲list组件
//接收到list后,使用list来渲染留言列表,同时在‘回复’按钮上传入昵称对应的index,当点击时调用handleReply方法
//它的reply方法是为了调用根实例的同名方法
//
</script>
</html>

Render函数:留言列表组件

标签:更新   set   margin   数组   poi   实现   length   index   mode   

原文地址:https://www.cnblogs.com/linbudu/p/11110264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!