images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2025-01-10 08:09:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

解决Vue.Draggable在Vue新版3.2.32上运行报错“Cannot set properties of null (setting '__draggable_context')”的问题。

Browse Source
This commit is contained in:
vdpAdmin 2022-05-13 14:59:19 +08:00
parent 18870a2d95
commit b9e861d8f7
9 changed files with 78 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
lib/vuedraggable/dist/vuedraggable.common.js vendored
View File

@ -1774,7 +1774,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) { if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
return document.currentScript return document.currentScript
} }
// IE 8-10 support script readyState // IE 8-10 support script readyState
// IE 11+ & Firefox support stack trace // IE 11+ & Firefox support stack trace
try { try {
@ -1792,24 +1792,24 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
inlineScriptSourceRegExp, inlineScriptSourceRegExp,
inlineScriptSource, inlineScriptSource,
scripts = document.getElementsByTagName('script'); // Live NodeList collection scripts = document.getElementsByTagName('script'); // Live NodeList collection
if (scriptLocation === currentLocation) { if (scriptLocation === currentLocation) {
pageSource = document.documentElement.outerHTML; pageSource = document.documentElement.outerHTML;
inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i'); inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim(); inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
} }
for (var i = 0; i < scripts.length; i++) { for (var i = 0; i < scripts.length; i++) {
// If ready state is interactive, return the script tag // If ready state is interactive, return the script tag
if (scripts[i].readyState === 'interactive') { if (scripts[i].readyState === 'interactive') {
return scripts[i]; return scripts[i];
} }
// If src matches, return the script tag // If src matches, return the script tag
if (scripts[i].src === scriptLocation) { if (scripts[i].src === scriptLocation) {
return scripts[i]; return scripts[i];
} }
// If inline source matches, return the script tag // If inline source matches, return the script tag
if ( if (
scriptLocation === currentLocation && scriptLocation === currentLocation &&
@ -1819,7 +1819,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
return scripts[i]; return scripts[i];
} }
} }
// If no match, return null // If no match, return null
return null; return null;
} }
@ -4259,7 +4259,7 @@ function insertNodeAt(fatherNode, node, position) {
// EXTERNAL MODULE: ./src/util/console.js // EXTERNAL MODULE: ./src/util/console.js
var console = __webpack_require__("dbf1"); var util_console = __webpack_require__("dbf1");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
var es_array_reduce = __webpack_require__("13d5"); var es_array_reduce = __webpack_require__("13d5");
@ -4460,9 +4460,15 @@ function _createClass(Constructor, protoProps, staticProps) {
var getHtmlElementFromNode = function getHtmlElementFromNode(_ref) { //const getHtmlElementFromNode = ({ el }) => el;
var el = _ref.el; var getHtmlElementFromNode = function getHtmlElementFromNode(node) {
return el; var el = node.el || Array.isArray(node.children) && node.children[0].el.parentNode;
if (!el) {
console.error("使用 transition-group , 需要在slot中template内至少2层html标签");
}
return el || {};
}; };
var addContext = function addContext(domElement, context) { var addContext = function addContext(domElement, context) {
@ -4474,13 +4480,13 @@ var getContext = function getContext(domElement) {
}; };
var componentStructure_ComponentStructure = /*#__PURE__*/function () { var componentStructure_ComponentStructure = /*#__PURE__*/function () {
function ComponentStructure(_ref2) { function ComponentStructure(_ref) {
var _ref2$nodes = _ref2.nodes, var _ref$nodes = _ref.nodes,
header = _ref2$nodes.header, header = _ref$nodes.header,
defaultNodes = _ref2$nodes.default, defaultNodes = _ref$nodes.default,
footer = _ref2$nodes.footer, footer = _ref$nodes.footer,
root = _ref2.root, root = _ref.root,
realList = _ref2.realList; realList = _ref.realList;
_classCallCheck(this, ComponentStructure); _classCallCheck(this, ComponentStructure);
@ -4783,7 +4789,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
}, },
created: function created() { created: function created() {
if (this.list !== null && this.modelValue !== null) { if (this.list !== null && this.modelValue !== null) {
console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another."); util_console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
} }
}, },
mounted: function mounted() { mounted: function mounted() {
@ -4884,6 +4890,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
spliceList: function spliceList() { spliceList: function spliceList() {
var _arguments = arguments; var _arguments = arguments;
// @ts-ignore
var spliceList = function spliceList(list) { var spliceList = function spliceList(list) {
return list.splice.apply(list, _toConsumableArray(_arguments)); return list.splice.apply(list, _toConsumableArray(_arguments));
}; };
@ -4937,7 +4944,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
} }
removeNode(evt.item); removeNode(evt.item);
var newIndex = this.getVmIndexFromDomIndex(evt.newIndex); var newIndex = this.getVmIndexFromDomIndex(evt.newIndex); // @ts-ignore
this.spliceList(newIndex, 0, element); this.spliceList(newIndex, 0, element);
var added = { var added = {
element: element, element: element,
@ -4958,7 +4966,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
var _this$context = this.context, var _this$context = this.context,
oldIndex = _this$context.index, oldIndex = _this$context.index,
element = _this$context.element; element = _this$context.element; // @ts-ignore
this.spliceList(oldIndex, 1); this.spliceList(oldIndex, 1);
var removed = { var removed = {
element: element, element: element,
@ -5162,4 +5171,4 @@ module.exports = NATIVE_SYMBOL
/***/ }) /***/ })
/******/ })["default"]; /******/ })["default"];
//# sourceMappingURL=vuedraggable.common.js.map //# sourceMappingURL=vuedraggable.common.js.map

2
lib/vuedraggable/dist/vuedraggable.common.js.map vendored
View File

File diff suppressed because one or more lines are too long

51
lib/vuedraggable/dist/vuedraggable.umd.js vendored
View File

@ -1783,7 +1783,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) { if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
return document.currentScript return document.currentScript
} }
// IE 8-10 support script readyState // IE 8-10 support script readyState
// IE 11+ & Firefox support stack trace // IE 11+ & Firefox support stack trace
try { try {
@ -1801,24 +1801,24 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
inlineScriptSourceRegExp, inlineScriptSourceRegExp,
inlineScriptSource, inlineScriptSource,
scripts = document.getElementsByTagName('script'); // Live NodeList collection scripts = document.getElementsByTagName('script'); // Live NodeList collection
if (scriptLocation === currentLocation) { if (scriptLocation === currentLocation) {
pageSource = document.documentElement.outerHTML; pageSource = document.documentElement.outerHTML;
inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i'); inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim(); inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
} }
for (var i = 0; i < scripts.length; i++) { for (var i = 0; i < scripts.length; i++) {
// If ready state is interactive, return the script tag // If ready state is interactive, return the script tag
if (scripts[i].readyState === 'interactive') { if (scripts[i].readyState === 'interactive') {
return scripts[i]; return scripts[i];
} }
// If src matches, return the script tag // If src matches, return the script tag
if (scripts[i].src === scriptLocation) { if (scripts[i].src === scriptLocation) {
return scripts[i]; return scripts[i];
} }
// If inline source matches, return the script tag // If inline source matches, return the script tag
if ( if (
scriptLocation === currentLocation && scriptLocation === currentLocation &&
@ -1828,7 +1828,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
return scripts[i]; return scripts[i];
} }
} }
// If no match, return null // If no match, return null
return null; return null;
} }
@ -4268,7 +4268,7 @@ function insertNodeAt(fatherNode, node, position) {
// EXTERNAL MODULE: ./src/util/console.js // EXTERNAL MODULE: ./src/util/console.js
var console = __webpack_require__("dbf1"); var util_console = __webpack_require__("dbf1");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
var es_array_reduce = __webpack_require__("13d5"); var es_array_reduce = __webpack_require__("13d5");
@ -4469,9 +4469,15 @@ function _createClass(Constructor, protoProps, staticProps) {
var getHtmlElementFromNode = function getHtmlElementFromNode(_ref) { //const getHtmlElementFromNode = ({ el }) => el;
var el = _ref.el; var getHtmlElementFromNode = function getHtmlElementFromNode(node) {
return el; var el = node.el || Array.isArray(node.children) && node.children[0].el.parentNode;
if (!el) {
console.error("使用 transition-group , 需要在slot中template内至少2层html标签");
}
return el || {};
}; };
var addContext = function addContext(domElement, context) { var addContext = function addContext(domElement, context) {
@ -4483,13 +4489,13 @@ var getContext = function getContext(domElement) {
}; };
var componentStructure_ComponentStructure = /*#__PURE__*/function () { var componentStructure_ComponentStructure = /*#__PURE__*/function () {
function ComponentStructure(_ref2) { function ComponentStructure(_ref) {
var _ref2$nodes = _ref2.nodes, var _ref$nodes = _ref.nodes,
header = _ref2$nodes.header, header = _ref$nodes.header,
defaultNodes = _ref2$nodes.default, defaultNodes = _ref$nodes.default,
footer = _ref2$nodes.footer, footer = _ref$nodes.footer,
root = _ref2.root, root = _ref.root,
realList = _ref2.realList; realList = _ref.realList;
_classCallCheck(this, ComponentStructure); _classCallCheck(this, ComponentStructure);
@ -4792,7 +4798,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
}, },
created: function created() { created: function created() {
if (this.list !== null && this.modelValue !== null) { if (this.list !== null && this.modelValue !== null) {
console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another."); util_console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
} }
}, },
mounted: function mounted() { mounted: function mounted() {
@ -4893,6 +4899,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
spliceList: function spliceList() { spliceList: function spliceList() {
var _arguments = arguments; var _arguments = arguments;
// @ts-ignore
var spliceList = function spliceList(list) { var spliceList = function spliceList(list) {
return list.splice.apply(list, _toConsumableArray(_arguments)); return list.splice.apply(list, _toConsumableArray(_arguments));
}; };
@ -4946,7 +4953,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
} }
removeNode(evt.item); removeNode(evt.item);
var newIndex = this.getVmIndexFromDomIndex(evt.newIndex); var newIndex = this.getVmIndexFromDomIndex(evt.newIndex); // @ts-ignore
this.spliceList(newIndex, 0, element); this.spliceList(newIndex, 0, element);
var added = { var added = {
element: element, element: element,
@ -4967,7 +4975,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
var _this$context = this.context, var _this$context = this.context,
oldIndex = _this$context.index, oldIndex = _this$context.index,
element = _this$context.element; element = _this$context.element; // @ts-ignore
this.spliceList(oldIndex, 1); this.spliceList(oldIndex, 1);
var removed = { var removed = {
element: element, element: element,
@ -5172,4 +5181,4 @@ module.exports = NATIVE_SYMBOL
/******/ })["default"]; /******/ })["default"];
}); });
//# sourceMappingURL=vuedraggable.umd.js.map //# sourceMappingURL=vuedraggable.umd.js.map

2
lib/vuedraggable/dist/vuedraggable.umd.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
lib/vuedraggable/dist/vuedraggable.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
lib/vuedraggable/dist/vuedraggable.umd.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -18,7 +18,7 @@
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"sortablejs": "1.14.0", "sortablejs": "1.14.0",
"vue": "3.2.26", "vue": "^3.2.32",
"vue3-quill": "^0.2.6" "vue3-quill": "^0.2.6"
}, },
"devDependencies": { "devDependencies": {

18
src/components/form-designer/form-widget/index.vue
View File

@ -13,14 +13,16 @@
tag="transition-group" :component-data="{name: 'fade'}" tag="transition-group" :component-data="{name: 'fade'}"
handle=".drag-handler" @end="onDragEnd" @add="onDragAdd" @update="onDragUpdate" :move="checkMove"> handle=".drag-handler" @end="onDragEnd" @add="onDragAdd" @update="onDragUpdate" :move="checkMove">
<template #item="{ element: widget, index }"> <template #item="{ element: widget, index }">
<template v-if="'container' === widget.category"> <div class="transition-group-el">
<component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList" <template v-if="'container' === widget.category">
:index-of-parent-list="index" :parent-widget="null"></component> <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
</template> :index-of-parent-list="index" :parent-widget="null"></component>
<template v-else> </template>
<component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList" <template v-else>
:index-of-parent-list="index" :parent-widget="null" :design-state="true"></component> <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
</template> :index-of-parent-list="index" :parent-widget="null" :design-state="true"></component>
</template>
</div>
</template> </template>
</draggable> </draggable>
</div> </div>

4
src/utils/code-generator.js
View File

@ -16,9 +16,9 @@ export const generateCode = function(formJson, codeType= 'vue') {
<body> <body>
<div id="app"> <div id="app">
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"> <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
</v-form-render> </v-form-render>
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
</div> </div>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script>