dpzvc-ui 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dpzvc-ui",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Vue组件库",
   "main": "dist/dpzvc.js",
   "module": "dist/dpzvc.esm.js",
@@ -47,6 +47,7 @@
     "babel-runtime": "^6.26.0",
     "cross-env": "^3.1.4",
     "css-loader": "^6.11.0",
+    "del": "^8.0.1",
     "eslint": "^3.12.2",
     "eslint-plugin-html": "^1.7.0",
     "exif-js": "^2.2.1",
@@ -92,4 +93,4 @@
   "directories": {
     "example": "example"
   }
-}
+}

package/src/components/Indicator/index.js

@@ -1,153 +1,88 @@
 /**
- * Created by admin on 2017/6/22.
+ * Indicator - Vue 2.7 CLI 适配版
  */
-import Indicator from './Indicator'
-import {camelcaseToHyphen} from '../../utils/util'
-import Vue from 'vue'
-let instance;
-
-Indicator.newInstance = properties => {
-
-    let _props = properties || {};
-
-    let props = '';
-
-    Object.keys(_props).forEach(prop => {
-
-        props += ' :' + camelcaseToHyphen(prop) + '=' + prop
-    })
-
-    const div = document.createElement('div');
-
-    document.body.appendChild(div);
-
-    let indicator = new Vue({
-        el: div,
-        template: `<Indicator ${props} v-model="visible" ></Indicator>`,
-        components: {
-            Indicator
-        },
-        data: Object.assign(_props, {
-            visible: false,
-            size: 45,
-            type: 'snake',
-            color: '#ffffff',
-            text: '加载中...',
-            onRemove:function(){}
-
-        }),
-        methods: {
-            remove() {
-                this.$children[0].visible = false;
-                setTimeout(() => {
-                    this.destroy();
-                }, 300)
-            },
-            destroy(){
 
-                this.$destroy();
-
-                // if (!this.$el) return;
-                document.body.removeChild(this.$el);
-                this.onRemove()
-            }
-        }
-    }).$children[0];
-
-
-    return {
-        open(options){
-
-            indicator.$parent.visible = true;
-            indicator.$parent.onRemove = options.onRemove;
-
-
-            if ('size' in options) {
-                indicator.$parent.size = options.size;
-            }
-
-            if ('type' in options) {
-                indicator.$parent.type = options.type;
-            }
-
-            if ('color' in options) {
-                indicator.$parent.color = options.color;
-            }
+import Vue from 'vue'
+import Indicator from './Indicator.vue'
 
-            if ('text' in options) {
-                indicator.$parent.text = options.text;
-            }
+let instance = null
 
-        },
+function createInstance(props = {}) {
+  const IndicatorConstructor = Vue.extend(Indicator)
 
-        remove(){
+  const vm = new IndicatorConstructor({
+    propsData: {
+      size: 45,
+      type: 'snake',
+      color: '#ffffff',
+      text: '加载中...',
+      ...props
+    }
+  })
 
-            indicator.visible = false;
+  vm.$mount()
+  document.body.appendChild(vm.$el)
 
-            indicator.$parent.remove()
+  vm.visible = false
 
-        },
-        component: indicator
-    }
-};
+  vm.$on('remove', () => {
+    destroyInstance()
+  })
 
+  return vm
+}
 
