This commit is contained in:
qiaopengfei 2024-07-05 14:04:15 +08:00
parent 4d87e4d80c
commit e346f26d0d
6 changed files with 382 additions and 4 deletions

View File

@ -1,8 +1,9 @@
import Vue from 'vue' import Vue from 'vue'
import App from '../src/App.vue' import App from '../src/App.vue'
//基于element组件封装引入element组件库 //基于element组件封装引入element组件库
import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination } from 'element-ui'; import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Input); Vue.use(Input);
Vue.use(Select); Vue.use(Select);
@ -12,6 +13,8 @@ Vue.use(DatePicker);
Vue.use(Tabs); Vue.use(Tabs);
Vue.use(TabPane); Vue.use(TabPane);
Vue.use(Pagination) Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Button)
// 导入组件库 // 导入组件库
import erp_element_ui from '../packages' import erp_element_ui from '../packages'

View File

@ -0,0 +1,9 @@
import agDialog from './src'
// 为组件提供 install 安装方法,供按需引入
agDialog.install = function (Vue) {
Vue.component(agDialog.name, agDialog)
}
// 导出组件
export default agDialog

View File

@ -0,0 +1,91 @@
<template>
<el-dialog
class="ag-dialog"
:title="$slots.title ? '' : title"
:visible.sync="show"
:custom="custom"
v-bind="attrs"
v-on="$listeners"
>
<!-- 有写弹窗头部则采用输入的 -->
<template v-if="$slots.title">
<span slot="title">
<slot name="title" />
</span>
</template>
<!-- 弹窗内容区域 -->
<slot />
<!-- 默认底部 -->
<template v-if="!$slots.footer && custom">
<div slot="footer" class="dialog-footer">
<el-button class="btn" size="small" @click="cancel">取消</el-button>
<el-button class="btn sure" size="small" type="primary" @click="submit"
>确定</el-button
>
</div>
</template>
<!-- 弹窗底部区域,可自定义 -->
<template v-if="$slots.footer">
<span slot="footer">
<slot name="footer" />
</span>
</template>
</el-dialog>
</template>
<script>
//slot=title使shot=title
export default {
name: "agDialog",
props: {
visible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
custom: {
type: Boolean,
default: true,
},
},
computed: {
attrs() {
return {
width: "30%",
top: "15vh",
boolean: "dialog",
"show-close": false,
"append-to-body": true,
"modal-append-to-body": true,
"destroy-on-close": true,
...this.$attrs,
};
},
show: {
get() {
return this.visible;
},
set(val) {
this.$emit("update:visible", val); // visible
},
},
},
data() {
return {};
},
methods: {
cancel() {
this.$emit("cancel");
},
submit() {
this.$emit("submit");
},
},
};
</script>
<style scoped >
</style>

View File

@ -68,5 +68,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
@import url("~@/static/index.scss");
</style>

View File

@ -1,11 +1,14 @@
<template> <template>
<div> <div>
<agTabs ref="ref_Pedestal"> </agTabs> <el-button type="text" @click="abb = true">点击打开 Dialog</el-button>
<agTabs ref="ref_Pedestal" :visible.sync="abb">
<!-- <span slot="footer">房价大降分类数据</span> -->
</agTabs>
</div> </div>
</template> </template>
<script> <script>
import agTabs from "../packages/agPagination/src/index.vue"; import agTabs from "../packages/agDialog/src/index.vue";
export default { export default {
components: { agTabs }, components: { agTabs },
data() { data() {
@ -116,6 +119,8 @@ export default {
total: 0, total: 0,
}, },
], ],
abb: false,
innerVisible: false,
// options: [ // options: [
// { // {
// value: "1", // value: "1",
@ -146,6 +151,7 @@ export default {
}, },
handleSizeChange() {}, handleSizeChange() {},
handleCurrentChange() {}, handleCurrentChange() {},
handleClose() {},
}, },
}; };
</script> </script>

267
src/static/index.scss Normal file
View File

@ -0,0 +1,267 @@
// 当超过n行时显示省略号
@mixin elln($n) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $n;
}
// 清除浮动
.clearfix {
& after {
display: table;
clear: both;
content: "";
}
}
// 垂直居中 未知父元素高度 父元素需position: relative;
@mixin cj1 {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
@mixin cj2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%); /* IE 9 */
-moz-transform: translateY(-50%); /* Firefox */
-webkit-transform: translateY(-50%); /* Safari 和 Chrome */
-o-transform: translateY(-50%); /* Opera */
}
@mixin cjf {
display: flex; /*谷歌,火狐等新版本*/
display: -webkit-box; /*安卓低版本*/
display: -moz-box; /*火狐低版本*/
display: -ms-flexbox; /*IE版本*/
display: -webkit-flex; /*谷歌*/
align-items: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
}
@mixin sj1 {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
@mixin sj2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%); /* IE 9 */
-moz-transform: translateX(-50%); /* Firefox */
-webkit-transform: translateX(-50%); /* Safari 和 Chrome */
-o-transform: translateX(-50%); /* Opera */
}
@mixin sjf {
display: flex; /*谷歌,火狐等新版本*/
display: -webkit-box; /*安卓低版本*/
display: -moz-box; /*火狐低版本*/
display: -ms-flexbox; /*IE版本*/
display: -webkit-flex; /*谷歌*/
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
}
// 清除默认样式开始
html,
body {
height: 100%;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin: 0;
padding: 0;
}
header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th {
text-align: left;
font-weight: normal;
}
html,
body,
fieldset,
img,
iframe,
abbr {
border: 0;
}
i,
cite,
em,
var,
address,
dfn {
font-style: normal;
}
[hidefocus],
summary {
outline: 0;
}
li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
small {
font-size: 100%;
}
sup,
sub {
font-size: 83%;
}
pre,
code,
kbd,
samp {
font-family: inherit;
}
q:before,
q:after {
content: none;
}
textarea {
overflow: auto;
resize: none;
}
label,
summary {
cursor: default;
}
a,
button {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
font-weight: bold;
}
del,
ins,
u,
s,
a,
a:hover {
text-decoration: none;
}
body,
textarea,
input,
button,
select,
keygen,
legend {
font: 12px/1.14 Microsoft YaHei, arial, \5b8b\4f53;
color: #333;
outline: 0;
}
body {
background: #fff;
}
a,
a:hover {
color: #333;
}
* {
box-sizing: border-box;
}
// 清除默认样式结束
// 滚动条美化
@media screen and (min-width: 768px) {
::-webkit-scrollbar {
width: 8px;
height: 9px;
background: transparent;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #C1C1C1;
}
::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
}
/* 小型尺寸 */
.mini-bar::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.mini-bar::-webkit-scrollbar-thumb {
border-radius: 3px;
}
}