gree_leran/components/InputBox/InputBox.vue

116 lines
2.0 KiB
Vue
Raw Normal View History

2024-06-22 07:20:39 +00:00
<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>