更新组件

components/README.md

@@ -4,7 +4,7 @@
 
 有很多是自定义的一些组件的使用
 
-[查看组件 demo](https://zhoubichuan.com/web-vue2x/senior/3.component/1.index.html)
+[查看组件 demo](https://zhoubichuan.com/web-elementui/element-packag/base/1.index.html)
 
 ## 1.使用方法
 

components/alert/index.js

@@ -1,4 +1,4 @@
-import Alert from "./alert.vue"
+import Alert from "./src/alert.vue"
 import Vue from "vue"
 
 Alert.newInstance = (properties) => {
@@ -23,5 +23,7 @@ Alert.newInstance = (properties) => {
         },
     }
 }
-
+Alert.install = function (Vue) {
+    Vue.component(Alert.name, Alert)
+}
 export default Alert

components/button/index.js

@@ -0,0 +1,6 @@
+import Button from './src/button.vue'
+/* istanbul ignore next */
+Button.install = function (Vue) {
+  Vue.component(Button.name, Button)
+}
+export default Button

components/button/button.vue → components/button/src/button-group.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="vue-button" v-bind="$attrs" v-on="$listeners">
+  <div class="vue-button-group" v-bind="$attrs" v-on="$listeners">
     <slot></slot>
   </div>
 </template>
 <script>
 export default {
-  name: "VueButton",
+  name: "VueButtonGroup",
 };
 </script>
 <style lang="scss" scoped>
-.vue-button {
+.vue-button-group {
   display: inline-block;
   padding: 5px 20px;
   border: 1px solid gray;

components/button/src/button.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="vue-button" :class="type" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "VueButton",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.vue-button {
+  display: inline-block;
+  padding: 5px 20px;
+  border: 1px solid gray;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.default {
+  background-color: #FFFFFF;
+}
+.primary {
+  background-color: #409eff;
+}
+.success {
+  background-color: #67C23A;
+}
+.warning {
+  background-color: #E6A23C;
+}
+.danger {
+  background-color: #F56C6C;
+}
+</style>

components/checkbox-group/index.js

@@ -0,0 +1,6 @@
+import CheckBoxGroup from '../checkbox/src/checkbox-group.vue'
+/* istanbul ignore next */
+CheckBoxGroup.install = function (Vue) {
+  Vue.component(CheckBoxGroup.name, CheckBoxGroup)
+}
+export default CheckBoxGroup

components/checkbox/index.js

@@ -0,0 +1,6 @@
+import CheckBox from './src/checkbox.vue'
+/* istanbul ignore next */
+CheckBox.install = function (Vue) {
+  Vue.component(CheckBox.name, CheckBox)
+}
+export default CheckBox

components/checkbox/checkbox-group.vue → components/checkbox/src/checkbox-group.vue

@@ -4,8 +4,8 @@
   </div>
 </template>
 <script>
-import { findComponentsDownward } from "../assist.js"
-import Emitter from "../emitter.js"
+import { findComponentsDownward } from "../../assist.js"
+import Emitter from "../../emitter.js"
 
 export default {
   name: "VueCheckboxGroup",

components/checkbox/checkbox.vue → components/checkbox/src/checkbox.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import Emitter from "../emitter.js";
-import { findComponentUpward } from "../assist.js";
+import Emitter from "../../emitter.js";
+import { findComponentUpward } from "../../assist.js";
 export default {
   name: "VueCheckbox",
   mixins: [Emitter],

components/component/index.js

@@ -0,0 +1,6 @@
+import Component from './src/component.vue'
+/* istanbul ignore next */
+Component.install = function (Vue) {
+  Vue.component(Component.name, Component)
+}
+export default Component

components/display/index.js

@@ -0,0 +1,6 @@
+import Display from './src/display.vue'
+/* istanbul ignore next */
+Display.install = function (Vue) {
+  Vue.Display(Display.name, Display)
+}
+export default Display

components/fit-image/index.js

@@ -0,0 +1,6 @@
+import Image from './src/image.vue'
+/* istanbul ignore next */
+Image.install = function (Vue) {
+  Vue.Image(Image.name, Image)
+}
+export default Image

components/form-item/index.js

@@ -0,0 +1,6 @@
+import FormItem from '../form/src/form-item.vue'
+/* istanbul ignore next */
+FormItem.install = function (Vue) {
+  Vue.Form(FormItem.name, FormItem)
+}
+export default FormItem

components/form/index.js

@@ -0,0 +1,6 @@
+import Form from './src/form.vue'
+/* istanbul ignore next */
+Form.install = function (Vue) {
+  Vue.Form(Form.name, Form)
+}
+export default Form

components/index.js

@@ -1,30 +1,24 @@
-import fitImage from "./fit-image/image";
-import button from "./button/button";
+import fitImage from "./fit-image/index.js";
+import button from "./button/index.js";
 // import RichEditor from "./rich/rich-editor";
-import VideoPlayer from "./video-player/video";
+import VideoPlayer from "./video-player/index.js";
 // import PreviewPdf from "./pdf/preview-pdf";
-import alert from "./alert/alert";
-import component from "./component/component";
-import textOverflow from './text-overflow/overflow'
-import table from "./table/table";
-import dialog from "./dialog";
-import checkbox from "./checkbox/checkbox";
-import checkboxGroup from "./checkbox/checkbox-group";
-import menuItem from "./menu/menu-item";
-import menu from "./menu/menu";
-import resubMenu from "./menu/resub-menu";
-import subMenu from "./menu/sub-menu";
-// import sunburst from "./sunburst";
-import display from "./display/display";
-import typer from "./text-typer/typer";
+import alert from "./alert/index.js";
+import component from "./component/index.js";
+import textOverflow from './text-overflow/index.js'
+import table from "./table/index.js";
+import checkbox from "./checkbox/index.js";
+import CheckboxGroup from "./checkbox-group/index.js";
+import menu from "./menu/index.js";
+import display from "./display/index.js";
+import typer from "./text-typer/index.js";
 // import record from "./voice-record/record";
-import select from "./select";
-import vueChart from "./vue-chart/vue-chart";
-import tree from "./tree/tree";
-import input from './input/input'
-import form from './form/form'
-import formItem from './form/form-item'
-let components = {
+import vueChart from "./vue-chart/index.js";
+import tree from "./tree/index.js";
+import input from './input/index.js'
+import form from './form/index.js'
+import FormItem from './form-item/index.js'
+let components = [
   fitImage,
   // RichEditor,
   VideoPlayer,
@@ -34,32 +28,42 @@ let components = {
   component,
   // VoiceAssistant,
   checkbox,
-  checkboxGroup,
-  resubMenu,
-  subMenu,
-  menuItem,
+  CheckboxGroup,
   menu,
   button,
-  // sunburst,
   alert,
   display,
   typer,
   form,
-  formItem,
+  FormItem,
   // record,
   // select,
   vueChart,
   tree,
   textOverflow,
   input,
-};
+];
+const install = function (Vue, opts = {}) {
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+
+  // Vue.use(InfiniteScroll)
+  // Vue.use(Loading.directive)
+
+  // Vue.prototype.$ELEMENT = {
+  //   size: opts.size || '',
+  //   zIndex: opts.zIndex || 2000
+  // }
+
+  // Vue.prototype.$loading = Loading.service
+  // Vue.prototype.$msgbox = MessageBox
+  // Vue.prototype.$alert = MessageBox.alert
+  // Vue.prototype.$confirm = MessageBox.confirm
+  // Vue.prototype.$prompt = MessageBox.prompt
+  // Vue.prototype.$notify = Notification
+  // Vue.prototype.$message = Message
+}
 export default {
-  install(Vue) {
-    Vue.component('VoiceAssistant', () => import("./voice-assistant/VoiceAssistant"));
-    Vue.component('VueRecord', () => import("./voice-record/record"));
-    for (let key in components) {
-      let item = components[key]
-      Vue.component(item.name, item);
-    }
-  },
+  install
 };

components/input/index.js

@@ -0,0 +1,6 @@
+import Input from './src/input.vue'
+/* istanbul ignore next */
+Input.install = function (Vue) {
+  Vue.Input(Input.name, Input)
+}
+export default Input

components/input/input.vue → components/input/src/input.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Emitter from "../emitter.js";
+import Emitter from "../../emitter.js";
 export default {
   name: "VueInput",
   mixins: [Emitter],

components/menu/index.js

@@ -1,7 +1,7 @@
-import MenuItem from "./menu/menu-item";
-import Menu from "./menu/menu";
-import ResubMenu from "./menu/resub-menu";
-import SubMenu from "./menu/sub-menu";
+import MenuItem from "./src/menu-item.vue";
+import Menu from "./src/menu.vue";
+import ResubMenu from "./src/resub-menu.vue";
+import SubMenu from "./src/sub-menu.vue";
 /* istanbul ignore next */
 Menu.install = function (Vue) {
   Vue.component(ResubMenu.name, ResubMenu)

components/preview-pdf/index.js

@@ -0,0 +1,6 @@
+import Pdf from './src/pdf.vue'
+/* istanbul ignore next */
+Pdf.install = function (Vue) {
+  Vue.component(Pdf.name, Pdf)
+}
+export default Pdf

components/rich-editor/index.js

@@ -0,0 +1,6 @@
+import Rich from './src/rich.vue'
+/* istanbul ignore next */
+Rich.install = function (Vue) {
+  Vue.component(Rich.name, Rich)
+}
+export default Rich

components/table/index.js

@@ -0,0 +1,6 @@
+import Table from './src/table.vue'
+/* istanbul ignore next */
+Table.install = function (Vue) {
+  Vue.component(Table.name, Table)
+}
+export default Table

components/table/table.vue → components/table/src/table.vue

@@ -6,7 +6,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(row, i) in data" :key="i">
+      <tr v-for="(row, rowIndex) in data" :key="rowIndex">
         <td v-for="(col, j) in columns" :key="j">
           <template v-if="'render' in col">
             <Render

components/text-overflow/index.js

@@ -0,0 +1,6 @@
+import Overflow from './src/overflow.vue'
+/* istanbul ignore next */
+Overflow.install = function (Vue) {
+  Vue.component(Overflow.name, Overflow)
+}
+export default Overflow

components/text-typer/index.js

@@ -0,0 +1,6 @@
+import Typer from './src/typer.vue'
+/* istanbul ignore next */
+Typer.install = function (Vue) {
+  Vue.component(Typer.name, Typer)
+}
+export default Typer

components/tree/index.js

@@ -0,0 +1,6 @@
+import Tree from './src/tree.vue'
+/* istanbul ignore next */
+Tree.install = function (Vue) {
+  Vue.component(Tree.name, Tree)
+}
+export default Tree

components/variables.scss

@@ -0,0 +1,28 @@
+// 字体相关
+$--font-path: '~@/assets/fonts' !default; //--font-path为element-ui 字体路径
+$--font-display: 'auto' !default;
+$--font-size--sm: 12px;
+$--font-size--base: 14px;
+$--font-size--xl: 16px;
+$--font-size--xxl: 18px;
+// 颜色
+$--color-primary: #409EFF !default;
+$--color-white: #FFFFFF !default;
+$--color-black: #000000 !default;
+
+$--color-success: #67C23A !default;
+$--color-warning: #E6A23C !default;
+$--color-danger: #F56C6C !default;
+$--color-info: #909399 !default;
+$--color-cyan: #40788C !default;
+$--color-text-primary: #303133 !default;
+$--color-text-regular: #606266 !default;
+$--color-text-secondary: #909399 !default;
+$--color-text-placeholder: #C0C4CC !default;
+$--border-color-base: #DCDFE6 !default;
+$--border-color-light: #E4E7ED !default;
+$--border-color-lighter: #EBEEF5 !default;
+$--border-color-extra-light: #F2F6FC !default;
+$--background-color-base: #F5F7FA !default;
+
+// 字体大小

components/video-player/index.js

@@ -0,0 +1,6 @@
+import Video from './src/video.vue'
+/* istanbul ignore next */
+Video.install = function (Vue) {
+  Vue.component(Video.name, Video)
+}
+export default Video

components/voice-assistant/index.js

@@ -0,0 +1,6 @@
+// import VoiceAssistant from './src/VoiceAssistant.vue'
+/* istanbul ignore next */
+VoiceAssistant.install = function (Vue) {
+  Vue.component(VoiceAssistant.name, () => import("./src/VoiceAssistant.vue"))
+}
+export default VoiceAssistant