点击重命名div，让input框可编辑-CSS、Vue

一只小红鸭

于 2023-10-16 21:50:35 发布

阅读量138

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_50632313/article/details/133870351

版权

<template>
    <div>
        <div class="education_video_title">教学视频:</div>
        <div class="education_video">
            <div class="education_video_setting" @click="videoSettingVisible = !videoSettingVisible"></div>
            <div class="education_video_text">
                <input class="course_name" ref="inpName" placeholder="请输入内容" v-model="input" :disabled="disabled">
            </div>

            <!-- 点击教学视频右上角的三点 显示 -->
            <div class="video_setting_dialog" v-show="videoSettingVisible">
                <div class="video_setting_text" @click="reName">重命名</div>
                <el-divider></el-divider>
                <div class="video_setting_text" @click="delVideoVisible=true">删除视频</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TestTime",
        data() {
            return {
                input: '空间设计是非常抽象的，需要有灵活的脑袋',
                // input框是否可编辑
                disabled: true,
                // 点击教学视频右上角的三点
                videoSettingVisible: false,
            };
        },
        methods: {
            // 重命名
            reName() {
                this.$nextTick(() =>
                    this.$refs.inpName.focus(),
                    this.disabled = false
                );
            },
        }
    }
</script>
<style lang="scss" scoped>

    ::v-deep .el-divider--horizontal {
        margin: 0 !important;
    }

    .upload_video_title {
        color: #7E7E7E;
        font-family: PingFang SC;
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.125rem;
        display: inline-block;
        margin-top: 2.5rem;

        .upload_btn {
            width: 7.78rem;
            background: #007AFF;
            color: #FFF;
            font-family: PingFang SC;
            font-size: 0.875rem;
            line-height: 0.875rem;
            letter-spacing: 0.035rem;
        }
    }

    .education_video_title {
        margin: 2rem;
        color: #7E7E7E;
        font-family: PingFang SC;
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.125rem;
    }

    .education_video {
        margin: 2rem;
        width: 357px;
        height: 197px;
        margin-top: 1.5rem;
        margin-right: 4rem;
        background: rgb(111, 211, 124);
        border-radius: 0.625rem;
        display: inline-block;
        position: relative;

        .education_video_setting {
            width: 1rem;
            height: 1rem;
            position: absolute;
            right: 1.75rem;
            top: 1rem;
            background: url('../static/Vector_point.png');
        }

        .education_video_text {
            text-align: center;
            color: #FFF;
            font-family: PingFang SC;
            font-size: 0.75rem;
            line-height: 120%;
            margin-top: 160px;
        }

        /* 点击视频右上角三点 显示 */
        .video_setting_dialog {
            width: 8.875rem;
            height: 5rem;
            border-radius: 0.25rem;
            background: #FFF;
            box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08), 1px 1px 2px 0px rgba(82, 90, 102, 0.04);
            position: absolute;
            right: -2.5rem;
            top: 2rem;

            .video_setting_text {
                color: #31373D;
                font-family: PingFang SC;
                font-size: 0.75rem;
                line-height: 0.75rem;
                text-align: center;
                padding: 0.88rem 0;
            }
        }
    }

    /* input框 */
    .course_name {
        width: 330px;
        text-align: center;
        /* 设置背景色为全透明 */
        background-color: transparent;
        /* 还没有点击“重命名时没有边框，所以只有点击重命名聚焦的时候可以看到边框” */
        border: none;
        color: #fff;
    }
</style>