2267 lines
72 KiB
JavaScript
2267 lines
72 KiB
JavaScript
/*
|
||
* XmlDigitalTeaching v0.0.1
|
||
* Copyright ©Tue May 27 2025 20:10:29 GMT+0800 (中国标准时间) smile
|
||
* Released under the ISC License.
|
||
*/
|
||
import Vue from 'vue';
|
||
import crypto from 'crypto';
|
||
|
||
const rnds8Pool = new Uint8Array(256); // # of random values to pre-allocate
|
||
|
||
let poolPtr = rnds8Pool.length;
|
||
function rng() {
|
||
if (poolPtr > rnds8Pool.length - 16) {
|
||
crypto.randomFillSync(rnds8Pool);
|
||
poolPtr = 0;
|
||
}
|
||
return rnds8Pool.slice(poolPtr, poolPtr += 16);
|
||
}
|
||
|
||
var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
|
||
|
||
function validate(uuid) {
|
||
return typeof uuid === 'string' && REGEX.test(uuid);
|
||
}
|
||
|
||
/**
|
||
* Convert array of 16 byte values to UUID string format of the form:
|
||
* XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
|
||
*/
|
||
|
||
const byteToHex = [];
|
||
for (let i = 0; i < 256; ++i) {
|
||
byteToHex.push((i + 0x100).toString(16).substr(1));
|
||
}
|
||
function stringify(arr, offset = 0) {
|
||
// Note: Be careful editing this code! It's been tuned for performance
|
||
// and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
|
||
const uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one
|
||
// of the following:
|
||
// - One or more input array values don't map to a hex octet (leading to
|
||
// "undefined" in the uuid)
|
||
// - Invalid input values for the RFC `version` or `variant` fields
|
||
|
||
if (!validate(uuid)) {
|
||
throw TypeError('Stringified UUID is invalid');
|
||
}
|
||
return uuid;
|
||
}
|
||
|
||
function v4(options, buf, offset) {
|
||
options = options || {};
|
||
const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
|
||
|
||
rnds[6] = rnds[6] & 0x0f | 0x40;
|
||
rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
|
||
|
||
if (buf) {
|
||
offset = offset || 0;
|
||
for (let i = 0; i < 16; ++i) {
|
||
buf[offset + i] = rnds[i];
|
||
}
|
||
return buf;
|
||
}
|
||
return stringify(rnds);
|
||
}
|
||
|
||
var defaultLang = {
|
||
el: {
|
||
colorpicker: {
|
||
confirm: '确定',
|
||
clear: '清空'
|
||
},
|
||
datepicker: {
|
||
now: '此刻',
|
||
today: '今天',
|
||
cancel: '取消',
|
||
clear: '清空',
|
||
confirm: '确定',
|
||
selectDate: '选择日期',
|
||
selectTime: '选择时间',
|
||
startDate: '开始日期',
|
||
startTime: '开始时间',
|
||
endDate: '结束日期',
|
||
endTime: '结束时间',
|
||
prevYear: '前一年',
|
||
nextYear: '后一年',
|
||
prevMonth: '上个月',
|
||
nextMonth: '下个月',
|
||
year: '年',
|
||
month1: '1 月',
|
||
month2: '2 月',
|
||
month3: '3 月',
|
||
month4: '4 月',
|
||
month5: '5 月',
|
||
month6: '6 月',
|
||
month7: '7 月',
|
||
month8: '8 月',
|
||
month9: '9 月',
|
||
month10: '10 月',
|
||
month11: '11 月',
|
||
month12: '12 月',
|
||
// week: '周次',
|
||
weeks: {
|
||
sun: '日',
|
||
mon: '一',
|
||
tue: '二',
|
||
wed: '三',
|
||
thu: '四',
|
||
fri: '五',
|
||
sat: '六'
|
||
},
|
||
months: {
|
||
jan: '一月',
|
||
feb: '二月',
|
||
mar: '三月',
|
||
apr: '四月',
|
||
may: '五月',
|
||
jun: '六月',
|
||
jul: '七月',
|
||
aug: '八月',
|
||
sep: '九月',
|
||
oct: '十月',
|
||
nov: '十一月',
|
||
dec: '十二月'
|
||
}
|
||
},
|
||
select: {
|
||
loading: '加载中',
|
||
noMatch: '无匹配数据',
|
||
noData: '无数据',
|
||
placeholder: '请选择'
|
||
},
|
||
cascader: {
|
||
noMatch: '无匹配数据',
|
||
loading: '加载中',
|
||
placeholder: '请选择',
|
||
noData: '暂无数据'
|
||
},
|
||
pagination: {
|
||
goto: '前往',
|
||
pagesize: '条/页',
|
||
total: '共 {total} 条',
|
||
pageClassifier: '页'
|
||
},
|
||
messagebox: {
|
||
title: '提示',
|
||
confirm: '确定',
|
||
cancel: '取消',
|
||
error: '输入的数据不合法!'
|
||
},
|
||
upload: {
|
||
deleteTip: '按 delete 键可删除',
|
||
delete: '删除',
|
||
preview: '查看图片',
|
||
continue: '继续上传'
|
||
},
|
||
table: {
|
||
emptyText: '暂无数据',
|
||
confirmFilter: '筛选',
|
||
resetFilter: '重置',
|
||
clearFilter: '全部',
|
||
sumText: '合计'
|
||
},
|
||
tree: {
|
||
emptyText: '暂无数据'
|
||
},
|
||
transfer: {
|
||
noMatch: '无匹配数据',
|
||
noData: '无数据',
|
||
titles: ['列表 1', '列表 2'],
|
||
filterPlaceholder: '请输入搜索内容',
|
||
noCheckedFormat: '共 {total} 项',
|
||
hasCheckedFormat: '已选 {checked}/{total} 项'
|
||
},
|
||
image: {
|
||
error: '加载失败'
|
||
},
|
||
pageHeader: {
|
||
title: '返回'
|
||
},
|
||
popconfirm: {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消'
|
||
},
|
||
empty: {
|
||
description: '暂无数据'
|
||
}
|
||
}
|
||
};
|
||
|
||
var isMergeableObject = function isMergeableObject(value) {
|
||
return isNonNullObject(value) && !isSpecial(value);
|
||
};
|
||
function isNonNullObject(value) {
|
||
return !!value && typeof value === 'object';
|
||
}
|
||
function isSpecial(value) {
|
||
var stringValue = Object.prototype.toString.call(value);
|
||
return stringValue === '[object RegExp]' || stringValue === '[object Date]' || isReactElement(value);
|
||
}
|
||
|
||
// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
|
||
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
|
||
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
|
||
function isReactElement(value) {
|
||
return value.$$typeof === REACT_ELEMENT_TYPE;
|
||
}
|
||
function emptyTarget(val) {
|
||
return Array.isArray(val) ? [] : {};
|
||
}
|
||
function cloneIfNecessary(value, optionsArgument) {
|
||
var clone = optionsArgument && optionsArgument.clone === true;
|
||
return clone && isMergeableObject(value) ? deepmerge(emptyTarget(value), value, optionsArgument) : value;
|
||
}
|
||
function defaultArrayMerge(target, source, optionsArgument) {
|
||
var destination = target.slice();
|
||
source.forEach(function (e, i) {
|
||
if (typeof destination[i] === 'undefined') {
|
||
destination[i] = cloneIfNecessary(e, optionsArgument);
|
||
} else if (isMergeableObject(e)) {
|
||
destination[i] = deepmerge(target[i], e, optionsArgument);
|
||
} else if (target.indexOf(e) === -1) {
|
||
destination.push(cloneIfNecessary(e, optionsArgument));
|
||
}
|
||
});
|
||
return destination;
|
||
}
|
||
function mergeObject(target, source, optionsArgument) {
|
||
var destination = {};
|
||
if (isMergeableObject(target)) {
|
||
Object.keys(target).forEach(function (key) {
|
||
destination[key] = cloneIfNecessary(target[key], optionsArgument);
|
||
});
|
||
}
|
||
Object.keys(source).forEach(function (key) {
|
||
if (!isMergeableObject(source[key]) || !target[key]) {
|
||
destination[key] = cloneIfNecessary(source[key], optionsArgument);
|
||
} else {
|
||
destination[key] = deepmerge(target[key], source[key], optionsArgument);
|
||
}
|
||
});
|
||
return destination;
|
||
}
|
||
function deepmerge(target, source, optionsArgument) {
|
||
var sourceIsArray = Array.isArray(source);
|
||
var targetIsArray = Array.isArray(target);
|
||
var options = optionsArgument || {
|
||
arrayMerge: defaultArrayMerge
|
||
};
|
||
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
|
||
if (!sourceAndTargetTypesMatch) {
|
||
return cloneIfNecessary(source, optionsArgument);
|
||
} else if (sourceIsArray) {
|
||
var arrayMerge = options.arrayMerge || defaultArrayMerge;
|
||
return arrayMerge(target, source, optionsArgument);
|
||
} else {
|
||
return mergeObject(target, source, optionsArgument);
|
||
}
|
||
}
|
||
deepmerge.all = function deepmergeAll(array, optionsArgument) {
|
||
if (!Array.isArray(array) || array.length < 2) {
|
||
throw new Error('first argument should be an array with at least two elements');
|
||
}
|
||
|
||
// we are sure there are at least 2 values, so it is safe to have no initial value
|
||
return array.reduce(function (prev, next) {
|
||
return deepmerge(prev, next, optionsArgument);
|
||
});
|
||
};
|
||
var deepmerge_1 = deepmerge;
|
||
|
||
function isString(obj) {
|
||
return Object.prototype.toString.call(obj) === '[object String]';
|
||
}
|
||
function isHtmlElement(node) {
|
||
return node && node.nodeType === Node.ELEMENT_NODE;
|
||
}
|
||
if (typeof /./ !== 'function' && typeof Int8Array !== 'object' && (Vue.prototype.$isServer || typeof document.childNodes !== 'function')) ;
|
||
|
||
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
||
function hasOwn(obj, key) {
|
||
return hasOwnProperty.call(obj, key);
|
||
}
|
||
const isFirefox = function () {
|
||
return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);
|
||
};
|
||
|
||
const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
|
||
/**
|
||
* String format template
|
||
* - Inspired:
|
||
* https://github.com/Matt-Esch/string-template/index.js
|
||
*/
|
||
function Format (Vue) {
|
||
/**
|
||
* template
|
||
*
|
||
* @param {String} string
|
||
* @param {Array} ...args
|
||
* @return {String}
|
||
*/
|
||
|
||
function template(string, ...args) {
|
||
if (args.length === 1 && typeof args[0] === 'object') {
|
||
args = args[0];
|
||
}
|
||
if (!args || !args.hasOwnProperty) {
|
||
args = {};
|
||
}
|
||
return string.replace(RE_NARGS, (match, prefix, i, index) => {
|
||
let result;
|
||
if (string[index - 1] === '{' && string[index + match.length] === '}') {
|
||
return i;
|
||
} else {
|
||
result = hasOwn(args, i) ? args[i] : null;
|
||
if (result === null || result === undefined) {
|
||
return '';
|
||
}
|
||
return result;
|
||
}
|
||
});
|
||
}
|
||
return template;
|
||
}
|
||
|
||
const format = Format();
|
||
let lang = defaultLang;
|
||
let merged = false;
|
||
let i18nHandler = function () {
|
||
const vuei18n = Object.getPrototypeOf(this || Vue).$t;
|
||
if (typeof vuei18n === 'function' && !!Vue.locale) {
|
||
if (!merged) {
|
||
merged = true;
|
||
Vue.locale(Vue.config.lang, deepmerge_1(lang, Vue.locale(Vue.config.lang) || {}, {
|
||
clone: true
|
||
}));
|
||
}
|
||
return vuei18n.apply(this, arguments);
|
||
}
|
||
};
|
||
const t = function (path, options) {
|
||
let value = i18nHandler.apply(this, arguments);
|
||
if (value !== null && value !== undefined) return value;
|
||
const array = path.split('.');
|
||
let current = lang;
|
||
for (let i = 0, j = array.length; i < j; i++) {
|
||
const property = array[i];
|
||
value = current[property];
|
||
if (i === j - 1) return format(value, options);
|
||
if (!value) return '';
|
||
current = value;
|
||
}
|
||
return '';
|
||
};
|
||
|
||
var Locale = {
|
||
methods: {
|
||
t(...args) {
|
||
return t.apply(this, args);
|
||
}
|
||
}
|
||
};
|
||
|
||
/* istanbul ignore next */
|
||
const isServer = Vue.prototype.$isServer;
|
||
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
|
||
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
|
||
const ieVersion = isServer ? 0 : Number(document.documentMode);
|
||
|
||
/* istanbul ignore next */
|
||
const trim = function (string) {
|
||
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||
};
|
||
/* istanbul ignore next */
|
||
const camelCase = function (name) {
|
||
return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
|
||
return offset ? letter.toUpperCase() : letter;
|
||
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
|
||
};
|
||
|
||
/* istanbul ignore next */
|
||
const on = function () {
|
||
if (!isServer && document.addEventListener) {
|
||
return function (element, event, handler) {
|
||
if (element && event && handler) {
|
||
element.addEventListener(event, handler, false);
|
||
}
|
||
};
|
||
} else {
|
||
return function (element, event, handler) {
|
||
if (element && event && handler) {
|
||
element.attachEvent('on' + event, handler);
|
||
}
|
||
};
|
||
}
|
||
}();
|
||
|
||
/* istanbul ignore next */
|
||
const off = function () {
|
||
if (!isServer && document.removeEventListener) {
|
||
return function (element, event, handler) {
|
||
if (element && event) {
|
||
element.removeEventListener(event, handler, false);
|
||
}
|
||
};
|
||
} else {
|
||
return function (element, event, handler) {
|
||
if (element && event) {
|
||
element.detachEvent('on' + event, handler);
|
||
}
|
||
};
|
||
}
|
||
}();
|
||
|
||
/* istanbul ignore next */
|
||
function hasClass(el, cls) {
|
||
if (!el || !cls) return false;
|
||
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||
if (el.classList) {
|
||
return el.classList.contains(cls);
|
||
} else {
|
||
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||
}
|
||
}
|
||
|
||
/* istanbul ignore next */
|
||
function addClass(el, cls) {
|
||
if (!el) return;
|
||
var curClass = el.className;
|
||
var classes = (cls || '').split(' ');
|
||
for (var i = 0, j = classes.length; i < j; i++) {
|
||
var clsName = classes[i];
|
||
if (!clsName) continue;
|
||
if (el.classList) {
|
||
el.classList.add(clsName);
|
||
} else if (!hasClass(el, clsName)) {
|
||
curClass += ' ' + clsName;
|
||
}
|
||
}
|
||
if (!el.classList) {
|
||
el.setAttribute('class', curClass);
|
||
}
|
||
}
|
||
|
||
/* istanbul ignore next */
|
||
function removeClass(el, cls) {
|
||
if (!el || !cls) return;
|
||
var classes = cls.split(' ');
|
||
var curClass = ' ' + el.className + ' ';
|
||
for (var i = 0, j = classes.length; i < j; i++) {
|
||
var clsName = classes[i];
|
||
if (!clsName) continue;
|
||
if (el.classList) {
|
||
el.classList.remove(clsName);
|
||
} else if (hasClass(el, clsName)) {
|
||
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||
}
|
||
}
|
||
if (!el.classList) {
|
||
el.setAttribute('class', trim(curClass));
|
||
}
|
||
}
|
||
|
||
/* istanbul ignore next */
|
||
const getStyle = ieVersion < 9 ? function (element, styleName) {
|
||
if (isServer) return;
|
||
if (!element || !styleName) return null;
|
||
styleName = camelCase(styleName);
|
||
if (styleName === 'float') {
|
||
styleName = 'styleFloat';
|
||
}
|
||
try {
|
||
switch (styleName) {
|
||
case 'opacity':
|
||
try {
|
||
return element.filters.item('alpha').opacity / 100;
|
||
} catch (e) {
|
||
return 1.0;
|
||
}
|
||
default:
|
||
return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null;
|
||
}
|
||
} catch (e) {
|
||
return element.style[styleName];
|
||
}
|
||
} : function (element, styleName) {
|
||
if (isServer) return;
|
||
if (!element || !styleName) return null;
|
||
styleName = camelCase(styleName);
|
||
if (styleName === 'float') {
|
||
styleName = 'cssFloat';
|
||
}
|
||
try {
|
||
var computed = document.defaultView.getComputedStyle(element, '');
|
||
return element.style[styleName] || computed ? computed[styleName] : null;
|
||
} catch (e) {
|
||
return element.style[styleName];
|
||
}
|
||
};
|
||
const isScroll = (el, vertical) => {
|
||
if (isServer) return;
|
||
const determinedDirection = vertical !== null && vertical !== undefined;
|
||
const overflow = determinedDirection ? vertical ? getStyle(el, 'overflow-y') : getStyle(el, 'overflow-x') : getStyle(el, 'overflow');
|
||
return overflow.match(/(scroll|auto|overlay)/);
|
||
};
|
||
const getScrollContainer = (el, vertical) => {
|
||
if (isServer) return;
|
||
let parent = el;
|
||
while (parent) {
|
||
if ([window, document, document.documentElement].includes(parent)) {
|
||
return window;
|
||
}
|
||
if (isScroll(parent, vertical)) {
|
||
return parent;
|
||
}
|
||
parent = parent.parentNode;
|
||
}
|
||
return parent;
|
||
};
|
||
const isInContainer = (el, container) => {
|
||
if (isServer || !el || !container) return false;
|
||
const elRect = el.getBoundingClientRect();
|
||
let containerRect;
|
||
if ([window, document, document.documentElement, null, undefined].includes(container)) {
|
||
containerRect = {
|
||
top: 0,
|
||
right: window.innerWidth,
|
||
bottom: window.innerHeight,
|
||
left: 0
|
||
};
|
||
} else {
|
||
containerRect = container.getBoundingClientRect();
|
||
}
|
||
return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
|
||
};
|
||
|
||
/* eslint-disable no-undefined,no-param-reassign,no-shadow */
|
||
|
||
/**
|
||
* Throttle execution of a function. Especially useful for rate limiting
|
||
* execution of handlers on events like resize and scroll.
|
||
*
|
||
* @param {Number} delay A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
|
||
* @param {Boolean} [noTrailing] Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds while the
|
||
* throttled-function is being called. If noTrailing is false or unspecified, callback will be executed one final time
|
||
* after the last throttled-function call. (After the throttled-function has not been called for `delay` milliseconds,
|
||
* the internal counter is reset)
|
||
* @param {Function} callback A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
|
||
* to `callback` when the throttled-function is executed.
|
||
* @param {Boolean} [debounceMode] If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is false (at end),
|
||
* schedule `callback` to execute after `delay` ms.
|
||
*
|
||
* @return {Function} A new, throttled, function.
|
||
*/
|
||
var throttle = function (delay, noTrailing, callback, debounceMode) {
|
||
// After wrapper has stopped being called, this timeout ensures that
|
||
// `callback` is executed at the proper times in `throttle` and `end`
|
||
// debounce modes.
|
||
var timeoutID;
|
||
|
||
// Keep track of the last time `callback` was executed.
|
||
var lastExec = 0;
|
||
|
||
// `noTrailing` defaults to falsy.
|
||
if (typeof noTrailing !== 'boolean') {
|
||
debounceMode = callback;
|
||
callback = noTrailing;
|
||
noTrailing = undefined;
|
||
}
|
||
|
||
// The `wrapper` function encapsulates all of the throttling / debouncing
|
||
// functionality and when executed will limit the rate at which `callback`
|
||
// is executed.
|
||
function wrapper() {
|
||
var self = this;
|
||
var elapsed = Number(new Date()) - lastExec;
|
||
var args = arguments;
|
||
|
||
// Execute `callback` and update the `lastExec` timestamp.
|
||
function exec() {
|
||
lastExec = Number(new Date());
|
||
callback.apply(self, args);
|
||
}
|
||
|
||
// If `debounceMode` is true (at begin) this is used to clear the flag
|
||
// to allow future `callback` executions.
|
||
function clear() {
|
||
timeoutID = undefined;
|
||
}
|
||
if (debounceMode && !timeoutID) {
|
||
// Since `wrapper` is being called for the first time and
|
||
// `debounceMode` is true (at begin), execute `callback`.
|
||
exec();
|
||
}
|
||
|
||
// Clear any existing timeout.
|
||
if (timeoutID) {
|
||
clearTimeout(timeoutID);
|
||
}
|
||
if (debounceMode === undefined && elapsed > delay) {
|
||
// In throttle mode, if `delay` time has been exceeded, execute
|
||
// `callback`.
|
||
exec();
|
||
} else if (noTrailing !== true) {
|
||
// In trailing throttle mode, since `delay` time has not been
|
||
// exceeded, schedule `callback` to execute `delay` ms after most
|
||
// recent execution.
|
||
//
|
||
// If `debounceMode` is true (at begin), schedule `clear` to execute
|
||
// after `delay` ms.
|
||
//
|
||
// If `debounceMode` is false (at end), schedule `callback` to
|
||
// execute after `delay` ms.
|
||
timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
|
||
}
|
||
}
|
||
|
||
// Return the wrapper function.
|
||
return wrapper;
|
||
};
|
||
|
||
//
|
||
const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
|
||
const ObjectFit = {
|
||
NONE: 'none',
|
||
CONTAIN: 'contain',
|
||
COVER: 'cover',
|
||
FILL: 'fill',
|
||
SCALE_DOWN: 'scale-down'
|
||
};
|
||
var script$1 = {
|
||
name: 'DesignPreviewImage',
|
||
mixins: [Locale],
|
||
inheritAttrs: false,
|
||
props: {
|
||
src: String,
|
||
fit: String,
|
||
lazy: Boolean,
|
||
mode: String,
|
||
scrollContainer: {},
|
||
previewSrcList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
imageList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
zIndex: {
|
||
type: Number,
|
||
default: 2000
|
||
},
|
||
currentIndex: {
|
||
type: Number,
|
||
default: -1
|
||
},
|
||
current: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
showTitle: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
title: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
contents: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
self: {
|
||
type: Object,
|
||
default: () => {
|
||
}
|
||
},
|
||
titlePosition: {
|
||
type: String,
|
||
default: 'under'
|
||
},
|
||
titleAlign: {
|
||
type: String,
|
||
default: 'left'
|
||
},
|
||
clickEffect: {
|
||
type: String,
|
||
default: 'dian-ji-fang-da'
|
||
},
|
||
width: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
pageType: {
|
||
type: String,
|
||
default: 'h5'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
error: false,
|
||
show: !this.lazy,
|
||
imageWidth: 0,
|
||
imageHeight: 0,
|
||
showViewer: false,
|
||
clientWidth: 0
|
||
};
|
||
},
|
||
computed: {
|
||
placeholderStyle() {
|
||
// console.log(this.clientWidth)
|
||
let offsetWidth = this.self?.offsetWidth || 400;
|
||
let offsetHeight = this.self?.offsetHeight || 600;
|
||
let width = this.width / 100 * this.clientWidth;
|
||
let height = width / offsetWidth * offsetHeight;
|
||
return {
|
||
width: width + 'px',
|
||
height: height + 'px'
|
||
};
|
||
},
|
||
imageStyle() {
|
||
const {
|
||
fit
|
||
} = this;
|
||
if (!this.$isServer && fit) {
|
||
return isSupportObjectFit() ? {
|
||
'object-fit': 'contain',
|
||
width: this.width + '% !important'
|
||
} : this.getImageStyle(fit);
|
||
}
|
||
return {
|
||
width: this.width + '% !important'
|
||
};
|
||
},
|
||
alignCenter() {
|
||
return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
|
||
},
|
||
preview() {
|
||
const {
|
||
previewSrcList
|
||
} = this;
|
||
return Array.isArray(previewSrcList) && previewSrcList.length > 0 && this.mode === 'preview' && (this.clickEffect === 'dian-ji-fang-da' || this.clickEffect === 'dian-ji-tiao-zhuan');
|
||
},
|
||
imageIndex() {
|
||
if (this.currentIndex !== -1) {
|
||
return this.currentIndex;
|
||
}
|
||
let previewIndex = 0;
|
||
const srcIndex = this.previewSrcList.indexOf(this.src);
|
||
if (srcIndex >= 0) {
|
||
previewIndex = srcIndex;
|
||
}
|
||
return previewIndex;
|
||
}
|
||
},
|
||
watch: {
|
||
src(val) {
|
||
this.show && this.loadImage();
|
||
},
|
||
show(val) {
|
||
val && this.loadImage();
|
||
},
|
||
title: {
|
||
handler(n, o) {
|
||
// console.log(n, o)
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
mounted() {
|
||
this.clientWidth = this.$refs.placeholder?.clientWidth;
|
||
if (this.lazy) {
|
||
this.addLazyLoadListener();
|
||
} else {
|
||
this.loadImage();
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.lazy && this.removeLazyLoadListener();
|
||
},
|
||
methods: {
|
||
loadImage() {
|
||
if (this.$isServer) return;
|
||
|
||
// reset status
|
||
this.loading = true;
|
||
this.error = false;
|
||
const img = new Image();
|
||
img.onload = e => this.handleLoad(e, img);
|
||
img.onerror = this.handleError.bind(this);
|
||
|
||
// bind html attrs
|
||
// so it can behave consistently
|
||
Object.keys(this.$attrs).forEach(key => {
|
||
const value = this.$attrs[key];
|
||
img.setAttribute(key, value);
|
||
});
|
||
img.src = this.src;
|
||
},
|
||
handleLoad(e, img) {
|
||
this.imageWidth = img.width;
|
||
this.imageHeight = img.height;
|
||
this.loading = false;
|
||
this.error = false;
|
||
},
|
||
handleError(e) {
|
||
this.loading = false;
|
||
this.error = true;
|
||
this.$emit('error', e);
|
||
},
|
||
handleLazyLoad() {
|
||
if (isInContainer(this.$el, this._scrollContainer)) {
|
||
this.show = true;
|
||
this.removeLazyLoadListener();
|
||
}
|
||
},
|
||
addLazyLoadListener() {
|
||
if (this.$isServer) return;
|
||
const {
|
||
scrollContainer
|
||
} = this;
|
||
let _scrollContainer = null;
|
||
if (isHtmlElement(scrollContainer)) {
|
||
_scrollContainer = scrollContainer;
|
||
} else if (isString(scrollContainer)) {
|
||
_scrollContainer = document.querySelector(scrollContainer);
|
||
} else {
|
||
_scrollContainer = getScrollContainer(this.$el);
|
||
}
|
||
if (_scrollContainer) {
|
||
this._scrollContainer = _scrollContainer;
|
||
this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
|
||
on(_scrollContainer, 'scroll', this._lazyLoadHandler);
|
||
this.handleLazyLoad();
|
||
}
|
||
},
|
||
removeLazyLoadListener() {
|
||
const {
|
||
_scrollContainer,
|
||
_lazyLoadHandler
|
||
} = this;
|
||
if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
|
||
off(_scrollContainer, 'scroll', _lazyLoadHandler);
|
||
this._scrollContainer = null;
|
||
this._lazyLoadHandler = null;
|
||
},
|
||
/**
|
||
* simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
|
||
*/
|
||
getImageStyle(fit) {
|
||
const {
|
||
imageWidth,
|
||
imageHeight
|
||
} = this;
|
||
const {
|
||
clientWidth: containerWidth,
|
||
clientHeight: containerHeight
|
||
} = this.$el;
|
||
if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
|
||
const imageAspectRatio = imageWidth / imageHeight;
|
||
const containerAspectRatio = containerWidth / containerHeight;
|
||
if (fit === ObjectFit.SCALE_DOWN) {
|
||
const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
|
||
fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
|
||
}
|
||
switch (fit) {
|
||
case ObjectFit.NONE:
|
||
return {
|
||
width: this.width + '% !important',
|
||
height: 'auto'
|
||
};
|
||
case ObjectFit.CONTAIN:
|
||
return imageAspectRatio < containerAspectRatio ? {
|
||
width: this.width + '% !important'
|
||
} : {
|
||
height: 'auto',
|
||
width: this.width + '% !important'
|
||
};
|
||
case ObjectFit.COVER:
|
||
return imageAspectRatio < containerAspectRatio ? {
|
||
width: this.width + '% !important'
|
||
} : {
|
||
width: 'auto',
|
||
width: this.width + '% !important'
|
||
};
|
||
default:
|
||
return {
|
||
width: this.width + '% !important'
|
||
};
|
||
}
|
||
},
|
||
clickHandler(isByTitle) {
|
||
// don't show viewer when preview is false
|
||
if (!this.preview) {
|
||
return;
|
||
}
|
||
if (this.clickEffect === 'dian-ji-fang-da') {
|
||
let imgList = [];
|
||
this.previewSrcList.map((item, index) => {
|
||
imgList.push({
|
||
url: item,
|
||
title: this.title[index],
|
||
description: this.contents[index]
|
||
});
|
||
});
|
||
this.$EventBus.$emit('learningStatistics', {
|
||
type: 'image',
|
||
info: this.imageList[this.current]
|
||
});
|
||
this.$hevueImgPreview({
|
||
multiple: true,
|
||
nowImgIndex: this.current,
|
||
imgList
|
||
});
|
||
}
|
||
if (isByTitle) {
|
||
this.$emit('onBottomTitleClick');
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
||
if (typeof shadowMode !== 'boolean') {
|
||
createInjectorSSR = createInjector;
|
||
createInjector = shadowMode;
|
||
shadowMode = false;
|
||
}
|
||
// Vue.extend constructor export interop.
|
||
const options = typeof script === 'function' ? script.options : script;
|
||
// render functions
|
||
if (template && template.render) {
|
||
options.render = template.render;
|
||
options.staticRenderFns = template.staticRenderFns;
|
||
options._compiled = true;
|
||
// functional template
|
||
if (isFunctionalTemplate) {
|
||
options.functional = true;
|
||
}
|
||
}
|
||
// scopedId
|
||
if (scopeId) {
|
||
options._scopeId = scopeId;
|
||
}
|
||
let hook;
|
||
if (moduleIdentifier) {
|
||
// server build
|
||
hook = function (context) {
|
||
// 2.3 injection
|
||
context = context ||
|
||
// cached call
|
||
this.$vnode && this.$vnode.ssrContext ||
|
||
// stateful
|
||
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
|
||
// 2.2 with runInNewContext: true
|
||
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
||
context = __VUE_SSR_CONTEXT__;
|
||
}
|
||
// inject component styles
|
||
if (style) {
|
||
style.call(this, createInjectorSSR(context));
|
||
}
|
||
// register component module identifier for async chunk inference
|
||
if (context && context._registeredComponents) {
|
||
context._registeredComponents.add(moduleIdentifier);
|
||
}
|
||
};
|
||
// used by ssr in case component is cached and beforeCreate
|
||
// never gets called
|
||
options._ssrRegister = hook;
|
||
} else if (style) {
|
||
hook = shadowMode ? function (context) {
|
||
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
||
} : function (context) {
|
||
style.call(this, createInjector(context));
|
||
};
|
||
}
|
||
if (hook) {
|
||
if (options.functional) {
|
||
// register for functional component in vue file
|
||
const originalRender = options.render;
|
||
options.render = function renderWithStyleInjection(h, context) {
|
||
hook.call(context);
|
||
return originalRender(h, context);
|
||
};
|
||
} else {
|
||
// inject component registration as beforeCreate hook
|
||
const existing = options.beforeCreate;
|
||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||
}
|
||
}
|
||
return script;
|
||
}
|
||
|
||
/* script */
|
||
const __vue_script__$1 = script$1;
|
||
/* template */
|
||
var __vue_render__$2 = function () {
|
||
var _vm = this;
|
||
var _h = _vm.$createElement;
|
||
var _c = _vm._self._c || _h;
|
||
return _c(
|
||
"div",
|
||
{
|
||
ref: "placeholder",
|
||
staticClass: "el-image",
|
||
staticStyle: { "{\n width": "100px" },
|
||
},
|
||
[
|
||
_vm.self && _vm.self.title && _vm.showTitle && _vm.titlePosition === "on"
|
||
? _c("div", {
|
||
staticClass: "xml-image-title image-title--lay image-title--on",
|
||
style: { textAlign: _vm.titleAlign || "left" },
|
||
domProps: { innerHTML: _vm._s(_vm.self.title) },
|
||
})
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.loading
|
||
? _vm._t("placeholder", function () {
|
||
return [
|
||
_c(
|
||
"div",
|
||
{
|
||
staticStyle: {
|
||
width: "100%",
|
||
display: "flex",
|
||
"justify-content": "center",
|
||
},
|
||
},
|
||
[
|
||
_c(
|
||
"div",
|
||
{
|
||
staticClass: "el-image__placeholder",
|
||
style: _vm.placeholderStyle,
|
||
},
|
||
[_c("i", { staticClass: "el-icon-loading" })]
|
||
),
|
||
]
|
||
),
|
||
]
|
||
})
|
||
: _c(
|
||
"img",
|
||
_vm._g(
|
||
_vm._b(
|
||
{
|
||
staticClass: "el-image__inner",
|
||
class: {
|
||
"el-image__inner--center": _vm.alignCenter,
|
||
"el-image__preview": _vm.preview,
|
||
},
|
||
style: _vm.imageStyle,
|
||
attrs: { src: _vm.src },
|
||
on: { click: _vm.clickHandler },
|
||
},
|
||
"img",
|
||
_vm.$attrs,
|
||
false
|
||
),
|
||
_vm.$listeners
|
||
)
|
||
),
|
||
_vm._v(" "),
|
||
_vm.self &&
|
||
_vm.self.title &&
|
||
_vm.showTitle &&
|
||
_vm.titlePosition === "bottom"
|
||
? _c("div", {
|
||
staticClass:
|
||
"xml-image-title image-title--fixed image-title--bottom",
|
||
style: { textAlign: _vm.titleAlign || "left" },
|
||
domProps: { innerHTML: _vm._s(_vm.self.title) },
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.clickHandler(1)
|
||
},
|
||
},
|
||
})
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.self && _vm.self.title && _vm.showTitle && _vm.titlePosition === "top"
|
||
? _c(
|
||
"div",
|
||
{
|
||
staticClass:
|
||
"xml-image-title image-title--fixed image-title--top",
|
||
style: { textAlign: _vm.titleAlign || "left" },
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.clickHandler(1)
|
||
},
|
||
},
|
||
},
|
||
[_vm._v("\n " + _vm._s(_vm.self.title) + "\n ")]
|
||
)
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.self &&
|
||
_vm.self.title &&
|
||
_vm.showTitle &&
|
||
_vm.titlePosition === "under"
|
||
? _c("div", {
|
||
staticClass: "xml-image-title image-title--lay image-title--under",
|
||
style: { textAlign: _vm.titleAlign || "left" },
|
||
domProps: { innerHTML: _vm._s(_vm.self.title) },
|
||
})
|
||
: _vm._e(),
|
||
],
|
||
2
|
||
)
|
||
};
|
||
var __vue_staticRenderFns__$1 = [];
|
||
__vue_render__$2._withStripped = true;
|
||
|
||
/* style */
|
||
const __vue_inject_styles__$1 = undefined;
|
||
/* scoped */
|
||
const __vue_scope_id__$1 = "data-v-959168fc";
|
||
/* module identifier */
|
||
const __vue_module_identifier__$1 = undefined;
|
||
/* functional template */
|
||
const __vue_is_functional_template__$1 = false;
|
||
/* style inject */
|
||
|
||
/* style inject SSR */
|
||
|
||
/* style inject shadow dom */
|
||
|
||
|
||
|
||
const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
|
||
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$1 },
|
||
__vue_inject_styles__$1,
|
||
__vue_script__$1,
|
||
__vue_scope_id__$1,
|
||
__vue_is_functional_template__$1,
|
||
__vue_module_identifier__$1,
|
||
false,
|
||
undefined,
|
||
undefined,
|
||
undefined
|
||
);
|
||
|
||
let hasModal = false;
|
||
let hasInitZIndex = false;
|
||
let zIndex;
|
||
const getModal = function () {
|
||
if (Vue.prototype.$isServer) return;
|
||
let modalDom = PopupManager.modalDom;
|
||
if (modalDom) {
|
||
hasModal = true;
|
||
} else {
|
||
hasModal = false;
|
||
modalDom = document.createElement('div');
|
||
PopupManager.modalDom = modalDom;
|
||
modalDom.addEventListener('touchmove', function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
});
|
||
modalDom.addEventListener('click', function () {
|
||
PopupManager.doOnModalClick && PopupManager.doOnModalClick();
|
||
});
|
||
}
|
||
return modalDom;
|
||
};
|
||
const instances = {};
|
||
const PopupManager = {
|
||
modalFade: true,
|
||
getInstance: function (id) {
|
||
return instances[id];
|
||
},
|
||
register: function (id, instance) {
|
||
if (id && instance) {
|
||
instances[id] = instance;
|
||
}
|
||
},
|
||
deregister: function (id) {
|
||
if (id) {
|
||
instances[id] = null;
|
||
delete instances[id];
|
||
}
|
||
},
|
||
nextZIndex: function () {
|
||
return PopupManager.zIndex++;
|
||
},
|
||
modalStack: [],
|
||
doOnModalClick: function () {
|
||
const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||
if (!topItem) return;
|
||
const instance = PopupManager.getInstance(topItem.id);
|
||
if (instance && instance.closeOnClickModal) {
|
||
instance.close();
|
||
}
|
||
},
|
||
openModal: function (id, zIndex, dom, modalClass, modalFade) {
|
||
if (Vue.prototype.$isServer) return;
|
||
if (!id || zIndex === undefined) return;
|
||
this.modalFade = modalFade;
|
||
const modalStack = this.modalStack;
|
||
for (let i = 0, j = modalStack.length; i < j; i++) {
|
||
const item = modalStack[i];
|
||
if (item.id === id) {
|
||
return;
|
||
}
|
||
}
|
||
const modalDom = getModal();
|
||
addClass(modalDom, 'v-modal');
|
||
if (this.modalFade && !hasModal) {
|
||
addClass(modalDom, 'v-modal-enter');
|
||
}
|
||
if (modalClass) {
|
||
let classArr = modalClass.trim().split(/\s+/);
|
||
classArr.forEach(item => addClass(modalDom, item));
|
||
}
|
||
setTimeout(() => {
|
||
removeClass(modalDom, 'v-modal-enter');
|
||
}, 200);
|
||
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
||
dom.parentNode.appendChild(modalDom);
|
||
} else {
|
||
document.body.appendChild(modalDom);
|
||
}
|
||
if (zIndex) {
|
||
modalDom.style.zIndex = zIndex;
|
||
}
|
||
modalDom.tabIndex = 0;
|
||
modalDom.style.display = '';
|
||
this.modalStack.push({
|
||
id: id,
|
||
zIndex: zIndex,
|
||
modalClass: modalClass
|
||
});
|
||
},
|
||
closeModal: function (id) {
|
||
const modalStack = this.modalStack;
|
||
const modalDom = getModal();
|
||
if (modalStack.length > 0) {
|
||
const topItem = modalStack[modalStack.length - 1];
|
||
if (topItem.id === id) {
|
||
if (topItem.modalClass) {
|
||
let classArr = topItem.modalClass.trim().split(/\s+/);
|
||
classArr.forEach(item => removeClass(modalDom, item));
|
||
}
|
||
modalStack.pop();
|
||
if (modalStack.length > 0) {
|
||
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||
}
|
||
} else {
|
||
for (let i = modalStack.length - 1; i >= 0; i--) {
|
||
if (modalStack[i].id === id) {
|
||
modalStack.splice(i, 1);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (modalStack.length === 0) {
|
||
if (this.modalFade) {
|
||
addClass(modalDom, 'v-modal-leave');
|
||
}
|
||
setTimeout(() => {
|
||
if (modalStack.length === 0) {
|
||
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||
modalDom.style.display = 'none';
|
||
PopupManager.modalDom = undefined;
|
||
}
|
||
removeClass(modalDom, 'v-modal-leave');
|
||
}, 200);
|
||
}
|
||
}
|
||
};
|
||
Object.defineProperty(PopupManager, 'zIndex', {
|
||
configurable: true,
|
||
get() {
|
||
if (!hasInitZIndex) {
|
||
zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;
|
||
hasInitZIndex = true;
|
||
}
|
||
return zIndex;
|
||
},
|
||
set(value) {
|
||
zIndex = value;
|
||
}
|
||
});
|
||
const getTopPopup = function () {
|
||
if (Vue.prototype.$isServer) return;
|
||
if (PopupManager.modalStack.length > 0) {
|
||
const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||
if (!topPopup) return;
|
||
const instance = PopupManager.getInstance(topPopup.id);
|
||
return instance;
|
||
}
|
||
};
|
||
if (!Vue.prototype.$isServer) {
|
||
// handle `esc` key when the popup is shown
|
||
window.addEventListener('keydown', function (event) {
|
||
if (event.keyCode === 27) {
|
||
const topPopup = getTopPopup();
|
||
if (topPopup && topPopup.closeOnPressEscape) {
|
||
topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
//
|
||
isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
|
||
|
||
/* script */
|
||
|
||
/* template */
|
||
var __vue_render__$1 = function () {
|
||
var _vm = this;
|
||
var _h = _vm.$createElement;
|
||
var _c = _vm._self._c || _h;
|
||
return _c("transition", { attrs: { name: "viewer-fade" } }, [
|
||
_c(
|
||
"div",
|
||
{
|
||
ref: "el-image-viewer__wrapper",
|
||
staticClass: "el-image-viewer__wrapper",
|
||
style: { "z-index": _vm.viewerZIndex },
|
||
attrs: { tabindex: "-1" },
|
||
},
|
||
[
|
||
_c("div", {
|
||
staticClass: "el-image-viewer__mask",
|
||
on: {
|
||
click: function ($event) {
|
||
if ($event.target !== $event.currentTarget) {
|
||
return null
|
||
}
|
||
return _vm.handleMaskClick.apply(null, arguments)
|
||
},
|
||
},
|
||
}),
|
||
_vm._v(" "),
|
||
_c(
|
||
"span",
|
||
{
|
||
staticClass: "el-image-viewer__btn el-image-viewer__close",
|
||
on: { click: _vm.hide },
|
||
},
|
||
[_c("i", { staticClass: "el-icon-close" })]
|
||
),
|
||
_vm._v(" "),
|
||
_c(
|
||
"div",
|
||
{ staticClass: "el-image-viewer__btn el-image-viewer__actions" },
|
||
[
|
||
_c("div", { staticClass: "el-image-viewer__actions__inner" }, [
|
||
!_vm.isSingle
|
||
? _c("i", {
|
||
class: [
|
||
"el-icon-arrow-left",
|
||
!_vm.infinite && _vm.isFirst ? "is-disabled" : "",
|
||
],
|
||
on: { click: _vm.prev },
|
||
})
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_c("i", {
|
||
staticClass: "el-icon-zoom-out",
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.handleActions("zoomOut")
|
||
},
|
||
},
|
||
}),
|
||
_vm._v(" "),
|
||
_c("i", {
|
||
staticClass: "el-icon-zoom-in",
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.handleActions("zoomIn")
|
||
},
|
||
},
|
||
}),
|
||
_vm._v(" "),
|
||
_c("i", { staticClass: "el-image-viewer__actions__divider" }),
|
||
_vm._v(" "),
|
||
_c("i", { class: _vm.mode.icon, on: { click: _vm.toggleMode } }),
|
||
_vm._v(" "),
|
||
_c("i", { staticClass: "el-image-viewer__actions__divider" }),
|
||
_vm._v(" "),
|
||
_c("i", {
|
||
staticClass: "el-icon-refresh-left",
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.handleActions("anticlocelise")
|
||
},
|
||
},
|
||
}),
|
||
_vm._v(" "),
|
||
_c("i", {
|
||
staticClass: "el-icon-refresh-right",
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.handleActions("clocelise")
|
||
},
|
||
},
|
||
}),
|
||
_vm._v(" "),
|
||
!_vm.isSingle
|
||
? _c("i", {
|
||
class: [
|
||
"el-icon-arrow-right",
|
||
!_vm.infinite && _vm.isLast ? "is-disabled" : "",
|
||
],
|
||
on: { click: _vm.next },
|
||
})
|
||
: _vm._e(),
|
||
]),
|
||
]
|
||
),
|
||
_vm._v(" "),
|
||
_vm.title.length && _vm.title[_vm.index]
|
||
? _c(
|
||
"div",
|
||
{ staticClass: "el-image-viewer__btn el-image-viewer__title" },
|
||
[
|
||
_vm._v(
|
||
"\n " +
|
||
_vm._s(_vm.title.length ? _vm.title[_vm.index] : "") +
|
||
"\n "
|
||
),
|
||
]
|
||
)
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.contents.length && _vm.contents[_vm.index]
|
||
? _c(
|
||
"div",
|
||
{ staticClass: "el-image-viewer__btn el-image-viewer__content" },
|
||
[
|
||
_c(
|
||
"el-collapse-transition",
|
||
{ attrs: { name: "el-fade-in" } },
|
||
[
|
||
_c(
|
||
"div",
|
||
{
|
||
directives: [
|
||
{
|
||
name: "show",
|
||
rawName: "v-show",
|
||
value: _vm.ellipsisReady,
|
||
expression: "ellipsisReady",
|
||
},
|
||
],
|
||
class: [
|
||
"ellipsis-box",
|
||
_vm.contentExpand ? "" : "text-ellipsis-3",
|
||
],
|
||
},
|
||
[
|
||
_vm._v(
|
||
"\n " +
|
||
_vm._s(
|
||
_vm.contents.length ? _vm.contents[_vm.index] : ""
|
||
) +
|
||
"\n "
|
||
),
|
||
]
|
||
),
|
||
]
|
||
),
|
||
_vm._v(" "),
|
||
_c(
|
||
"el-button",
|
||
{
|
||
directives: [
|
||
{
|
||
name: "show",
|
||
rawName: "v-show",
|
||
value: _vm.showEllipsisButton,
|
||
expression: "showEllipsisButton",
|
||
},
|
||
],
|
||
attrs: { type: "text", size: "mini" },
|
||
on: { click: _vm.toggleEllipsis },
|
||
},
|
||
[
|
||
_vm._v(_vm._s(_vm.contentExpand ? "收起" : "展开")),
|
||
_c("i", {
|
||
class: _vm.contentExpand
|
||
? "el-icon-arrow-up"
|
||
: "el-icon-arrow-down",
|
||
}),
|
||
]
|
||
),
|
||
],
|
||
1
|
||
)
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_c(
|
||
"div",
|
||
{ staticClass: "el-image-viewer__canvas" },
|
||
_vm._l(_vm.urlList, function (url, i) {
|
||
return i === _vm.index
|
||
? _c("img", {
|
||
key: url,
|
||
ref: "img",
|
||
refInFor: true,
|
||
staticClass: "el-image-viewer__img",
|
||
style: _vm.imgStyle,
|
||
attrs: { src: _vm.currentImg },
|
||
on: {
|
||
load: _vm.handleImgLoad,
|
||
error: _vm.handleImgError,
|
||
mousedown: _vm.handleMouseDown,
|
||
touchstart: _vm.touchstart,
|
||
touchmove: _vm.touchmove,
|
||
},
|
||
})
|
||
: _vm._e()
|
||
}),
|
||
0
|
||
),
|
||
]
|
||
),
|
||
])
|
||
};
|
||
__vue_render__$1._withStripped = true;
|
||
|
||
/* istanbul ignore next */
|
||
__vue_component__$1.install = function (Vue) {
|
||
Vue.component(__vue_component__$1.name, __vue_component__$1);
|
||
};
|
||
|
||
//
|
||
/***
|
||
* 文本块
|
||
*/
|
||
var script = {
|
||
name: 'XmlImageRender',
|
||
components: {
|
||
previewImageRender: __vue_component__$1
|
||
},
|
||
props: {
|
||
//模式：preview 预览 (默认)，editor 编辑
|
||
mode: {
|
||
type: String,
|
||
default: function () {
|
||
return 'editor';
|
||
}
|
||
},
|
||
pBlockData: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
},
|
||
//块儿数据名
|
||
blockDataName: String,
|
||
//页面类型，取值h5、pc、pad
|
||
pageType: {
|
||
type: String,
|
||
default: 'h5'
|
||
},
|
||
resourceBasisPath: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//当前所处组的规则
|
||
currentRule: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
},
|
||
ruleIndex: Number,
|
||
extendParams: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
},
|
||
showTitle: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// image,
|
||
// noImage,
|
||
previewKey: Math.random(),
|
||
blockId: `blockId${Math.random()}`,
|
||
//当前块儿数据，一般用不到，因为一般的块儿中不会在块儿内更改数据
|
||
blockData: {
|
||
imageMode: 'dan-tu',
|
||
showEffect: 'hua-lang',
|
||
clickEffect: 'wu',
|
||
titlePosition: 'under',
|
||
// width: 100,
|
||
titleAlign: 'left',
|
||
imageList: [{
|
||
source: 'upload',
|
||
//来源：上传，素材
|
||
uploadFileUrl: '',
|
||
title: '',
|
||
content: '',
|
||
href: '' //跳转链接
|
||
}]
|
||
},
|
||
carouselActiveIndex: 0,
|
||
//属性组件名
|
||
propertyComponentsName: 'xml-image-property',
|
||
currentPreviewList: [],
|
||
carouselHeight: '',
|
||
currentIndex: -1
|
||
};
|
||
},
|
||
inject: {
|
||
getSysEnv: {
|
||
from: 'getSysEnv',
|
||
default: () => () => {}
|
||
}
|
||
},
|
||
computed: {
|
||
blockPreviewList() {
|
||
let images = this.blockData.imageList || [],
|
||
list = [];
|
||
images.map(item => {
|
||
let src = this.resourceBasisPath ? this.resourceBasisPath + item.uploadFileUrl.split('./')[1] : item.uploadFileUrl;
|
||
list.push(src);
|
||
});
|
||
return this.blockData.imageMode == 'dan-tu' ? [list[0]] : list;
|
||
},
|
||
blockPreviewTitleList() {
|
||
let images = this.blockData.imageList || [],
|
||
list = [];
|
||
images.map(item => {
|
||
list.push(item.title);
|
||
});
|
||
return this.blockData.imageMode == 'dan-tu' ? [list[0]] : list;
|
||
},
|
||
blockPreviewContentList() {
|
||
let images = this.blockData.imageList || [],
|
||
list = [];
|
||
images.map(item => {
|
||
list.push(item.content || '');
|
||
});
|
||
return this.blockData.imageMode == 'dan-tu' ? [list[0]] : list;
|
||
},
|
||
indicatorText() {
|
||
let allNum = this.blockData.imageList.length;
|
||
return `${this.carouselActiveIndex + 1} / ${allNum}`;
|
||
},
|
||
carouselActiveTitle() {
|
||
return this.blockData.imageList[this.carouselActiveIndex].title || '';
|
||
},
|
||
carouselActiveItem() {
|
||
return this.blockData.imageList[this.carouselActiveIndex] || {};
|
||
},
|
||
allHaveNoTitle() {
|
||
let has = false;
|
||
this.blockData.imageList.forEach(item => {
|
||
if (item.title) {
|
||
has = true;
|
||
}
|
||
});
|
||
return !has;
|
||
},
|
||
sysEnv() {
|
||
return this.getSysEnv();
|
||
}
|
||
},
|
||
watch: {
|
||
pBlockData: {
|
||
handler(newValue) {
|
||
this.$nextTick(() => {
|
||
this.blockData = Object.assign({}, this.blockData, newValue);
|
||
});
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
},
|
||
'blockData.showEffect': {
|
||
handler(newValue) {
|
||
if (newValue === 'lun-bo') {
|
||
this.setCarouselHeight();
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
updated() {},
|
||
methods: {
|
||
// 此方法必须要，用户注册块儿点击事件
|
||
blockClick() {
|
||
this.$emit('blockclick', {
|
||
blockData: this.blockData,
|
||
dataName: this.blockDataName,
|
||
propertyComponentsName: this.propertyComponentsName,
|
||
blockId: this.blockId,
|
||
ruleIndex: this.ruleIndex
|
||
});
|
||
},
|
||
imageClick({
|
||
source,
|
||
uploadFileUrl,
|
||
title,
|
||
link,
|
||
content,
|
||
href,
|
||
businessType,
|
||
linkId,
|
||
cIndex
|
||
}, imgList) {
|
||
if (this.mode === 'editor') return;
|
||
console.log('??????????????????', linkId, cIndex);
|
||
if (cIndex !== undefined) {
|
||
this.currentIndex = cIndex;
|
||
}
|
||
if (this.blockData.clickEffect === 'dian-ji-fang-da') {
|
||
if (this.blockData.showEffect === 'lun-bo') {
|
||
let imgList = [];
|
||
this.blockData.imageList.map(item => {
|
||
imgList.push({
|
||
url: item.uploadFileUrl?.indexOf('./') != -1 ? this.resourceBasisPath + item.uploadFileUrl.split('./')[1] : item.uploadFileUrl,
|
||
title: item.title,
|
||
description: item.content
|
||
});
|
||
});
|
||
this.$hevueImgPreview({
|
||
multiple: true,
|
||
nowImgIndex: this.carouselActiveIndex,
|
||
imgList
|
||
});
|
||
}
|
||
} else if (this.blockData.clickEffect === 'dian-ji-tiao-zhuan') {
|
||
//点击跳转
|
||
// window.href = href
|
||
if (linkId) {
|
||
// window.open(link, '_blank')
|
||
if (this.mode == 'reader') {
|
||
window.open(this.sysEnv.webBaseUrl + 'previewLooseLeaf?pageType=' + this.pageType + '&businessType=looseLeaf' + '&looseLeafId=' + linkId + '&uuid=' + v4() + '&styleType=' + 'B', '_blank');
|
||
// this.$EventBus.$emit('hotzoneClick', {
|
||
// type: 'looseleaf',
|
||
// value: linkId,
|
||
// label: ''
|
||
// })
|
||
} else {
|
||
window.open(process.env.VUE_APP_TEXTBOOK_WEB + 'previewLooseLeaf?pageType=' + this.pageType + '&businessType=looseLeaf' + '&looseLeafId=' + linkId + '&uuid=' + v4() + '&styleType=' + 'B', '_blank');
|
||
}
|
||
} else {
|
||
this.$message.warning('获取资源链接失败，请检查链接地址');
|
||
}
|
||
}
|
||
},
|
||
setImage(image) {
|
||
let imageEle = image.path[0];
|
||
let {
|
||
naturalWidth,
|
||
naturalHeight
|
||
} = imageEle;
|
||
let renderWidth = naturalWidth / (naturalHeight / 200);
|
||
image.path[0].style.width = `${renderWidth}px`;
|
||
},
|
||
setActiveImageIndex(current) {
|
||
this.carouselActiveIndex = current;
|
||
},
|
||
setCarouselHeight() {
|
||
// 获取容器宽度以16:9计算高度并设置
|
||
let containerRect = this.$refs.carouselContainer ? this.$refs.carouselContainer.getBoundingClientRect() : {
|
||
width: 568
|
||
};
|
||
if (this.blockData.proportion) {
|
||
this.carouselHeight = containerRect.width * this.blockData.proportion + 'px';
|
||
} else {
|
||
this.carouselHeight = parseInt(containerRect.width / 16 * 9) + 'px';
|
||
}
|
||
},
|
||
clickImg() {
|
||
this.$emit('clickImg');
|
||
}
|
||
},
|
||
mounted() {
|
||
this.setCarouselHeight();
|
||
}
|
||
};
|
||
|
||
/* script */
|
||
const __vue_script__ = script;
|
||
/* template */
|
||
var __vue_render__ = function () {
|
||
var _vm = this;
|
||
var _h = _vm.$createElement;
|
||
var _c = _vm._self._c || _h;
|
||
return _c(
|
||
"div",
|
||
{
|
||
ref: "carouselContainer",
|
||
class:
|
||
"xml-image-container-" +
|
||
_vm.pageType +
|
||
" image-container " +
|
||
(_vm.blockData.showEffect === "hua-lang"
|
||
? "hua-lang-image-container"
|
||
: ""),
|
||
attrs: { id: _vm.blockId },
|
||
on: { click: _vm.blockClick },
|
||
},
|
||
[
|
||
_vm.blockData.imageList.length > 0
|
||
? [
|
||
_vm.blockData.imageMode == "dan-tu"
|
||
? _c(
|
||
"div",
|
||
{ staticClass: "xml-image-dan-tu" },
|
||
[
|
||
_c("preview-image-render", {
|
||
class: "xml-image-dan-tu-" + _vm.pageType,
|
||
attrs: {
|
||
src: _vm.blockData.imageList[0].uploadFileUrl
|
||
? _vm.blockData.imageList[0].uploadFileUrl.indexOf(
|
||
"./"
|
||
) != -1
|
||
? _vm.resourceBasisPath +
|
||
_vm.blockData.imageList[0].uploadFileUrl.split(
|
||
"./"
|
||
)[1]
|
||
: _vm.blockData.imageList[0].uploadFileUrl
|
||
: "",
|
||
mode: _vm.mode,
|
||
showTitle: _vm.showTitle,
|
||
pageType: _vm.pageType,
|
||
"preview-text": _vm.blockPreviewTitleList,
|
||
contents: _vm.blockPreviewContentList,
|
||
current: 0,
|
||
previewSrcList: _vm.blockPreviewList,
|
||
imageList: _vm.blockData.imageList,
|
||
clickEffect: _vm.blockData.clickEffect,
|
||
width: _vm.blockData.width,
|
||
},
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.imageClick(_vm.blockData.imageList[0])
|
||
},
|
||
},
|
||
}),
|
||
],
|
||
1
|
||
)
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.blockData.imageMode == "duo-tu"
|
||
? _c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-image-duo-tu",
|
||
class: "xml-image-duo-tu " + _vm.blockData.showEffect,
|
||
},
|
||
[
|
||
_vm.blockData.showEffect === "hua-lang"
|
||
? _c(
|
||
"div",
|
||
{
|
||
class: [
|
||
"xml-image-hualang",
|
||
_vm.allHaveNoTitle ? "no-title" : "",
|
||
],
|
||
style: {
|
||
"--xml-image-hualang-background-color":
|
||
_vm.blockData.themeColor || "#f4f4f4",
|
||
},
|
||
on: {
|
||
touchstart: _vm.clickImg,
|
||
mousedown: _vm.clickImg,
|
||
},
|
||
},
|
||
_vm._l(
|
||
_vm.blockData.imageList,
|
||
function (item, index) {
|
||
return _c("preview-image-render", {
|
||
directives: [
|
||
{
|
||
name: "show",
|
||
rawName: "v-show",
|
||
value:
|
||
_vm.blockData.showEffect === "hua-lang",
|
||
expression:
|
||
"blockData.showEffect === 'hua-lang'",
|
||
},
|
||
],
|
||
key: index,
|
||
class: [
|
||
"xml-image-" +
|
||
_vm.blockData.showEffect +
|
||
"-" +
|
||
_vm.pageType,
|
||
"xml-image-hua-lang xml-group-item",
|
||
],
|
||
style: {
|
||
width: _vm.blockData.width
|
||
? (290 / 100) *
|
||
Number(_vm.blockData.width) +
|
||
"px"
|
||
: "290px",
|
||
height:
|
||
(_vm.blockData.galleryHeight || 290) + "px",
|
||
},
|
||
attrs: {
|
||
src: item.uploadFileUrl
|
||
? _vm.blockData.imageList[0].uploadFileUrl.indexOf(
|
||
"./"
|
||
) != -1
|
||
? _vm.resourceBasisPath +
|
||
item.uploadFileUrl.split("./")[1]
|
||
: item.uploadFileUrl
|
||
: "",
|
||
"preview-text": _vm.blockPreviewTitleList,
|
||
previewSrcList: _vm.blockPreviewList,
|
||
imageList: _vm.blockData.imageList,
|
||
showTitle: _vm.showTitle,
|
||
pageType: _vm.pageType,
|
||
current: index,
|
||
title: _vm.blockPreviewTitleList,
|
||
contents: _vm.blockPreviewContentList,
|
||
currentIndex: _vm.currentIndex,
|
||
titlePosition: _vm.blockData.titlePosition,
|
||
titleAlign: _vm.blockData.titleAlign,
|
||
mode: _vm.mode,
|
||
self: item,
|
||
clickEffect: _vm.blockData.clickEffect,
|
||
width: _vm.blockData.width,
|
||
},
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.imageClick(
|
||
Object.assign({}, item, {
|
||
cIndex: index,
|
||
}),
|
||
_vm.blockData
|
||
)
|
||
},
|
||
onBottomTitleClick: function ($event) {
|
||
return _vm.imageClick(item, _vm.blockData)
|
||
},
|
||
},
|
||
})
|
||
}
|
||
),
|
||
1
|
||
)
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.blockData.showEffect === "ping-pu"
|
||
? _c(
|
||
"div",
|
||
{ staticClass: "xml-image-ping-pu" },
|
||
_vm._l(
|
||
_vm.blockData.imageList,
|
||
function (item, index) {
|
||
return _c("preview-image-render", {
|
||
key: index,
|
||
staticClass: "xml-group-item",
|
||
class:
|
||
"xml-image-" +
|
||
_vm.blockData.showEffect +
|
||
"-" +
|
||
_vm.pageType,
|
||
attrs: {
|
||
src: item.uploadFileUrl
|
||
? _vm.blockData.imageList[0].uploadFileUrl.indexOf(
|
||
"./"
|
||
) != -1
|
||
? _vm.resourceBasisPath +
|
||
item.uploadFileUrl.split("./")[1]
|
||
: item.uploadFileUrl
|
||
: "",
|
||
fit: "cover",
|
||
title: _vm.blockPreviewTitleList,
|
||
pageType: _vm.pageType,
|
||
contents: _vm.blockPreviewContentList,
|
||
currentIndex: _vm.currentIndex,
|
||
current: index,
|
||
showTitle: _vm.showTitle,
|
||
titlePosition: _vm.blockData.titlePosition,
|
||
titleAlign: _vm.blockData.titleAlign,
|
||
self: item,
|
||
mode: _vm.mode,
|
||
"preview-text": _vm.blockPreviewTitleList,
|
||
previewSrcList: _vm.blockPreviewList,
|
||
imageList: _vm.blockData.imageList,
|
||
clickEffect: _vm.blockData.clickEffect,
|
||
width: _vm.blockData.width,
|
||
},
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.imageClick(
|
||
Object.assign({}, item, { cIndex: index })
|
||
)
|
||
},
|
||
onBottomTitleClick: function ($event) {
|
||
return _vm.imageClick(item, _vm.blockData)
|
||
},
|
||
},
|
||
})
|
||
}
|
||
),
|
||
1
|
||
)
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.blockData.showEffect === "lun-bo"
|
||
? _c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-image-lun-bo xml-group-item",
|
||
style: { width: _vm.blockData.width + "%" },
|
||
},
|
||
[
|
||
_vm.showTitle &&
|
||
_vm.blockData.titlePosition === "on" &&
|
||
!_vm.allHaveNoTitle
|
||
? _c("div", {
|
||
staticClass:
|
||
"image-title--lay image-title--on",
|
||
style: {
|
||
textAlign:
|
||
_vm.blockData.titleAlign || "left",
|
||
},
|
||
domProps: {
|
||
innerHTML: _vm._s(_vm.carouselActiveTitle),
|
||
},
|
||
})
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_c(
|
||
"el-carousel",
|
||
{
|
||
ref: "imageCarousel",
|
||
attrs: {
|
||
height: _vm.carouselHeight,
|
||
arrow: "always",
|
||
loop: "",
|
||
"indicator-position": "none",
|
||
},
|
||
on: { change: _vm.setActiveImageIndex },
|
||
},
|
||
[
|
||
_vm._l(
|
||
_vm.blockData.imageList,
|
||
function (item, index) {
|
||
return _c(
|
||
"el-carousel-item",
|
||
{ key: index },
|
||
[
|
||
_c("img", {
|
||
attrs: {
|
||
src: item.uploadFileUrl
|
||
? _vm.blockData.imageList[0].uploadFileUrl.indexOf(
|
||
"./"
|
||
) != -1
|
||
? _vm.resourceBasisPath +
|
||
item.uploadFileUrl.split(
|
||
"./"
|
||
)[1]
|
||
: item.uploadFileUrl
|
||
: "",
|
||
},
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.imageClick(item)
|
||
},
|
||
},
|
||
}),
|
||
]
|
||
)
|
||
}
|
||
),
|
||
_vm._v(" "),
|
||
_c(
|
||
"div",
|
||
{
|
||
class: [
|
||
"custom-indicator",
|
||
_vm.blockData.titlePosition === "bottom"
|
||
? "withBottomTitle"
|
||
: _vm.blockData.titlePosition === "top"
|
||
? "withTopTitle"
|
||
: "",
|
||
],
|
||
},
|
||
[
|
||
_vm._v(
|
||
"\n " +
|
||
_vm._s(_vm.indicatorText) +
|
||
"\n "
|
||
),
|
||
]
|
||
),
|
||
_vm._v(" "),
|
||
_vm.showTitle &&
|
||
_vm.blockData.titlePosition === "bottom" &&
|
||
_vm.carouselActiveTitle
|
||
? _c("div", {
|
||
staticClass:
|
||
"image-title--fixed image-title--bottom",
|
||
style: {
|
||
textAlign:
|
||
_vm.blockData.titleAlign || "left",
|
||
},
|
||
domProps: {
|
||
innerHTML: _vm._s(
|
||
_vm.carouselActiveTitle
|
||
),
|
||
},
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.imageClick(
|
||
_vm.carouselActiveItem
|
||
)
|
||
},
|
||
},
|
||
})
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_vm.showTitle &&
|
||
_vm.blockData.titlePosition === "top" &&
|
||
_vm.carouselActiveTitle
|
||
? _c(
|
||
"div",
|
||
{
|
||
staticClass:
|
||
"image-title--fixed image-title--top",
|
||
style: {
|
||
textAlign:
|
||
_vm.blockData.titleAlign || "left",
|
||
},
|
||
on: {
|
||
click: function ($event) {
|
||
return _vm.imageClick(
|
||
_vm.carouselActiveItem
|
||
)
|
||
},
|
||
},
|
||
},
|
||
[
|
||
_vm._v(
|
||
"\n " +
|
||
_vm._s(_vm.carouselActiveTitle) +
|
||
"\n "
|
||
),
|
||
]
|
||
)
|
||
: _vm._e(),
|
||
],
|
||
2
|
||
),
|
||
_vm._v(" "),
|
||
_vm.showTitle &&
|
||
_vm.blockData.titlePosition === "under" &&
|
||
!_vm.allHaveNoTitle
|
||
? _c("div", {
|
||
staticClass:
|
||
"xml-image-title image-title--lay image-title--under",
|
||
style: {
|
||
textAlign:
|
||
_vm.blockData.titleAlign || "left",
|
||
},
|
||
domProps: {
|
||
innerHTML: _vm._s(_vm.carouselActiveTitle),
|
||
},
|
||
})
|
||
: _vm._e(),
|
||
],
|
||
1
|
||
)
|
||
: _vm._e(),
|
||
]
|
||
)
|
||
: _vm._e(),
|
||
]
|
||
: [
|
||
_c(
|
||
"div",
|
||
{ staticClass: "xml-noimage-container" },
|
||
[
|
||
_c("el-image", {
|
||
staticClass: "xml-noimage",
|
||
class: "xml-image-dan-tu-" + _vm.pageType,
|
||
attrs: {
|
||
src: "../../../../static/images/defaultCover/no-image.png",
|
||
fit: "cover",
|
||
},
|
||
}),
|
||
],
|
||
1
|
||
),
|
||
],
|
||
],
|
||
2
|
||
)
|
||
};
|
||
var __vue_staticRenderFns__ = [];
|
||
__vue_render__._withStripped = true;
|
||
|
||
/* style */
|
||
const __vue_inject_styles__ = undefined;
|
||
/* scoped */
|
||
const __vue_scope_id__ = undefined;
|
||
/* module identifier */
|
||
const __vue_module_identifier__ = undefined;
|
||
/* functional template */
|
||
const __vue_is_functional_template__ = false;
|
||
/* style inject */
|
||
|
||
/* style inject SSR */
|
||
|
||
/* style inject shadow dom */
|
||
|
||
|
||
|
||
const __vue_component__ = /*#__PURE__*/normalizeComponent(
|
||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||
__vue_inject_styles__,
|
||
__vue_script__,
|
||
__vue_scope_id__,
|
||
__vue_is_functional_template__,
|
||
__vue_module_identifier__,
|
||
false,
|
||
undefined,
|
||
undefined,
|
||
undefined
|
||
);
|
||
|
||
let componentNamespace = 'xml';
|
||
// 组件前缀命名只能更新一次，防止重复执行修改组件注册出错
|
||
let isUpdated = false;
|
||
function createNamespace(name, {
|
||
prefix,
|
||
isUnPrefix
|
||
}) {
|
||
let useNamespace;
|
||
if (!isUpdated) {
|
||
isUpdated = true;
|
||
useNamespace = prefix || componentNamespace; // 更改前缀
|
||
}
|
||
if (prefix) {
|
||
if (name.indexOf(componentNamespace) === 0) {
|
||
return name.replace(componentNamespace, prefix);
|
||
}
|
||
return useNamespace.charAt(0).toUpperCase() + useNamespace.substr(1) + name;
|
||
}
|
||
if (name.indexOf(componentNamespace) === 0 || name.indexOf(componentNamespace.charAt(0).toUpperCase()) === 0) {
|
||
return name.charAt(0).toUpperCase() + name.substr(1);
|
||
}
|
||
return isUnPrefix ? name.charAt(0).toLowerCase() + name.substr(1) : componentNamespace + name.charAt(0).toUpperCase() + name.substr(1);
|
||
}
|
||
|
||
__vue_component__.install = (Vue, options = {}) => {
|
||
Vue.component(createNamespace('image-render', {
|
||
prefix: options.prefix
|
||
}), __vue_component__);
|
||
};
|
||
|
||
export { __vue_component__ as default };
|