scss
This commit is contained in:
qiaopengfei
parent
4d87e4d80c
commit
e346f26d0d
|
|
@ -1,8 +1,9 @@
|
|||
import Vue from 'vue'
|
||||
import App from '../src/App.vue'
|
||||
|
||||
|
||||
//基于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';
|
||||
Vue.use(Input);
|
||||
Vue.use(Select);
|
||||
|
|
@ -12,6 +13,8 @@ Vue.use(DatePicker);
|
|||
Vue.use(Tabs);
|
||||
Vue.use(TabPane);
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Button)
|
||||
|
||||
// 导入组件库
|
||||
import erp_element_ui from '../packages'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import agDialog from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agDialog.install = function (Vue) {
|
||||
Vue.component(agDialog.name, agDialog)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agDialog
|
||||
|
|
@ -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>
|
||||
|
|
@ -68,5 +68,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
@import url("~@/static/index.scss");
|
||||
</style>
|
||||
|
||||
10
src/App.vue
10
src/App.vue
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import agTabs from "../packages/agPagination/src/index.vue";
|
||||
import agTabs from "../packages/agDialog/src/index.vue";
|
||||
export default {
|
||||
components: { agTabs },
|
||||
data() {
|
||||
|
|
@ -116,6 +119,8 @@ export default {
|
|||
total: 0,
|
||||
},
|
||||
],
|
||||
abb: false,
|
||||
innerVisible: false,
|
||||
// options: [
|
||||
// {
|
||||
// value: "选项1",
|
||||
|
|
@ -146,6 +151,7 @@ export default {
|
|||
},
|
||||
handleSizeChange() {},
|
||||
handleCurrentChange() {},
|
||||
handleClose() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue