diff --git a/src/components/pop-window/close.png b/src/components/pop-window/close.png new file mode 100644 index 0000000..b5e8399 Binary files /dev/null and b/src/components/pop-window/close.png differ diff --git a/src/components/pop-window/header.png b/src/components/pop-window/header.png new file mode 100644 index 0000000..f197a51 Binary files /dev/null and b/src/components/pop-window/header.png differ diff --git a/src/components/pop-window/icon.png b/src/components/pop-window/icon.png new file mode 100644 index 0000000..fd11f0e Binary files /dev/null and b/src/components/pop-window/icon.png differ diff --git a/src/components/pop-window/index.html b/src/components/pop-window/index.html new file mode 100644 index 0000000..47d3e2b --- /dev/null +++ b/src/components/pop-window/index.html @@ -0,0 +1,18 @@ +
+
+ +
+
+
+
+
+ {{title}} +
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/components/pop-window/index.js b/src/components/pop-window/index.js new file mode 100644 index 0000000..59e0d24 --- /dev/null +++ b/src/components/pop-window/index.js @@ -0,0 +1,77 @@ +export default { + components: { + }, + props: { + title: { + type: [String], + default: '标题' + }, + // 是否显示隐藏 + isShow: { + type: Boolean, + default: true + }, + // 宽度 + width: { + type: [String, Number], + default: '800' + }, + // 高度 + height: { + type: [String, Number], + default: '550' + }, + // 距离顶部偏移 + top: { + type: [String, Number], + default: 50 + }, + // 距离左侧偏移 + left: { + type: [String, Number], + default: 50 + }, + marginTop: { + type: [String, Number], + default: 0 + }, + // 控制显示隐藏 + popIsShow: { + type: Boolean, + default: true + } + }, + computed: { + style: function () { + let style = { + top: this.top + '%', + left: this.left + '%', + width: this.width + 'px', + height: this.height + 'px' + }; + + if (!(this.marginTop === 0 || this.marginTop === '0')) { + style.marginTop = this.marginTop + 'px'; + } + return { + top: this.top + '%', + left: this.left + '%', + width: this.width + 'px', + height: this.height + 'px' + }; + } + }, + mounted () { + document.body.appendChild(this.$el); // 将组件挂载到 body 上 + }, + data () { + return { + }; + }, + methods: { + // 关闭 + close () { + this.$emit('update:popIsShow', false); + } + } +}; diff --git a/src/components/pop-window/index.scss b/src/components/pop-window/index.scss new file mode 100644 index 0000000..4ebed4c --- /dev/null +++ b/src/components/pop-window/index.scss @@ -0,0 +1,63 @@ +$border: rgba(49, 129, 246, 1); + +.mask { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.6); + z-index: 10099999900000000900 !important; + align-items: center; + justify-content: center; + + .view { + z-index: 100999999900 !important; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 0px 0px 40px 0px; + background-color: rgba(4, 20, 52, 0.8); + border: 1px solid $border; + display: flex; + flex-direction: column; + + .header { + padding: 0 20px; + background: url('./header.png'); + background-size: 100% 100%; + text-align: center; + height: 40px; + line-height: 40px; + position: relative; + + .left { + display: flex; + align-items: center; + + .icon { + background: url('./icon.png'); + background-size: 100% 100%; + width: 20px; + height: 20px; + margin-right: 10px; + } + + } + + .close { + position: absolute; + right: 10px; + top: 10px; + width: 20px; + height: 20px; + background: url('./close.png') center no-repeat; + background-size: 100% 100%; + } + } + + .body { + flex: 1; + padding: 20px; + } + } +} \ No newline at end of file diff --git a/src/components/pop-window/index.vue b/src/components/pop-window/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/pop-window/index.vue @@ -0,0 +1,3 @@ +