scss

examples/main.js

@@ -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'

packages/agDialog/index.js

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

packages/agDialog/src/index.vue

@@ -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>

packages/agInput/src/index.vue

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

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>

src/static/index.scss

@@ -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;
+    }
+}