-function confirm(options) {
-    instance = instance || Indicator.newInstance({
-            size: 45,
-            color: '#ffffff',
-            text: '正在加载...',
-            type: 'snake'
-        });
+function destroyInstance() {
+  if (!instance) return
+  instance.$destroy()
+  if (instance.$el && instance.$el.parentNode) {
+    instance.$el.parentNode.removeChild(instance.$el)
+  }
+  instance = null
+}
 
-    options.onRemove = function () {
-        instance = null;
-    }
+function open(options = {}) {
+  if (!instance) {
+    instance = createInstance(options)
+  }
 
-    instance.open(options)
+  Object.keys(options).forEach(key => {
+    instance.$props[key] = options[key]
+  })
 
+  instance.visible = true
 }
 
+function close() {
+  if (!instance) return
+  instance.visible = false
+  destroyInstance()
+}
 
-Indicator.blade = function (props = {}) {
+/* ================== 对外 API ================== */
 
-    props.type = 'blade';
-    return confirm(props)
-}
+Indicator.open = open
 
+Indicator.remove = close
 
 Indicator.snake = function (props = {}) {
+  props.type = 'snake'
+  open(props)
+}
 
-    props.type = 'snake';
-    return confirm(props)
+Indicator.blade = function (props = {}) {
+  props.type = 'blade'
+  open(props)
 }
 
 Indicator.circle = function (props = {}) {
-
-    props.type = 'fading-circle';
-    return confirm(props)
+  props.type = 'fading-circle'
+  open(props)
 }
 
 Indicator.bounce = function (props = {}) {
-
-    props.type = 'double-bounce';
-    return confirm(props)
+  props.type = 'double-bounce'
+  open(props)
 }
 
-Indicator.remove = function () {
-
-
-    if (!instance) return false;
-
-     instance = instance || Indicator.newInstance({
-            size: 45,
-            color: '#ffffff',
-            text: '正在加载...',
-            type: 'snake'
-        })
-
-    instance.remove()
-}
-
-
-export default  Indicator
+export default Indicator

package/src/components/message/confirm.js

@@ -1,52 +1,43 @@
 /**
- * Created by admin on 2017/5/8.
+ * messageGroup.js
+ * 兼容 Vue 2.7 runtime-only 构建
  */
 
-import MessageGroup from './messageGroup.vue'
 import Vue from 'vue';
-import {camelcaseToHyphen} from '../../utils/util'
-
-MessageGroup.newInstance = function (props) {
-
-    let _props = props || {};
-
-    let _prop = '';
-    Object.keys(_props).forEach((prop) => {
-
-        _prop += ' :' + camelcaseToHyphen(prop) + '=' + prop
-    });
-
-    let div = document.createElement('div');
-
-    document.body.appendChild(div);
-
-    let message = new Vue({
-        el: div,
-        data: _props,
-        template:`<Message-group ${_prop} ></Message-group>`,
-        components: {MessageGroup},
-    }).$children[0];
-
-
-    return {
-
-        add(props){
-            message.add(props)
-        },
-        remove(props) {
-
-            message.remove(props)
-        },
-        component: message,
-        destroy(){
-            message.closeAll();
-
-            setTimeout(()=>{
-                document.body.removeChild(document.getElementsByClassName('dpzvc-message')[0].parentElement)
-            },500)
-
-        }
+import MessageGroup from './messageGroup.vue'; // 你的 Vue 组件
+import { camelcaseToHyphen } from '../../utils/util';
+
+MessageGroup.newInstance = function (props = {}) {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  // 使用 render 函数代替 template，兼容 runtime-only
+  const messageVm = new Vue({
+    data() {
+      return { ...props };
+    },
+    render(h) {
+      return h(MessageGroup, { props });
+    }
+  }).$mount(div);
+
+  const instance = messageVm.$children[0]; // 确保实例存在
+
+  return {
+    add(options) {
+      if (instance) instance.add(options);
+    },
+    remove(options) {
+      if (instance) instance.remove(options);
+    },
+    component: instance,
+    destroy() {
+      if (instance) instance.closeAll();
+      setTimeout(() => {
+        if (div.parentNode) div.parentNode.removeChild(div);
+      }, 500);
     }
-}
+  };
+};
 
-export default  MessageGroup;
+export default MessageGroup;

package/src/components/modal/confirm.js

@@ -1,161 +1,114 @@
 /**
- * Created by admin on 2017/3/30.
+ * confirm.js - 适配 Vue 2.7 runtime-only
  */
-import Modal from './modal.vue'
-import VButton from '../button'
-import Vue from 'vue'
-
-import { camelcaseToHyphen } from '../../utils/util'
+import Vue from 'vue';
+import Modal from './modal.vue';
+import VButton from '../button';
+import { camelcaseToHyphen } from '../../utils/util';
 
 const prefixCls = 'dpzvc-modal';
 
-Modal.newInstance = properties =>{
-
-    let _props = properties || {};
-
-    let props = '';
-
-    Object.keys(_props).forEach( prop =>{
-
-        props += ' :'+camelcaseToHyphen(prop) + '=' + prop
-    })
-
-    const div = document.createElement('div');
-
-    document.body.appendChild(div);
-
-    const modal = new Vue({
-        el:div,
-        template:`<Modal ${props} v-model="visible" :width="width" >
-                        <div class="${prefixCls}-header-inner  ellipse-fir"  v-html="title" slot="header"></div>
-                        <div class="${prefixCls}-body-inner" v-html="body" slot="body"></div>
-                        <template slot="footer">
-                            <v-button type="primary" :radius="false" @click="cancle"  v-if="showCancle">{{cancleText}}</v-button>
-                             <v-button type="normal" :radius="false" @click="ok" :loading="buttonLoading">{{okText}}</v-button>
-                        </template>
-                    </Modal>`,
-        components:{
-            Modal,
-            VButton
-        },
-        data:Object.assign(_props,{
-            visible:false,
-            width:'70%',
-            body:'',
-            title:'',
-            okText:'确定',
-            cancleText:'取消',
-            loading:false,
-            buttonLoading:false,
-            showCancle:true,
-            showHead:true,
-            onOk:function(){},
-            onCancle:function(){},
-            onRemove:function(){}
-        }),
-        methods:{
-            cancle(){
-                this.$children[0].visible = false;
-                this.onCancle();
-                this.remove()
-
-            },
-            ok(){
-                console.log('asd')
-                if (this.loading) {
-                    this.buttonLoading = true;
-                    this.$children[0].buttonLoading = true;
-                } else {
-                    this.visible = false;
-                    this.remove();
-                }
-
-                this.onOk()
-            },
-            remove(){
-                this.$children[0].visible = false;
-                setTimeout(()=>{
-                    this.destroy();
-                },300)
-            },
-            destroy(){
-
-                this.$destroy();
-                document.body.removeChild(this.$el);
-                this.onRemove()
-            },
-
-
-        },
-    }).$children[0];
-
-
-
-    return {
-
-        show(props){
-
-
-
-            // if ('width' in props) {
-            //     modal.$parent.width = props.width
-            // }
-            //
-            // if ('title' in props) {
-            //     modal.$parent.title = props.title
-            // }
-            //
-            // if ('showHead' in props) {
-            //     modal.$parent.showHead = props.showHead
-            // }
-            //
-            // if ('okText' in props) {
-            //     modal.$parent.okText = props.okText
-            // }
-            //
-            // if ('cancleText' in props) {
-            //     modal.$parent.cancleText = props.cancleText
-            // }
-            //
-            //
-            // if ('onCancle' in props) {
-            //     modal.$parent.onCancle = props.onCancle
-            // }
-            //
-            // if ('onOk' in props) {
-            //     modal.$parent.onOk = props.onOk
-            // }
-            //
-            // if ('loading' in props) {
-            //     modal.$parent.loading = props.loading
-            // }
-            //
-            // if ('body' in props) {
-            //     modal.$parent.body = props.body
-            // }
-
-            Object.keys(props).forEach((item)=>{
-                modal.$parent[item] = props[item]
-            })
-
-            modal.$parent.showCancle = props.showCancle;
-            modal.$parent.onRemove = props.onRemove;
-            modal.visible = true;
-
-
-        },
-        remove () {
-
-            modal.visible = false;
-            modal.$parent.buttonLoading = false;
-            modal.$parent.remove();
-
+Modal.newInstance = function(properties = {}) {
+  // 创建一个新的 Vue 构造函数
+  const ModalConstructor = Vue.extend({
+    components: { Modal, VButton },
+    data() {
+      return Object.assign({
+        visible: false,
+        width: '70%',
+        body: '',
+        title: '',
+        okText: '确定',
+        cancleText: '取消',
+        loading: false,
+        buttonLoading: false,
+        showCancle: true,
+        showHead: true,
+        onOk: () => {},
+        onCancle: () => {},
+        onRemove: () => {}
+      }, properties);
+    },
+    render(h) {
+      const footer = [
+        this.showCancle
+          ? h('v-button', { 
+              props: { type: 'primary', radius: false }, 
+              on: { click: this.cancle } 
+            }, this.cancleText)
+          : null,
+        h('v-button', { 
+          props: { type: 'normal', radius: false, loading: this.buttonLoading }, 
+          on: { click: this.ok } 
+        }, this.okText)
+      ];
+
+      return h(Modal, {
+        props: {
+          value: this.visible,
+          width: this.width,
+          showHead: this.showHead,
+          footerHide: false
         },
-        component:modal
-
+        on: {
+          'on-ok': this.ok,
+          'on-cancle': this.cancle
+        }
+      }, [
+        h('div', { slot: 'header', domProps: { innerHTML: this.title }, class: `${prefixCls}-header-inner ellipse-fir` }),
+        h('div', { slot: 'body', domProps: { innerHTML: this.body }, class: `${prefixCls}-body-inner` }),
+        h('template', { slot: 'footer' }, footer)
+      ]);
+    },
+    methods: {
+      cancle() {
+        this.visible = false;
+        this.onCancle();
+        this.remove();
+      },
+      ok() {
+        if (this.loading) {
+          this.buttonLoading = true;
+        } else {
+          this.visible = false;
+          this.remove();
+        }
+        this.onOk();
+      },
+      remove() {
+        this.visible = false;
+        setTimeout(() => this.destroy(), 300);
+      },
+      destroy() {
+        this.$destroy();
+        if (this.$el && this.$el.parentNode) {
+          this.$el.parentNode.removeChild(this.$el);
+        }
+        this.onRemove();
+      }
     }
-    };
-
-
+  });
+
+  // 实例化并挂载到 DOM
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const instance = new ModalConstructor().$mount(div);
+
+  return {
+    show(props = {}) {
+      Object.keys(props).forEach(key => {
+        if (key in instance) {
+          instance[key] = props[key];
+        }
+      });
+      instance.visible = true;
+    },
+    remove() {
+      instance.remove();
+    },
+    component: instance
+  };
+};
+
+export default Modal;
 
-export default  Modal