购物车 vue

最新推荐文章于 2024-05-31 22:41:13 发布

不会敲代码的小王ꦿ

最新推荐文章于 2024-05-31 22:41:13 发布

阅读量79

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_68086484/article/details/127042193

版权

样式图

全部代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/index.css">
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #app {
        width: 1200px;
        margin: 0 auto;
    }

    #app table {
        width: 100%;
        border: 1px solid #ccc;
        text-align: center;
    }

    #app tr th {
        height: 40px;
        background-color: #fafafa;
    }

    #app tr td {
        height: 40px;
    }

    input {
        margin-right: 50px;
    }

    button {
        width: 40px;
        height: 30px;
        border: none;
        background-color: #fff;
    }

    .dels {
        color: #F55432;
        font-weight: bold;
    }

    .edit {
        color: #3CA2D9;
        font-weight: bold;
    }

    .additem input {
        height: 30px;
        border: 1px solid #ccc;
    }

    .additem button {
        font-size: 16px;
        color: #3CA2D9;
        border: 1px solid #3CA2D9;
    }

    .model {
        text-align: center;

    }

    .model .sure {
        color: rgb(53, 206, 53);
        margin-right: 50px;
        border: 1px solid #ccc;
    }

    .model .del {
        color: #f00;
        /* margin-right: 50px; */
        border: 1px solid #ccc;
    }
</style>

<body>
    <div id="app">
        <div class="additem">
            <input type="text" placeholder="标题" v-model="obj.title" />
            <input type="text" placeholder="发布人" v-model="obj.name" />
            <input type="date" v-model="obj.time" />
            <button @click="add">新增</button>
        </div>
        <div v-if="list.length>0">
            <table cellspacing="0" rules="all">
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>发布人</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in list" :key="item.name">
                    <!-- 序号 -->
                    <td>{{index+1}}</td>
                    <!-- 标题 -->
                    <td>{{item.title}}</td>
                    <!-- 发布人 -->
                    <td>{{item.name}}</td>
                    <!-- 时间 -->
                    <td>{{item.time}}</td>
                    <td>
                        <button @click="del(index)" class="dels">删除</button>
                        <button @click="visible=true;editRow=index; a=item.title;b=item.name;c=item.time;"
                            class="edit">编辑</button>
                    </td>
                </tr>
            </table>
            <modal :visible.sync="visible" class="model">
                <span>&emsp;标题:</span>
                <input type="text" v-model="a" />
                <br><br>
                <span>发布人:</span>
                <input type="text" v-model="b" />
                <br><br>
                <span>&emsp;时间:</span>
                <input type="text" v-model="c" />
                <br><br>
                <button @click="sure()" class="sure">确认</button>
                <button @click="visible=false" class="del">取消</button>
            </modal>
        </div>
        <div v-else style="text-align: center">
            <h3>暂无商品</h3>
        </div>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script src="js/index.js"></script>
<script>
    new Vue({
        el: "#app",
        components: { modal },
        methods: {
            //增
            add() {
                // 必填项和非必填  判断
                //获取id   连接数据库，方法接收点击事件传过来的id
                if (!this.obj.title || !this.obj.name || !this.obj.time) return;
                var _id = Math.max(this.list.map(function (v) {
                    return v.id;
                })
                ) + 1;
                //追加 v-model配合双向绑定
                this.list.push({
                    title: this.obj.title,
                    name: this.obj.name,
                    time: this.obj.time,
                    id: _id
                });
                //id自动递增  获取索引 新东西
                //  清空input的值 校验处理
                this.obj = {};
            },

            // 删
            del(index) {
                this.list.splice(index, 1)
            },
            clear() {
                this.list.splice(0)
            },
            sure() {
                this.list[this.editRow].title = this.a;
                this.list[this.editRow].name = this.b;
                this.list[this.editRow].time = this.c;
                this.visible = false;
            },

        },
        // 总价格
        data() {
            return {
                visible: false,
                editRow: null,
                a: "",
                b: "",
                c: "",
                obj: {
                    name: "",
                    title: "",
                    time: "",
                },
                list: [{
                    name: "张若昀",
                    title: "在移动设备开发",
                    time: "2018-02-09",
                },
                {
                    name: "章子怡",
                    title: "图形及特效特性",
                    time: "2018-02-09",
                },
                {
                    name: "华晨宇",
                    title: "设置兼容特性",
                    time: "2018-02-09",
                },
                {
                    name: "吴宣仪",
                    title: "W3C将致力于开发用于实时通信",
                    time: "2018-02-09",
                },
                {
                    name: "张碧晨",
                    title: "全新的表单输入对象",
                    time: "2018-02-09",
                }]
            }
        }
    })
</script>


</html>

组件index.css

.modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
}

.modal-content {
    width: 400px;
    height: 400px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modal-title {
    line-height: 44px;
    background-color: #fafafa;
    position: relative;
    text-align: center;
}

.modal .close {
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    background-color: #fafafa;
    border: none;
    font-size: 24px;
    color: #f00;
}

.modal-body {
    margin-top: 20px;
    margin-left: 50px;
}

组件index.js

var modal = {
    template: `
    <div class="modal" v-if="visible">
        <div class="modal-content">
            <h3 class="modal-title">
                标题
                <button class="close" @click="$emit('update:visible',false)">x</button>
            </h3>
            <div class="modal-body">
                <slot></slot>
            </div>

        </div>
    </div>`,
    props: {
        visible: {
            type: Boolean,
            default: false                              
        }
    }
}