first commit

mongohu · mongohu · commit 36485a90c928 · 2020-08-16T23:17:42.000+08:00
diff --git a/css/dialog.css b/css/dialog.css
@@ -0,0 +1,30 @@
+.dialog {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0,0,0,.3);
+    box-sizing: border-box;
+    min-width: 300px;
+}
+
+.dialog-header {
+    padding: 20px 20px 10px;
+}
+
+.dialog-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.dialog-body {
+    padding: 30px 20px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/dialog.css" />
+</head>
+
+<body>
+
+    <div id="app">
+        <button @click="visible=!visible">按钮</button>
+
+        <kkb-dialog :title="title" :visible.sync="visible" @open="open" @close="close">
+            <span>这是一段信息</span>
+        </kkb-dialog>
+    </div>
+
+    <script src="./js/vue.js"></script>
+    <script src="./js/dialog.js"></script>
+    <script>
+        new Vue({
+            el: '#app',
+            data: {
+                title: '新的标题',
+                visible: true
+            },
+            methods: {
+                open() {
+                    console.log('打开了');
+                },
+
+                close() {
+                    console.log('关闭了');
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
diff --git a/js/dialog.js b/js/dialog.js
@@ -0,0 +1,31 @@
+Vue.component('kkb-dialog', {
+    props: {
+        visible: Boolean,
+        title: String,
+    },
+    data() {
+        return {};
+    },
+    watch: {
+        visible: function (val) {
+            val ? this.$emit("open") : this.$emit("close");
+
+        }
+    },
+    methods:{
+        close(){
+            this.$emit('update:visible', false);
+        }
+    },
+    template: `
+        <div class="dialog" v-show="visible">
+            <div class="dialog-header">
+                <span class="dialog-title">提示</span>
+                <i class="dialog-close" @click="close">x</i>
+            </div>
+            <div class="dialog-body">
+                <slot></slot>
+            </div>
+        </div>
+    `
+});
diff --git a/js/vue.js b/js/vue.js
