116 lines
2.0 KiB
Vue
116 lines
2.0 KiB
Vue
<template>
|
||
<view class="input-box">
|
||
<view class="details">{{details}}</view>
|
||
<view class="in_bot">
|
||
<up-input
|
||
v-model="val"
|
||
ref="commentInput"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
clearable
|
||
customStyle="background-color:#fff;"
|
||
focus
|
||
@blur="blur"
|
||
></up-input>
|
||
<view class="view-btn">
|
||
<button class="but" type="primary" @click="send">{{text}}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
val: '',
|
||
placeholderStyle:{
|
||
padding:'30rpx 0'
|
||
}
|
||
}
|
||
},
|
||
props:{
|
||
text:{
|
||
type: String,
|
||
default: "评论",
|
||
},
|
||
commit: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
details: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
},
|
||
mounted() {
|
||
// this.$refs.commentInput.$el.focus();
|
||
// this.val='123';
|
||
// this.val="";
|
||
},
|
||
methods: {
|
||
send() {
|
||
console.log("评论",this.val)
|
||
this.$emit("submit", this.val)
|
||
|
||
this.val = '';
|
||
},
|
||
blur(){
|
||
|
||
setTimeout(() => {
|
||
this.$emit('blurCom');
|
||
}, 500); // 延迟1000毫秒（1秒）触发事件
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.input-box {
|
||
width:686rpx;
|
||
// height: 30vh;
|
||
min-height: 210rpx;
|
||
padding: 32rpx;
|
||
background: #A8E6CF;
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 15;
|
||
.details{
|
||
width: 686rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.in_bot{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 32rpx;
|
||
.textbox{
|
||
width: 500rpx;
|
||
height: 110rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.but {
|
||
width: 130rpx !important;
|
||
height: 64rpx;
|
||
background: #000000;
|
||
border-radius: 32rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC, PingFang SC-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
color: #ffffff;
|
||
margin-left: 30rpx;
|
||
|
||
}
|
||
}
|
||
</style>
|