+ 文件上传服务
+
+
+ 只能上传jpg/png文件，且不超过500kb
+
+
+
+ String representation i accordance with RFC 2045.
+ *
+ * @param sArr The bytes to convert. If null or length 0 an empty array will be returned.
+ * @param lineSep Optional "\r\n" after 76 characters, unless end of file.+ * No line separator will be in breach of RFC 2045 which specifies max 76 per line but will be a + * little faster. + * @return A BASE64 encoded array. Never
null.
+ */
+ public final static String encodeToString(byte[] sArr, boolean lineSep) {
+ // Reuse char[] since we can't create a String incrementally anyway and StringBuffer/Builder would be slower.
+ return new String(encodeToChar(sArr, lineSep));
+ }
+
+ /**
+ * Encodes a raw byte array into a BASE64 byte[] representation i accordance with RFC 2045.
+ *
+ * @param sArr The bytes to convert. If null or length 0 an empty array will be returned.
+ * @param lineSep Optional "\r\n" after 76 characters, unless end of file.+ * No line separator will be in breach of RFC 2045 which specifies max 76 per line but will be a + * little faster. + * @return A BASE64 encoded array. Never
null.
+ */
+ public final static byte[] encodeToByte(byte[] sArr, boolean lineSep) {
+ // Check special case
+ int sLen = sArr != null ? sArr.length : 0;
+ if (sLen == 0)
+ return new byte[0];
+
+ int eLen = (sLen / 3) * 3; // Length of even 24-bits.
+ int cCnt = ((sLen - 1) / 3 + 1) << 2; // Returned character count
+ int dLen = cCnt + (lineSep ? (cCnt - 1) / 76 << 1 : 0); // Length of returned array
+ byte[] dArr = new byte[dLen];
+
+ // Encode even 24-bits
+ for (int s = 0, d = 0, cc = 0; s < eLen; ) {
+ // Copy next three bytes into lower 24 bits of int, paying attension to sign.
+ int i = (sArr[s++] & 0xff) << 16 | (sArr[s++] & 0xff) << 8 | (sArr[s++] & 0xff);
+
+ // Encode the int into four chars
+ dArr[d++] = (byte) CA[(i >>> 18) & 0x3f];
+ dArr[d++] = (byte) CA[(i >>> 12) & 0x3f];
+ dArr[d++] = (byte) CA[(i >>> 6) & 0x3f];
+ dArr[d++] = (byte) CA[i & 0x3f];
+
+ // Add optional line separator
+ if (lineSep && ++cc == 19 && d < dLen - 2) {
+ dArr[d++] = '\r';
+ dArr[d++] = '\n';
+ cc = 0;
+ }
+ }
+
+ // Pad and encode last bits if source isn't an even 24 bits.
+ int left = sLen - eLen; // 0 - 2.
+ if (left > 0) {
+ // Prepare the int
+ int i = ((sArr[eLen] & 0xff) << 10) | (left == 2 ? ((sArr[sLen - 1] & 0xff) << 2) : 0);
+
+ // Set last four chars
+ dArr[dLen - 4] = (byte) CA[i >> 12];
+ dArr[dLen - 3] = (byte) CA[(i >>> 6) & 0x3f];
+ dArr[dLen - 2] = left == 2 ? (byte) CA[i & 0x3f] : (byte) '=';
+ dArr[dLen - 1] = '=';
+ }
+ return dArr;
+ }
+
+ public final static byte[] decode(char[] sArr) {
+ // Check special case
+ int sLen = sArr != null ? sArr.length : 0;
+ if (sLen == 0)
+ return new byte[0];
+
+ // Count illegal characters (including '\r', '\n') to know what size the returned array will be,
+ // so we don't have to reallocate & copy it later.
+ int sepCnt = 0; // Number of separator characters. (Actually illegal characters, but that's a bonus...)
+ for (int i = 0; i < sLen; i++) // If input is "pure" (I.e. no line separators or illegal chars) base64 this loop can be commented out.
+ if (IA[sArr[i]] < 0)
+ sepCnt++;
+
+ // Check so that legal chars (including '=') are evenly divideable by 4 as specified in RFC 2045.
+ if ((sLen - sepCnt) % 4 != 0)
+ return null;
+
+ int pad = 0;
+ for (int i = sLen; i > 1 && IA[sArr[--i]] <= 0; )
+ if (sArr[i] == '=')
+ pad++;
+
+ int len = ((sLen - sepCnt) * 6 >> 3) - pad;
+
+ byte[] dArr = new byte[len]; // Preallocate byte[] of exact length
+
+ for (int s = 0, d = 0; d < len; ) {
+ // Assemble three bytes into an int from four "valid" characters.
+ int i = 0;
+ for (int j = 0; j < 4; j++) { // j only increased if a valid char was found.
+ int c = IA[sArr[s++]];
+ if (c >= 0)
+ i |= c << (18 - j * 6);
+ else
+ j--;
+ }
+ // Add the bytes
+ dArr[d++] = (byte) (i >> 16);
+ if (d < len) {
+ dArr[d++] = (byte) (i >> 8);
+ if (d < len)
+ dArr[d++] = (byte) i;
+ }
+ }
+ return dArr;
+ }
+
+ /**
+ * Decodes a BASE64 encoded byte array. All illegal characters will be ignored and can handle both arrays with
+ * and without line separators.
+ *
+ * @param sArr The source array. Length 0 will return an empty array. null will throw an exception.
+ * @return The decoded array of bytes. May be of length 0. Will be null if the legal characters
+ * (including '=') isn't divideable by 4. (I.e. definitely corrupted).
+ */
+ public final static byte[] decode(byte[] sArr) {
+ // Check special case
+ int sLen = sArr.length;
+
+ // Count illegal characters (including '\r', '\n') to know what size the returned array will be,
+ // so we don't have to reallocate & copy it later.
+ int sepCnt = 0; // Number of separator characters. (Actually illegal characters, but that's a bonus...)
+ for (int i = 0; i < sLen; i++) // If input is "pure" (I.e. no line separators or illegal chars) base64 this loop can be commented out.
+ if (IA[sArr[i] & 0xff] < 0)
+ sepCnt++;
+
+ // Check so that legal chars (including '=') are evenly divideable by 4 as specified in RFC 2045.
+ if ((sLen - sepCnt) % 4 != 0)
+ return null;
+
+ int pad = 0;
+ for (int i = sLen; i > 1 && IA[sArr[--i] & 0xff] <= 0; )
+ if (sArr[i] == '=')
+ pad++;
+
+ int len = ((sLen - sepCnt) * 6 >> 3) - pad;
+
+ byte[] dArr = new byte[len]; // Preallocate byte[] of exact length
+
+ for (int s = 0, d = 0; d < len; ) {
+ // Assemble three bytes into an int from four "valid" characters.
+ int i = 0;
+ for (int j = 0; j < 4; j++) { // j only increased if a valid char was found.
+ int c = IA[sArr[s++] & 0xff];
+ if (c >= 0)
+ i |= c << (18 - j * 6);
+ else
+ j--;
+ }
+
+ // Add the bytes
+ dArr[d++] = (byte) (i >> 16);
+ if (d < len) {
+ dArr[d++] = (byte) (i >> 8);
+ if (d < len)
+ dArr[d++] = (byte) i;
+ }
+ }
+
+ return dArr;
+ }
+
+ /**
+ * Decodes a BASE64 encoded byte array that is known to be resonably well formatted. The method is about twice as
+ * fast as {@link =#=decode(byte[])}. The preconditions are:+ * + The array must have a line length of 76 chars OR no line separators at all (one line).
+ * + Line separator must be "\r\n", as specified in RFC 2045 + * + The array must not contain illegal characters within the encoded string
+ * + The array CAN have illegal characters at the beginning and end, those will be dealt with appropriately.
+ * + * @param sArr The source array. Length 0 will return an empty array.
null will throw an exception.
+ * @return The decoded array of bytes. May be of length 0.
+ */
+ public final static byte[] decodeFast(byte[] sArr) {
+ // Check special case
+ int sLen = sArr.length;
+ if (sLen == 0)
+ return new byte[0];
+
+ int sIx = 0, eIx = sLen - 1; // Start and end index after trimming.
+
+ // Trim illegal chars from start
+ while (sIx < eIx && IA[sArr[sIx] & 0xff] < 0)
+ sIx++;
+
+ // Trim illegal chars from end
+ while (eIx > 0 && IA[sArr[eIx] & 0xff] < 0)
+ eIx--;
+
+ // get the padding count (=) (0, 1 or 2)
+ int pad = sArr[eIx] == '=' ? (sArr[eIx - 1] == '=' ? 2 : 1) : 0; // Count '=' at end.
+ int cCnt = eIx - sIx + 1; // Content count including possible separators
+ int sepCnt = sLen > 76 ? (sArr[76] == '\r' ? cCnt / 78 : 0) << 1 : 0;
+
+ int len = ((cCnt - sepCnt) * 6 >> 3) - pad; // The number of decoded bytes
+ byte[] dArr = new byte[len]; // Preallocate byte[] of exact length
+
+ // Decode all but the last 0 - 2 bytes.
+ int d = 0;
+ for (int cc = 0, eLen = (len / 3) * 3; d < eLen; ) {
+ // Assemble three bytes into an int from four "valid" characters.
+ int i = IA[sArr[sIx++]] << 18 | IA[sArr[sIx++]] << 12 | IA[sArr[sIx++]] << 6 | IA[sArr[sIx++]];
+
+ // Add the bytes
+ dArr[d++] = (byte) (i >> 16);
+ dArr[d++] = (byte) (i >> 8);
+ dArr[d++] = (byte) i;
+
+ // If line separator, jump over it.
+ if (sepCnt > 0 && ++cc == 19) {
+ sIx += 2;
+ cc = 0;
+ }
+ }
+
+ if (d < len) {
+ // Decode last 1-3 bytes (incl '=') into 1-3 bytes
+ int i = 0;
+ for (int j = 0; sIx <= eIx - pad; j++)
+ i |= IA[sArr[sIx++]] << (18 - j * 6);
+
+ for (int r = 16; d < len; r -= 8)
+ dArr[d++] = (byte) (i >> r);
+ }
+
+ return dArr;
+ }
+
+ /**
+ * Decodes a BASE64 encoded char array that is known to be resonably well formatted. The method is about twice as
+ * fast as {@link =#=decode(char[])}. The preconditions are:+ * + The array must have a line length of 76 chars OR no line separators at all (one line).
+ * + Line separator must be "\r\n", as specified in RFC 2045 + * + The array must not contain illegal characters within the encoded string
+ * + The array CAN have illegal characters at the beginning and end, those will be dealt with appropriately.
+ * + * @param sArr The source array. Length 0 will return an empty array.
null will throw an exception.
+ * @return The decoded array of bytes. May be of length 0.
+ */
+ public final static byte[] decodeFast(char[] sArr) {
+ // Check special case
+ int sLen = sArr.length;
+ if (sLen == 0)
+ return new byte[0];
+
+ int sIx = 0, eIx = sLen - 1; // Start and end index after trimming.
+
+ // Trim illegal chars from start
+ while (sIx < eIx && IA[sArr[sIx]] < 0)
+ sIx++;
+
+ // Trim illegal chars from end
+ while (eIx > 0 && IA[sArr[eIx]] < 0)
+ eIx--;
+
+ // get the padding count (=) (0, 1 or 2)
+ int pad = sArr[eIx] == '=' ? (sArr[eIx - 1] == '=' ? 2 : 1) : 0; // Count '=' at end.
+ int cCnt = eIx - sIx + 1; // Content count including possible separators
+ int sepCnt = sLen > 76 ? (sArr[76] == '\r' ? cCnt / 78 : 0) << 1 : 0;
+
+ int len = ((cCnt - sepCnt) * 6 >> 3) - pad; // The number of decoded bytes
+ byte[] dArr = new byte[len]; // Preallocate byte[] of exact length
+
+ // Decode all but the last 0 - 2 bytes.
+ int d = 0;
+ for (int cc = 0, eLen = (len / 3) * 3; d < eLen; ) {
+ // Assemble three bytes into an int from four "valid" characters.
+ int i = IA[sArr[sIx++]] << 18 | IA[sArr[sIx++]] << 12 | IA[sArr[sIx++]] << 6 | IA[sArr[sIx++]];
+
+ // Add the bytes
+ dArr[d++] = (byte) (i >> 16);
+ dArr[d++] = (byte) (i >> 8);
+ dArr[d++] = (byte) i;
+
+ // If line separator, jump over it.
+ if (sepCnt > 0 && ++cc == 19) {
+ sIx += 2;
+ cc = 0;
+ }
+ }
+
+ if (d < len) {
+ // Decode last 1-3 bytes (incl '=') into 1-3 bytes
+ int i = 0;
+ for (int j = 0; sIx <= eIx - pad; j++)
+ i |= IA[sArr[sIx++]] << (18 - j * 6);
+
+ for (int r = 16; d < len; r -= 8)
+ dArr[d++] = (byte) (i >> r);
+ }
+
+ return dArr;
+ }
+
+ /**
+ * Decodes a BASE64 encoded String. All illegal characters will be ignored and can handle both strings with
+ * and without line separators.+ * Note! It can be up to about 2x the speed to call
decode(str.toCharArray()) instead. That
+ * will create a temporary array though. This version will use str.charAt(i) to iterate the string.
+ *
+ * @param str The source string. null or length 0 will return an empty array.
+ * @return The decoded array of bytes. May be of length 0. Will be null if the legal characters
+ * (including '=') isn't divideable by 4. (I.e. definitely corrupted).
+ */
+ public final static byte[] decode(String str) {
+ // Check special case
+ int sLen = str != null ? str.length() : 0;
+ if (sLen == 0)
+ return new byte[0];
+
+ // Count illegal characters (including '\r', '\n') to know what size the returned array will be,
+ // so we don't have to reallocate & copy it later.
+ int sepCnt = 0; // Number of separator characters. (Actually illegal characters, but that's a bonus...)
+ for (int i = 0; i < sLen; i++) // If input is "pure" (I.e. no line separators or illegal chars) base64 this loop can be commented out.
+ if (IA[str.charAt(i)] < 0)
+ sepCnt++;
+
+ // Check so that legal chars (including '=') are evenly divideable by 4 as specified in RFC 2045.
+ if ((sLen - sepCnt) % 4 != 0)
+ return null;
+
+ // Count '=' at end
+ int pad = 0;
+ for (int i = sLen; i > 1 && IA[str.charAt(--i)] <= 0; )
+ if (str.charAt(i) == '=')
+ pad++;
+
+ int len = ((sLen - sepCnt) * 6 >> 3) - pad;
+
+ byte[] dArr = new byte[len]; // Preallocate byte[] of exact length
+
+ for (int s = 0, d = 0; d < len; ) {
+ // Assemble three bytes into an int from four "valid" characters.
+ int i = 0;
+ for (int j = 0; j < 4; j++) { // j only increased if a valid char was found.
+ int c = IA[str.charAt(s++)];
+ if (c >= 0)
+ i |= c << (18 - j * 6);
+ else
+ j--;
+ }
+ // Add the bytes
+ dArr[d++] = (byte) (i >> 16);
+ if (d < len) {
+ dArr[d++] = (byte) (i >> 8);
+ if (d < len)
+ dArr[d++] = (byte) i;
+ }
+ }
+ return dArr;
+ }
+
+ /**
+ * Decodes a BASE64 encoded string that is known to be resonably well formatted. The method is about twice as
+ * fast as {@link =#=decode(String)}. The preconditions are:+ * + The array must have a line length of 76 chars OR no line separators at all (one line).
+ * + Line separator must be "\r\n", as specified in RFC 2045 + * + The array must not contain illegal characters within the encoded string
+ * + The array CAN have illegal characters at the beginning and end, those will be dealt with appropriately.
+ * + * @param str The source string. Length 0 will return an empty array.
null will throw an exception.
+ * @return The decoded array of bytes. May be of length 0.
+ */
+ public final static byte[] decodeFast(String str) {
+ // Check special case
+ int sLen = str.length();
+ if (sLen == 0)
+ return new byte[0];
+
+ int sIx = 0, eIx = sLen - 1; // Start and end index after trimming.
+
+ // Trim illegal chars from start
+ while (sIx < eIx && IA[str.charAt(sIx) & 0xff] < 0)
+ sIx++;
+
+ // Trim illegal chars from end
+ while (eIx > 0 && IA[str.charAt(eIx) & 0xff] < 0)
+ eIx--;
+
+ // get the padding count (=) (0, 1 or 2)
+ int pad = str.charAt(eIx) == '=' ? (str.charAt(eIx - 1) == '=' ? 2 : 1) : 0; // Count '=' at end.
+ int cCnt = eIx - sIx + 1; // Content count including possible separators
+ int sepCnt = sLen > 76 ? (str.charAt(76) == '\r' ? cCnt / 78 : 0) << 1 : 0;
+
+ int len = ((cCnt - sepCnt) * 6 >> 3) - pad; // The number of decoded bytes
+ byte[] dArr = new byte[len]; // Preallocate byte[] of exact length
+
+ // Decode all but the last 0 - 2 bytes.
+ int d = 0;
+ for (int cc = 0, eLen = (len / 3) * 3; d < eLen; ) {
+ // Assemble three bytes into an int from four "valid" characters.
+ int i = IA[str.charAt(sIx++)] << 18 | IA[str.charAt(sIx++)] << 12 | IA[str.charAt(sIx++)] << 6 | IA[str.charAt(sIx++)];
+
+ // Add the bytes
+ dArr[d++] = (byte) (i >> 16);
+ dArr[d++] = (byte) (i >> 8);
+ dArr[d++] = (byte) i;
+
+ // If line separator, jump over it.
+ if (sepCnt > 0 && ++cc == 19) {
+ sIx += 2;
+ cc = 0;
+ }
+ }
+
+ if (d < len) {
+ // Decode last 1-3 bytes (incl '=') into 1-3 bytes
+ int i = 0;
+ for (int j = 0; sIx <= eIx - pad; j++)
+ i |= IA[str.charAt(sIx++)] << (18 - j * 6);
+
+ for (int r = 16; d < len; r -= 8)
+ dArr[d++] = (byte) (i >> r);
+ }
+
+ return dArr;
+ }
+
+ public static void main(String[] args) {
+ String s = Base64Util.encodeToString(("我搜搜").getBytes());
+ System.out.println(s);
+
+ byte[] decode = Base64Util.decode(s);
+ System.out.println(new String(decode));
+
+ }
+}
diff --git a/src/main/java/xyz/wbsite/framework/utils/CookieUtil.java b/src/main/java/xyz/wbsite/framework/utils/CookieUtil.java
new file mode 100644
index 0000000..66aadd0
--- /dev/null
+++ b/src/main/java/xyz/wbsite/framework/utils/CookieUtil.java
@@ -0,0 +1,34 @@
+package xyz.wbsite.framework.utils;
+
+import javax.servlet.http.Cookie;
+
+/**
+ * CookieUtil
+ *
+ * @author wangbing
+ * @version 0.0.1
+ * @since 2017-01-01
+ */
+public class CookieUtil {
+
+ /**
+ * 通过Cookies获取内容
+ *
+ * @param cookies Cookies
+ * @return passportID
+ */
+ public static String getCookieValue(Cookie[] cookies, String key) {
+ if (cookies != null) {
+ for (Cookie cookie : cookies) {
+ // Cookie中存放的为passport的id ，Cookie名称通过ConfigToolObject获取
+ if (cookie != null && cookie.getName().equals(key)) {
+ try {
+ return cookie.getValue();
+ } catch (Exception ignored) {
+ }
+ }
+ }
+ }
+ return null;
+ }
+}
diff --git a/src/main/java/xyz/wbsite/framework/utils/IDgenerator.java b/src/main/java/xyz/wbsite/framework/utils/IDgenerator.java
new file mode 100644
index 0000000..56d7eb2
--- /dev/null
+++ b/src/main/java/xyz/wbsite/framework/utils/IDgenerator.java
@@ -0,0 +1,80 @@
+package xyz.wbsite.framework.utils;
+
+import java.io.BufferedReader;
+import java.io.IOException;
+import java.io.InputStreamReader;
+
+/**
+ * IDgenerator - ID生成器
+ *
+ * @author wangbing
+ * @version 0.0.1
+ * @since 2017-01-01
+ */
+public class IDgenerator {
+
+ private static long workerId = 1L;
+ private static long datacenterId = 1L;
+ private static long sequence = 0L;
+ // 时间起始标记点，作为基准，一般取系统的最近时间（一旦确定不能变动）
+ private static long twepoch = 1531130104852L;
+ // 机器标识位数
+ private static long workerIdBits = 2L;//分布应用可设置为5，这里减少占位增加可支持时间
+ // 数据中心标识位数
+ private static long datacenterIdBits = 2L;//分布应用可设置为5，这里减少占位增加可支持时间
+ // 机器ID最大值
+ private static long maxWorkerId = -1L ^ (-1L << workerIdBits);
+ // 数据中心ID最大值
+ private static long maxDatacenterId = -1L ^ (-1L << datacenterIdBits);
+ // 毫秒内自增位
+ private static long sequenceBits = 12L;
+ // 机器ID偏左移12位
+ private static long workerIdShift = sequenceBits;
+ // 数据中心ID左移17位
+ private static long datacenterIdShift = sequenceBits + workerIdBits;
+ // 时间毫秒左移22位
+ private static long timestampLeftShift = sequenceBits + workerIdBits + datacenterIdBits;
+ private static long sequenceMask = -1L ^ (-1L << sequenceBits);
+ // 上次生产id时间戳
+ private static long lastTimestamp = -1L;
+
+ public static synchronized long nextId() {
+ long timestamp = timeGen();
+
+ if (timestamp < lastTimestamp) {
+ throw new RuntimeException(String.format("Clock moved backwards. Refusing to generate id for %d milliseconds", lastTimestamp - timestamp));
+ }
+
+ if (lastTimestamp == timestamp) {
+ sequence = (sequence + 1) & sequenceMask;
+ if (sequence == 0) {
+ timestamp = tilNextMillis(lastTimestamp);
+ }
+ } else {
+ sequence = 0L;
+ }
+
+ lastTimestamp = timestamp;
+
+ return ((timestamp - twepoch) << timestampLeftShift) | (datacenterId << datacenterIdShift) | (workerId << workerIdShift) | sequence;
+ }
+
+ protected static long tilNextMillis(long lastTimestamp) {
+ long timestamp = timeGen();
+ while (timestamp <= lastTimestamp) {
+ timestamp = timeGen();
+ }
+ return timestamp;
+ }
+
+ protected static long timeGen() {
+ return System.currentTimeMillis();
+ }
+
+ public static void main(String[] args) {
+ for (int i = 0; i < 10; i++) {
+ long l = IDgenerator.nextId();
+ System.out.println(l);
+ }
+ }
+}
diff --git a/src/main/java/xyz/wbsite/framework/utils/LocalData.java b/src/main/java/xyz/wbsite/framework/utils/LocalData.java
new file mode 100644
index 0000000..f53eb61
--- /dev/null
+++ b/src/main/java/xyz/wbsite/framework/utils/LocalData.java
@@ -0,0 +1,86 @@
+package xyz.wbsite.framework.utils;
+
+import xyz.wbsite.framework.base.Token;
+import org.springframework.context.ApplicationContext;
+import org.springframework.web.context.request.RequestContextHolder;
+import org.springframework.web.context.request.ServletRequestAttributes;
+import org.springframework.web.context.support.WebApplicationContextUtils;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+/**
+ * LocalData - 本地数据存放类
+ *
+ * @author wangbing
+ * @version 0.0.1
+ * @since 2017-01-01
+ */
+public class LocalData {
+ private static final long serialVersionUID = 1L;
+
+ private static Token temp = null;
+
+ private static Token system = null;
+
+ static {
+ temp = new Token();
+ temp.setId(-1);
+ temp.setUserId(-1);
+ temp.setUserName("游客");
+ temp.putResource("/ajax");
+ temp.putResource("/upload");
+ temp.putResource("ajax.example.example");
+ system = new Token();
+ system.setId(0);
+ system.setUserId(0);
+ system.setUserName("system");
+ system.putResource(".*");
+ }
+
+ public static Token getTempToken(){
+ return temp;
+ }
+
+ public static Token getSysToken() {
+ return system;
+ }
+
+ /**
+ * 当请求目标 target = '/aa/bb'
+ */
+ private static final ThreadLocal.'),i&&(e.staticClass=JSON.stringify(i));var r=er(e,"class",!1);r&&(e.classBinding=r)},genData:function(e){var t="";return e.staticClass&&(t+="staticClass:"+e.staticClass+","),e.classBinding&&(t+="class:"+e.classBinding+","),t}};var Eo,To={staticKeys:["staticStyle"],transformNode:function(e,t){var n=t.warn||Yi,i=tr(e,"style");i&&(Mo(i,t.delimiters)&&n('style="'+i+'": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of
, use
.'),e.staticStyle=JSON.stringify(yr(i)));var r=er(e,"style",!1);r&&(e.styleBinding=r)},genData:function(e){var t="";return e.staticStyle&&(t+="staticStyle:"+e.staticStyle+","),e.styleBinding&&(t+="style:("+e.styleBinding+"),"),t}},Do=function(e){return(Eo=Eo||document.createElement("div")).innerHTML=e,Eo.textContent},Oo=s("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),Po=s("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),No=s("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),Ao=/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,Io="[a-zA-Z_][\\w\\-\\.]*",Fo="((?:"+Io+"\\:)?"+Io+")",Lo=new RegExp("^<"+Fo),jo=/^\s*(\/?)>/,Ro=new RegExp("^<\\/"+Fo+"[^>]*>"),Bo=/^]+>/i,Vo=/^",""":'"',"&":"&","
":"\n"," ":"\t"},Uo=/&(?:lt|gt|quot|amp);/g,Yo=/&(?:lt|gt|quot|amp|#10|#9);/g,Go=s("pre,textarea",!0),Xo=function(e,t){return e&&Go(e)&&"\n"===t[0]};var Jo,Zo,Qo,ea,ta,na,ia,ra,oa=/^@|^v-on:/,aa=/^v-|^@|^:/,sa=/([^]*?)\s+(?:in|of)\s+([^]*)/,la=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,ua=/^\(|\)$/g,ca=/:(.*)$/,da=/^:|^v-bind:/,fa=/\.[^.]+/g,ha=e(Do);function pa(e,t,n){return{type:1,tag:e,attrsList:t,attrsMap:function(e){for(var t={},n=0,i=e.length;n]*>)","i")),n=r.replace(t,function(e,t,n){return i=n.length,qo(o)||"noscript"===o||(t=t.replace(//g,"$1").replace(//g,"$1")),Xo(o,t)&&(t=t.slice(1)),h.chars&&h.chars(t),""});a+=r.length-n.length,r=n,M(o,a-i,a)}else{var s=r.indexOf("<");if(0===s){if(Vo.test(r)){var l=r.indexOf("--\x3e");if(0<=l){h.shouldKeepComment&&h.comment(r.substring(4,l)),C(l+3);continue}}if(Ho.test(r)){var u=r.indexOf("]>");if(0<=u){C(u+2);continue}}var c=r.match(Bo);if(c){C(c[0].length);continue}var d=r.match(Ro);if(d){var f=a;C(d[0].length),M(d[1],f,a);continue}var b=k();if(b){S(b),Xo(p,r)&&C(1);continue}}var _=void 0,x=void 0,w=void 0;if(0<=s){for(x=r.slice(s);!(Ro.test(x)||Lo.test(x)||Vo.test(x)||Ho.test(x)||(w=x.indexOf("<",1))<0);)s+=w,x=r.slice(s);_=r.substring(0,s),C(s)}s<0&&(_=r,r=""),h.chars&&_&&h.chars(_)}if(r===e){h.chars&&h.chars(r),!m.length&&h.warn&&h.warn('Mal-formatted tag at end of template: "'+r+'"');break}}function C(e){a+=e,r=r.substring(e)}function k(){var e=r.match(Lo);if(e){var t,n,i={tagName:e[1],attrs:[],start:a};for(C(e[0].length);!(t=r.match(jo))&&(n=r.match(Ao));)C(n[0].length),i.attrs.push(n);if(t)return i.unarySlash=t[1],C(t[0].length),i.end=a,i}}function S(e){var t=e.tagName,n=e.unarySlash;v&&("p"===p&&No(t)&&M(p),y(t)&&p===t&&M(t));for(var i,r,o,a=g(t)||!!n,s=e.attrs.length,l=new Array(s),u=0;u has no matching end tag."),h.end&&h.end(m[o].tag,t,n);m.length=i,p=i&&m[i-1].tag}else"br"===r?h.start&&h.start(e,[],!0,t,n):"p"===r&&(h.start&&h.start(e,[],!1,t,n),h.end&&h.end(e,t,n))}M()}(r,{warn:Jo,expectHTML:h.expectHTML,isUnaryTag:h.isUnaryTag,canBeLeftOpenTag:h.canBeLeftOpenTag,shouldDecodeNewlines:h.shouldDecodeNewlines,shouldDecodeNewlinesForHref:h.shouldDecodeNewlinesForHref,shouldKeepComment:h.comments,start:function(e,t,n){var i=m&&m.ns||ra(e);Y&&"svg"===i&&(t=function(e){for(var t=[],n=0;n, as they will not be parsed."));for(var c=0;c as component root element because it may contain multiple nodes."),e.attrsMap.hasOwnProperty("v-for")&&b("Cannot use v-for on stateful component root element because it renders multiple elements.")}if(g||(null!=tr(o=u,"v-pre")&&(o.pre=!0),u.pre&&(g=!0)),na(u.tag)&&(y=!0),g?function(e){var t=e.attrsList.length;if(t)for(var n=e.attrs=new Array(t),i=0;i without corresponding v-if.");else if(u.slotScope){m.plain=!1;var f=u.slotTarget||'"default"';(m.scopedSlots||(m.scopedSlots={}))[f]=u}else m.children.push(u),u.parent=m;n?_(u):(m=u,v.push(u))},end:function(){var e=v[v.length-1],t=e.children[e.children.length-1];t&&3===t.type&&" "===t.text&&!y&&e.children.pop(),v.length-=1,m=v[v.length-1],_(e)},chars:function(e){if(m){if(!Y||"textarea"!==m.tag||m.attrsMap.placeholder!==e){var t,n,i=m.children;if(e=y||e.trim()?"script"===(t=m).tag||"style"===t.tag?e:ha(e):o&&i.length?" ":"")!g&&" "!==e&&(n=Mo(e,Zo))?i.push({type:2,expression:n.expression,tokens:n.tokens,text:e}):" "===e&&i.length&&" "===i[i.length-1].text||i.push({type:3,text:e})}}else e===r?b("Component template requires a root element, rather than just text."):(e=e.trim())&&b('text "'+e+'" outside root element will be ignored.')},comment:function(e){m.children.push({type:3,text:e,isComment:!0})}}),p}function va(e,t){var n,i,r,o;(i=er(n=e,"key"))&&("template"===n.tag&&Jo(" cannot be keyed. Place the key on real elements instead."),n.key=i),e.plain=!e.key&&!e.attrsList.length,(o=er(r=e,"ref"))&&(r.ref=o,r.refInFor=function(e){for(var t=e;t;){if(void 0!==t.for)return!0;t=t.parent}return!1}(r)),function(e){if("slot"===e.tag)e.slotName=er(e,"name"),e.key&&Jo("`key` does not work on because slots are abstract outlets and can possibly expand into multiple elements. Use the key on a wrapping element instead.");else{var t;"template"===e.tag?((t=tr(e,"scope"))&&Jo('the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to to denote scoped slots.',!0),e.slotScope=t||tr(e,"slot-scope")):(t=tr(e,"slot-scope"))&&(e.attrsMap["v-for"]&&Jo("Ambiguous combined usage of slot-scope and v-for on <"+e.tag+"> (v-for takes higher priority). Use a wrapper for the scoped slot to make it clearer.",!0),e.slotScope=t);var n=er(e,"slot");n&&(e.slotTarget='""'===n?'"default"':n,"template"===e.tag||e.slotScope||Ji(e,"slot",n))}}(e),function(e){var t;(t=er(e,"is"))&&(e.component=t);null!=tr(e,"inline-template")&&(e.inlineTemplate=!0)}(e);for(var a=0;a, use
.'),Ji(e,i,JSON.stringify(o)),!e.component&&"muted"===i&&ia(e.tag,e.attrsMap.type,i)&&Xi(e,i,"true")}var f,h,p,m,v,g}(e)}function ga(e){var t;if(t=tr(e,"v-for")){var n=function(e){var t=e.match(sa);if(!t)return;var n={};n.for=t[2].trim();var i=t[1].trim().replace(ua,""),r=i.match(la);r?(n.alias=i.replace(la,""),n.iterator1=r[1].trim(),r[2]&&(n.iterator2=r[2].trim())):n.alias=i;return n}(t);n?w(e,n):Jo("Invalid v-for expression: "+t)}}function ya(e,t){e.ifConditions||(e.ifConditions=[]),e.ifConditions.push(t)}function ba(e){var t=e.match(fa);if(t){var n={};return t.forEach(function(e){n[e.slice(1)]=!0}),n}}var _a=/^xmlns:NS\d+/,xa=/^NS\d+:/;function wa(e,t){for(var n=e;n;)n.for&&n.alias===t&&Jo("<"+e.tag+' v-model="'+t+'">: You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.'),n=n.parent}function Ca(e){return pa(e.tag,e.attrsList.slice(),e.parent)}var ka=[$o,To,{preTransformNode:function(e,t){if("input"===e.tag){var n,i=e.attrsMap;if(!i["v-model"])return;if((i[":type"]||i["v-bind:type"])&&(n=er(e,"type")),i.type||n||!i["v-bind"]||(n="("+i["v-bind"]+").type"),n){var r=tr(e,"v-if",!0),o=r?"&&("+r+")":"",a=null!=tr(e,"v-else",!0),s=tr(e,"v-else-if",!0),l=Ca(e);ga(l),Zi(l,"type","checkbox"),va(l,t),l.processed=!0,l.if="("+n+")==='checkbox'"+o,ya(l,{exp:l.if,block:l});var u=Ca(e);tr(u,"v-for",!0),Zi(u,"type","radio"),va(u,t),ya(l,{exp:"("+n+")==='radio'"+o,block:u});var c=Ca(e);return tr(c,"v-for",!0),Zi(c,":type",n),va(c,t),ya(l,{exp:r,block:c}),a?l.else=!0:s&&(l.elseif=s),l}}}}];var Sa,Ma,$a,Ea={expectHTML:!0,modules:ka,directives:{model:function(e,t,n){zi=n;var i,r,o,a,s,l,u,c,d,f,h,p,m,v,g,y,b=t.value,_=t.modifiers,x=e.tag,w=e.attrsMap.type;if("input"===x&&"file"===w&&zi("<"+e.tag+' v-model="'+b+'" type="file">:\nFile inputs are read only. Use a v-on:change listener instead.'),e.component)return nr(e,b,_),!1;if("select"===x)m=e,v=b,y=(y='var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+((g=_)&&g.number?"_n(val)":"val")+"});")+" "+ir(v,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),Qi(m,"change",y,null,!0);else if("input"===x&&"checkbox"===w)l=e,u=b,d=(c=_)&&c.number,f=er(l,"value")||"null",h=er(l,"true-value")||"true",p=er(l,"false-value")||"false",Xi(l,"checked","Array.isArray("+u+")?_i("+u+","+f+")>-1"+("true"===h?":("+u+")":":_q("+u+","+h+")")),Qi(l,"change","var $$a="+u+",$$el=$event.target,$$c=$$el.checked?("+h+"):("+p+");if(Array.isArray($$a)){var $$v="+(d?"_n("+f+")":f)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+ir(u,"$$a.concat([$$v])")+")}else{$$i>-1&&("+ir(u,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+ir(u,"$$c")+"}",null,!0);else if("input"===x&&"radio"===w)i=e,r=b,a=(o=_)&&o.number,s=er(i,"value")||"null",Xi(i,"checked","_q("+r+","+(s=a?"_n("+s+")":s)+")"),Qi(i,"change",ir(r,s),null,!0);else if("input"===x||"textarea"===x)!function(e,t,n){var i=e.attrsMap.type,r=e.attrsMap["v-bind:value"]||e.attrsMap[":value"],o=e.attrsMap["v-bind:type"]||e.attrsMap[":type"];if(r&&!o){var a=e.attrsMap["v-bind:value"]?"v-bind:value":":value";zi(a+'="'+r+'" conflicts with v-model on the same element because the latter already expands to a value binding internally')}var s=n||{},l=s.lazy,u=s.number,c=s.trim,d=!l&&"range"!==i,f=l?"change":"range"===i?cr:"input",h="$event.target.value";c&&(h="$event.target.value.trim()"),u&&(h="_n("+h+")");var p=ir(t,h);d&&(p="if($event.target.composing)return;"+p),Xi(e,"value","("+t+")"),Qi(e,f,p,null,!0),(c||u)&&Qi(e,"blur","$forceUpdate()")}(e,b,_);else{if(!V.isReservedTag(x))return nr(e,b,_),!1;zi("<"+e.tag+' v-model="'+b+"\">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.")}return!0},text:function(e,t){t.value&&Xi(e,"textContent","_s("+t.value+")")},html:function(e,t){t.value&&Xi(e,"innerHTML","_s("+t.value+")")}},isPreTag:function(e){return"pre"===e},isUnaryTag:Oo,mustUseProp:ei,canBeLeftOpenTag:Po,isReservedTag:pi,getTagNamespace:mi,staticKeys:(Sa=ka,Sa.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(","))},Ta=e(function(e){return s("type,tag,attrsList,attrsMap,plain,parent,children,attrs"+(e?","+e:""))});function Da(e,t){e&&(Ma=Ta(t.staticKeys||""),$a=t.isReservedTag||$,function e(t){t.static=function(e){if(2===e.type)return!1;if(3===e.type)return!0;return!(!e.pre&&(e.hasBindings||e.if||e.for||l(e.tag)||!$a(e.tag)||function(e){for(;e.parent;){if("template"!==(e=e.parent).tag)return!1;if(e.for)return!0}return!1}(e)||!Object.keys(e).every(Ma)))}(t);if(1===t.type){if(!$a(t.tag)&&"slot"!==t.tag&&null==t.attrsMap["inline-template"])return;for(var n=0,i=t.children.length;n|^function\s*\(/,Pa=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,Na={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},Aa={esc:"Escape",tab:"Tab",enter:"Enter",space:" ",up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete"]},Ia=function(e){return"if("+e+")return null;"},Fa={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:Ia("$event.target !== $event.currentTarget"),ctrl:Ia("!$event.ctrlKey"),shift:Ia("!$event.shiftKey"),alt:Ia("!$event.altKey"),meta:Ia("!$event.metaKey"),left:Ia("'button' in $event && $event.button !== 0"),middle:Ia("'button' in $event && $event.button !== 1"),right:Ia("'button' in $event && $event.button !== 2")};function La(e,t,n){var i=t?"nativeOn:{":"on:{";for(var r in e)i+='"'+r+'":'+ja(r,e[r])+",";return i.slice(0,-1)+"}"}function ja(t,e){if(!e)return"function(){}";if(Array.isArray(e))return"["+e.map(function(e){return ja(t,e)}).join(",")+"]";var n=Pa.test(e.value),i=Oa.test(e.value);if(e.modifiers){var r="",o="",a=[];for(var s in e.modifiers)if(Fa[s])o+=Fa[s],Na[s]&&a.push(s);else if("exact"===s){var l=e.modifiers;o+=Ia(["ctrl","shift","alt","meta"].filter(function(e){return!l[e]}).map(function(e){return"$event."+e+"Key"}).join("||"))}else a.push(s);return a.length&&(r+="if(!('button' in $event)&&"+a.map(Ra).join("&&")+")return null;"),o&&(r+=o),"function($event){"+r+(n?"return "+e.value+"($event)":i?"return ("+e.value+")($event)":e.value)+"}"}return n||i?e.value:"function($event){"+e.value+"}"}function Ra(e){var t=parseInt(e,10);if(t)return"$event.keyCode!=="+t;var n=Na[e],i=Aa[e];return"_k($event.keyCode,"+JSON.stringify(e)+","+JSON.stringify(n)+",$event.key,"+JSON.stringify(i)+")"}var Ba={on:function(e,t){t.modifiers&&se("v-on without argument does not support modifiers."),e.wrapListeners=function(e){return"_g("+e+","+t.value+")"}},bind:function(t,n){t.wrapData=function(e){return"_b("+e+",'"+t.tag+"',"+n.value+","+(n.modifiers&&n.modifiers.prop?"true":"false")+(n.modifiers&&n.modifiers.sync?",true":"")+")"}},cloak:k},Va=function(e){this.options=e,this.warn=e.warn||Yi,this.transforms=Gi(e.modules,"transformCode"),this.dataGenFns=Gi(e.modules,"genData"),this.directives=w(w({},Ba),e.directives);var t=e.isReservedTag||$;this.maybeComponent=function(e){return!t(e.tag)},this.onceId=0,this.staticRenderFns=[]};function Ha(e,t){var n=new Va(t);return{render:"with(this){return "+(e?za(e,n):'_c("div")')+"}",staticRenderFns:n.staticRenderFns}}function za(e,t){if(e.staticRoot&&!e.staticProcessed)return qa(e,t);if(e.once&&!e.onceProcessed)return Wa(e,t);if(e.for&&!e.forProcessed)return function(e,t,n,i){var r=e.for,o=e.alias,a=e.iterator1?","+e.iterator1:"",s=e.iterator2?","+e.iterator2:"";t.maybeComponent(e)&&"slot"!==e.tag&&"template"!==e.tag&&!e.key&&t.warn("<"+e.tag+' v-for="'+o+" in "+r+'">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.',!0);return e.forProcessed=!0,(i||"_l")+"(("+r+"),function("+o+a+s+"){return "+(n||za)(e,t)+"})"}(e,t);if(e.if&&!e.ifProcessed)return Ka(e,t);if("template"!==e.tag||e.slotTarget){if("slot"===e.tag)return function(e,t){var n=e.slotName||'"default"',i=Ga(e,t),r="_t("+n+(i?","+i:""),o=e.attrs&&"{"+e.attrs.map(function(e){return b(e.name)+":"+e.value}).join(",")+"}",a=e.attrsMap["v-bind"];!o&&!a||i||(r+=",null");o&&(r+=","+o);a&&(r+=(o?"":",null")+","+a);return r+")"}(e,t);var n;if(e.component)a=e.component,l=t,u=(s=e).inlineTemplate?null:Ga(s,l,!0),n="_c("+a+","+Ua(s,l)+(u?","+u:"")+")";else{var i=e.plain?void 0:Ua(e,t),r=e.inlineTemplate?null:Ga(e,t,!0);n="_c('"+e.tag+"'"+(i?","+i:"")+(r?","+r:"")+")"}for(var o=0;o or - mount to normal elements instead."),this;var n=this.$options;if(!n.render){var i=n.template;if(i)if("string"==typeof i)"#"===i.charAt(0)&&((i=ms(i))||se("Template element not found or is empty: "+n.template,this));else{if(!i.nodeType)return se("invalid template option:"+i,this),this;i=i.innerHTML}else e&&(i=function(e){{if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}}(e));if(i){V.performance&&ot&&ot("compile");var r=ds(i,{shouldDecodeNewlines:hs,shouldDecodeNewlinesForHref:ps,delimiters:n.delimiters,comments:n.comments},this),o=r.render,a=r.staticRenderFns;n.render=o,n.staticRenderFns=a,V.performance&&ot&&(ot("compile end"),at("vue "+this._name+" compile","compile","compile end"))}}return vs.call(this,e,t)},Vn.compile=ds,Vn}),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueRouter=t()}(this,function(){"use strict";function g(e,t){if(!e)throw new Error("[vue-router] "+t)}function y(e,t){e||"undefined"!=typeof console&&console.warn("[vue-router] "+t)}function h(e){return-1=t.length?i():t[e]?n(t[e],function(){r(e+1)}):r(e+1)};r(0)}function fe(n){return function(e,t,l){var u=!1,c=0,d=null;he(n,function(n,e,i,r){if("function"==typeof n&&void 0===n.cid){u=!0,c++;var t,o=ve(function(e){var t;((t=e).__esModule||me&&"Module"===t[Symbol.toStringTag])&&(e=e.default),n.resolved="function"==typeof e?e:M.extend(e),i.components[r]=e,--c<=0&&l()}),a=ve(function(e){var t="Failed to resolve async component "+r+": "+e;y(!1,t),d||(d=h(e)?e:new Error(t),l(d))});try{t=n(o,a)}catch(e){a(e)}if(t)if("function"==typeof t.then)t.then(o,a);else{var s=t.component;s&&"function"==typeof s.then&&s.then(o,a)}}}),u||l()}}function he(e,n){return pe(e.map(function(t){return Object.keys(t.components).map(function(e){return n(t.components[e],t.instances[e],t,e)})}))}function pe(e){return Array.prototype.concat.apply([],e)}var me="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function ve(n){var i=!1;return function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];if(!i)return i=!0,n.apply(this,e)}}var ge=function(e,t){this.router=e,this.base=function(e){if(!e)if(b){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=u,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ye(e,o,a,t){var n=he(e,function(e,t,n,i){var r=function(e,t){"function"!=typeof e&&(e=M.extend(e));return e.options[t]}(e,o);if(r)return Array.isArray(r)?r.map(function(e){return a(e,t,n,i)}):a(r,t,n,i)});return pe(t?n.reverse():n)}function be(e,t){if(t)return function(){return e.apply(t,arguments)}}ge.prototype.listen=function(e){this.cb=e},ge.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},ge.prototype.onError=function(e){this.errorCbs.push(e)},ge.prototype.transitionTo=function(e,t,n){var i=this,r=this.router.match(e,this.current);this.confirmTransition(r,function(){i.updateRoute(r),t&&t(r),i.ensureURL(),i.ready||(i.ready=!0,i.readyCbs.forEach(function(e){e(r)}))},function(t){n&&n(t),t&&!i.ready&&(i.ready=!0,i.readyErrorCbs.forEach(function(e){e(t)}))})},ge.prototype.confirmTransition=function(n,t,e){var i=this,r=this.current,o=function(t){h(t)&&(i.errorCbs.length?i.errorCbs.forEach(function(e){e(t)}):(y(!1,"uncaught error during route navigation:"),console.error(t))),e&&e(t)};if(S(n,r)&&n.matched.length===r.matched.length)return this.ensureURL(),o();var a=function(e,t){var n,i=Math.max(e.length,t.length);for(n=0;n=this.stack.length)){var i=this.stack[n];this.confirmTransition(i,function(){t.index=n,t.updateRoute(i)})}},e.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},e.prototype.ensureURL=function(){},e}(ge),Te=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=U(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!re&&!1!==e.fallback,this.fallback&&(t="hash"),b||(t="abstract"),this.mode=t){case"history":this.history=new _e(this,e.base);break;case"hash":this.history=new we(this,e.base,this.fallback);break;case"abstract":this.history=new Ee(this,e.base);break;default:g(!1,"invalid mode: "+t)}},De={currentRoute:{configurable:!0}};function Oe(t,n){return t.push(n),function(){var e=t.indexOf(n);-1=e[0]&&r<=e[1]}))return e;var a=o[0][0],s=o[0][0];return o.forEach(function(e){a=new Date(Math.min(e[0],a)),s=new Date(Math.max(e[1],a))}),m(r=t.length)break;r=t[i++]}else{if((i=t.next()).done)break;r=i.value}var o=r.target.__resizeListeners__||[];o.length&&o.forEach(function(e){e()})}};t.addResizeListener=function(e,t){a||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new o.default(s),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},t.removeResizeListener=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){var i=n(80),r=n(57);e.exports=Object.keys||function(e){return i(e,r)}},function(e,t,n){"use strict";t.__esModule=!0,t.default=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}}},function(e,t,n){"use strict";t.__esModule=!0;var i,r=n(116),o=(i=r)&&i.__esModule?i:{default:i};o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,n){"use strict";t.__esModule=!0;var i=n(3),r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){(0,i.addClass)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){(0,i.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&((0,i.addClass)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){(0,i.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}();t.default={name:"ElCollapseTransition",functional:!0,render:function(e,t){var n=t.children;return e("transition",{on:new r},n)}}},function(e,t,n){"use strict";t.__esModule=!0;var i,r=n(166),o=(i=r)&&i.__esModule?i:{default:i};o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,n){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.isVNode=function(e){return null!==e&&"object"===(void 0===e?"undefined":i(e))&&(0,r.hasOwn)(e,"componentOptions")},t.getFirstComponentChild=function(e){return e&&e.filter(function(e){return e&&e.tag})[0]};var r=n(6)},function(e,t){var n=e.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(e,t,n){var i=n(37);e.exports=function(e){if(!i(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t){var n=0,i=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+i).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var r=i(n(295)),o=i(n(307)),a="function"==typeof o.default&&"symbol"==typeof r.default?function(e){return typeof e}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":typeof e};t.default="function"==typeof o.default&&"symbol"===a(r.default)?function(e){return void 0===e?"undefined":a(e)}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":void 0===e?"undefined":a(e)}},function(e,t,n){"use strict";t.__esModule=!0;var i=t.NODE_KEY="$treeNodeId";t.markNodeData=function(e,t){t&&!t[i]&&Object.defineProperty(t,i,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},t.getNodeKey=function(e,t){return e?t[e]:t[i]},t.findNearestComponent=function(e,t){for(var n=e;n&&"BODY"!==n.tagName;){if(n.__vue__&&n.__vue__.$options.name===t)return n.__vue__;n=n.parentNode}return null}},function(e,t,n){"use strict";t.__esModule=!0,t.isDef=function(e){return null!=e},t.isKorean=function(e){return/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(e)}},function(e,t,n){"use strict";t.__esModule=!0,t.default=function(){if(o.default.prototype.$isServer)return 0;if(void 0!==a)return a;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var n=document.createElement("div");n.style.width="100%",e.appendChild(n);var i=n.offsetWidth;return e.parentNode.removeChild(e),a=t-i};var i,r=n(2),o=(i=r)&&i.__esModule?i:{default:i},a=void 0},function(e,t,n){"use strict";t.__esModule=!0,t.default=function(e,t){if(!l.default.prototype.$isServer){if(!t)return void(e.scrollTop=0);for(var n=[],i=t.offsetParent;i&&e!==i&&e.contains(i);)n.push(i),i=i.offsetParent;var r=t.offsetTop+n.reduce(function(e,t){return e+t.offsetTop},0),o=r+t.offsetHeight,a=e.scrollTop,s=a+e.clientHeight;r col");if(e.length){var t=this.tableLayout.getFlattenColumns(),n={};t.forEach(function(e){n[e.id]=e});for(var i=0,r=e.length;i col[name=gutter]"),n=0,i=t.length;nt.key[n])return 1}return 0}(e,t);return n||(n=e.index-t.index),n*r}).map(function(e){return e.value})},t.getColumnById=function(e,t){var n=null;return e.columns.forEach(function(e){e.id===t&&(n=e)}),n});t.getColumnByCell=function(e,t){var n=(t.className||"").match(/el-table_[^\s]+/gm);return n?r(e,n[0]):null},t.getRowIdentity=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var n=t.split("."),i=e,r=0;rr;)a(i,n=t[r++])&&(~l(o,n)||o.push(n));return o}},function(e,t,n){var i=n(82);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==i(e)?e.split(""):Object(e)}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var i=n(53);e.exports=function(e){return Object(i(e))}},function(e,t,n){"use strict";var b=n(59),_=n(51),x=n(85),w=n(22),C=n(20),k=n(60),S=n(299),M=n(61),$=n(302),E=n(25)("iterator"),T=!([].keys&&"next"in[].keys()),D=function(){return this};e.exports=function(e,t,n,i,r,o,a){S(n,t,i);var s,l,u,c=function(e){if(!T&&e in p)return p[e];switch(e){case"keys":case"values":return function(){return new n(this,e)}}return function(){return new n(this,e)}},d=t+" Iterator",f="values"==r,h=!1,p=e.prototype,m=p[E]||p["@@iterator"]||r&&p[r],v=m||c(r),g=r?f?c("entries"):v:void 0,y="Array"==t&&p.entries||m;if(y&&(u=$(y.call(new e)))!==Object.prototype&&(M(u,d,!0),b||C(u,E)||w(u,E,D)),f&&m&&"values"!==m.name&&(h=!0,v=function(){return m.call(this)}),b&&!a||!T&&!h&&p[E]||w(p,E,v),k[t]=v,k[d]=D,r)if(s={values:f?v:c("values"),keys:o?v:c("keys"),entries:g},a)for(l in s)l in p||x(p,l,s[l]);else _(_.P+_.F*(T||h),t,s);return s}},function(e,t,n){e.exports=n(22)},function(e,t,i){var r=i(36),o=i(300),a=i(57),s=i(55)("IE_PROTO"),l=function(){},u=function(){var e,t=i(79)("iframe"),n=a.length;for(t.style.display="none",i(301).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("
+
+
+404
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/templates/500.ftl b/src/main/resources/templates/500.ftl
new file mode 100644
index 0000000..120de0f
--- /dev/null
+++ b/src/main/resources/templates/500.ftl
@@ -0,0 +1,40 @@
+
+
+
+
+
+文件管理
+
+
+
+
+
+
+<#include Layout.setScreen()/>
+
diff --git a/src/main/resources/templates/layout/wap.ftl b/src/main/resources/templates/layout/wap.ftl
new file mode 100644
index 0000000..46e8b63
--- /dev/null
+++ b/src/main/resources/templates/layout/wap.ftl
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Mint UI
+
+
+
+
+
+
+
+ debug级别及以上
+
+ DEBUG
+
+
+ %highlight(%d{yyyy-MM-dd HH:mm:ss.SSS} [%-4level] [%thread] [%logger{36}-%method] %ex %msg%n)
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/templates/404.ftl b/src/main/resources/templates/404.ftl
new file mode 100644
index 0000000..8de2c9e
--- /dev/null
+++ b/src/main/resources/templates/404.ftl
@@ -0,0 +1,1696 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+403
+
+
+
+ 立即跳转
+
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/templates/control/footer.ftl b/src/main/resources/templates/control/footer.ftl
new file mode 100644
index 0000000..99ee1a7
--- /dev/null
+++ b/src/main/resources/templates/control/footer.ftl
@@ -0,0 +1,5 @@
++ ${msg} +
+
+
+
+
diff --git a/src/main/resources/templates/control/header.ftl b/src/main/resources/templates/control/header.ftl
new file mode 100644
index 0000000..bf5115c
--- /dev/null
+++ b/src/main/resources/templates/control/header.ftl
@@ -0,0 +1,119 @@
+------------------------------this is footer html------------------------------
+
+
+
diff --git a/src/main/resources/templates/control/macro.ftl b/src/main/resources/templates/control/macro.ftl
new file mode 100644
index 0000000..2a92c3c
--- /dev/null
+++ b/src/main/resources/templates/control/macro.ftl
@@ -0,0 +1,63 @@
+<#macro print items >
+<#nested>:
+ <#list items as item>
+ ${item}
+
+
+<#--
+ 参数说明：
+ pageNumber：当前的页码
+ pageSize：页码大小
+ totalCount：总数
+ showPages：显示的页码个数
+ callback：回调函数
+-->
+<#macro page pageNumber pageSize totalCount showPages callback>
+<#if totalCount gt 0>
+
+ })
+
+
+ Home
+
+
+
+
+ <#assign totalPage = 0/>
+ <#assign totalPage = (totalCount/pageSize)?ceiling/>
+ <#if pageNumber==1>
+ 首页
+ 上一页
+
+ <#if pageNumber!=1>
+ 首页
+ 上一页
+
+ <#if pageNumber-showPages/2 gt 0>
+ <#assign start = pageNumber-(showPages-1)/2/>
+ <#if showPages gt totalPage>
+ <#assign start = 1/>
+
+ <#else>
+ <#assign start = 1/>
+
+ <#if totalPage gt showPages>
+ <#assign end = (start+showPages-1)/>
+ <#if end gt totalPage>
+ <#assign start = totalPage-showPages+1/>
+ <#assign end = totalPage/>
+
+ <#else>
+ <#assign end = totalPage/>
+
+ <#assign pages=start..end/>
+ <#list pages as page>
+ <#if page==pageNumber>
+ ${page}
+ <#else>
+ ${page}
+
+
+ <#if pageNumber==totalPage>
+ 下一页
+ 尾页
+
+ <#if pageNumber!=totalPage>
+ 下一页
+ 尾页
+
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/templates/control/nav.ftl b/src/main/resources/templates/control/nav.ftl
new file mode 100644
index 0000000..4e4069e
--- /dev/null
+++ b/src/main/resources/templates/control/nav.ftl
@@ -0,0 +1,233 @@
+
\ No newline at end of file
diff --git a/src/main/resources/templates/layout/default.ftl b/src/main/resources/templates/layout/default.ftl
new file mode 100644
index 0000000..a539d36
--- /dev/null
+++ b/src/main/resources/templates/layout/default.ftl
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
diff --git a/src/main/resources/templates/layout/up.ftl b/src/main/resources/templates/layout/up.ftl
new file mode 100644
index 0000000..a86dc75
--- /dev/null
+++ b/src/main/resources/templates/layout/up.ftl
@@ -0,0 +1,12 @@
+
+
+
+
+ <#include Layout.setControl("header")/>
+
+
+ <#include Layout.setScreen()/>
+
+
+ 首页
+ next
+
+
+
+
+home
+next
+
+
+
+
+
+
diff --git a/src/main/resources/templates/screen/demo.ftl b/src/main/resources/templates/screen/demo.ftl
new file mode 100644
index 0000000..40d791b
--- /dev/null
+++ b/src/main/resources/templates/screen/demo.ftl
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/src/main/resources/templates/screen/index.ftl b/src/main/resources/templates/screen/index.ftl
new file mode 100644
index 0000000..c69a00d
--- /dev/null
+++ b/src/main/resources/templates/screen/index.ftl
@@ -0,0 +1,6575 @@
+
+
+
+
+
+
+
+
+
+
+
+ DEMO
+
+
+ Ajax接口调用
+ 小吐司、通知
+
+
+
+
+
+ Freemarker使用
+
+
+ 基础部分
+ 介绍说明
+ 占位输出
+ 条件输出
+ 遍历集合
+
+
+ 宏指令
+ import指令
+ include指令
+
+
+
+
+
+ Vue.js
+
+
+
+ 基础部分
+ 入门介绍
+
+
+ Other
+ 解决页面初始化前闪现源代码
+
+
+
+
+
+ ElementUI
+
+
+ 入门介绍
+ 内置过渡动画
+ Layout布局
+ Container 布局容器
+ Color 色彩
+ Typography 字体
+ Icon 图标
+
+ Button 按钮
+ Upload 上传
+ Form 表单
+ Table 表格
+ Pagination 分页
+
+
+ Tooltip 文字提示
+ Popover 弹出框
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 介绍说明
+ +Freemarker 是一款模板引擎，是一种基于模版生成静态文件的通用 + 工具，它是为Java程序员提供的一个开发包，或者说是一个类库，它不是面向最终用户的，而是为程序员提供了一款可以嵌入他们开发产品的应用程序。
+ +Freemarker 是使用纯java编写的，为了提高页面的访问速度，需要把页面静态化， 那么Freemarker就是被用来生成html页面。
+ +前提条件
+ +本工程使用的Freemarker整合了Spring MVC， 与你需要了解或熟悉Spring MVC框架。如果你熟悉EL表达，将有助于该工程Freemarker的使用。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常输出
+ +
+ 【用法】
+
+ ${r'${hello}'}
+
+ 【效果】
+
+
+ ${hello}
+
+ 输出HTML标签
+ +
+ 【用法】
+
+
+ ${r"${'<a>a标签</a>'?html}"}
+
+
+ 【效果】
+
+
+ ${'a标签'?html}
+
+ 输出带$表达式
+ +
+ 【用法】
+
+
+ ${r"${r'${hello}'}"}
+
+
+ 【效果】
+
+
+ ${r'${hello}'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ if else 组合
+ +
+ 【用法】
+
+ ${'<#if status == 0>'}
+ +status is 0
+ +${'<#else>'}
+ +status is not 0
+ +${'</#if>'}
+
+ 【效果】
+
+
+ <#if status == 0>
+ status is 0
+ <#else>
+ status is not 0
+
+
+ if elseif else 组合
+
+ 【用法】
+
+ ${'<#if status == 0>'}
+ +status is 0
+ +${'<#elseif status ==1>'}
+ +status = 1
+ +${'<#else>'}
+ +status != 0 && status !=1
+ +${'</#if>'}
+
+ 【效果】
+
+
+ <#if status ==0 >
+ status = 0
+ <#elseif status ==1>
+ status = 1
+ <#else>
+ status != 0 && status !=1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 遍历集合Foreach
+
+ 【用法】
+
+ ${'<#list citys as city>'}
+ +${r'${city}'}
+ +${'</#list>'}
+
+ 【效果】
+
+
+ <#list citys as city>
+ ${city}
+
+
+ Foreach获得索引
+
+ 【用法】
+
+ ${'<#list citys as city>'}
+ +${r' ${city_index} --> ${city}'}
+ +${'</#list>'}
+
+ 【效果】
+
+
+ <#list citys as city>
+ ${city_index} --> ${city}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 定义宏方法及用法
+
+ 【定义】
+
+ ${'<#macro sayHello name1 name2>'}
+ +${r'hello, ${name1} and ${name2}'}
+ +${r'</#macro>'}
+ +-----------------
+ +${r'<@sayHello name1="zhangsan" name2="lisi"/>'}
+ +
+ 【效果】
+
+ hello, zhangsan and lisi
+ +nested 指令
+ +代替调用宏指令时标签对之间包裹的内容
+ +
+ 【定义及用法】
+
+ ${r'<#macro hw>'}
+ +${r'hello,<#nested>'}
+ +${r'</#macro>'}
+ + + +${r'<@hw>zhangsan,lisi,wangwu,zhaoliu<<@hw>'}
+ +定义宏完整示意
+
+ 【定义】
+
+ ${'<#macro print items >'}
+ +${r'<#nested>:'}
+ +${r'<#list items as item>'}
+ +${''?html}${r'${item}'?html}${''?html}
+ +${'</#list>'}
+ +${'</#macro>'}
+
+ 【用法】
+
+
+
+ ${'<@print items=["A","B","C"]>'}
+ +items is
+ +${'</@print>'}
+
+ 【效果】
+
+
+ <#--<@print items=["A","B","C"]>-->
+ <#--items is-->
+ <#---->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ import指令
+
+ 【用法】
+
+
+
+ + ${r'<#import "/control/macro.ftl"/>'} +
+引入命名空间
+
+ 【用法】
+
+
+
+ + ${r'<#import "/control/macro.ftl" as macro/>'} +
+调用变量
+
+ 【用法】
+
+
+
+ + ${r'${macro.fileName}'} +
+调用方法
+
+ 【用法】
+
+
+
+ + ${r'<@macro.printEmp employee/>'} +
+修改变量
+
+ 【用法】
+
+
+
+ + ${r'<#assign fileName = "command.ftl" in util />'} +
+
+
+
+
+
+
+
+ include 嵌入文件
+ +
+ 【用法】
+
+
+
+ + ${r'<#include "/control/footer.ftl" />'} +
+
+
+
+
+
+ 介绍说明
+ +Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， + Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或 + 既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
+
+
+
+
+
+
+
+
+
+ 解决办法
+
+ 【CSS中添加样式】
+
+
+
+ ${''?html} +
+
+ 【视图中调用】
+
+
+
+ ${'
'?html}
+
+
'?html}
+
+ ${'...'?html} + +
${'
+
+
+
+
+
+
+
+
+
+
+ 设计原则
+ +一致性 Consistency
+ +-
+
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； +
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 +
反馈 Feedback
+-
+
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； +
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 +
效率 Efficiency
+ +-
+
- 简化流程：设计简洁直观的操作流程； +
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； +
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 +
可控 Controllability
+ +-
+
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策； +
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。 +
本项目使用
+ +
+ CDN引入
+
+
+
+ ${''?html}
+ +${''?html}
+ +${''?html}
+ +${''?html}
+
+ 项目本地引入
+
+
+
+ ${''?html}
+ +${''}
+ +${''?html}
+ +${'"?html}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内置过渡动画
+ + +
+ fade 淡入淡出
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
+
+ .el-fade-in-linear
+ .el-fade-in
+
+ zoom 缩放
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .el-zoom-in-center
+ .el-zoom-in-top
+ .el-zoom-in-bottom
+
+ collapse 展开折叠
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
+ el-collapse-transition
+ el-collapse-transition
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 【基础布局】
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 【分栏间隔】
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 【混合布局】
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 【分栏偏移】
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 【对齐方式】
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 【响应式布局】
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 包含的类名及其含义为：
+ +-
+
hidden-xs-only- 当视口在xs尺寸时隐藏
+ hidden-sm-only- 当视口在sm尺寸时隐藏
+ hidden-sm-and-down- 当视口在sm及以下尺寸时隐藏
+ hidden-sm-and-up- 当视口在sm及以上尺寸时隐藏
+ hidden-md-only- 当视口在md尺寸时隐藏
+ hidden-md-and-down- 当视口在md及以下尺寸时隐藏
+ hidden-md-and-up- 当视口在md及以上尺寸时隐藏
+ hidden-lg-only- 当视口在lg尺寸时隐藏
+ hidden-lg-and-down- 当视口在lg及以下尺寸时隐藏
+ hidden-lg-and-up- 当视口在lg及以上尺寸时隐藏
+ hidden-xl-only- 当视口在xl尺寸时隐藏
+
Row Attributes
+ +| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| gutter | +栅格间隔 | +number | +— | +0 | +
| type | +布局模式，可选 flex，现代浏览器下有效 | +string | +— | +— | +
| justify | +flex 布局下的水平排列方式 | +string | +start/end/center/space-around/space-between | +start | +
| align | +flex 布局下的垂直排列方式 | +string | +top/middle/bottom | +top | +
| tag | +自定义元素标签 | +string | +* | +div | +
Col Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| span | +栅格占据的列数 | +number | +— | +24 | +
| offset | +栅格左侧的间隔格数 | +number | +— | +0 | +
| push | +栅格向右移动格数 | +number | +— | +0 | +
| pull | +栅格向左移动格数 | +number | +— | +0 | +
| xs | +<768px 响应式栅格数或者栅格属性对象 |
+ number/object (例如： {span: 4, offset: 4}) | +— | +— | +
| sm | +≥768px 响应式栅格数或者栅格属性对象 |
+ number/object (例如： {span: 4, offset: 4}) | +— | +— | +
| md | +≥992px 响应式栅格数或者栅格属性对象 |
+ number/object (例如： {span: 4, offset: 4}) | +— | +— | +
| lg | +≥1200px 响应式栅格数或者栅格属性对象 |
+ number/object (例如： {span: 4, offset: 4}) | +— | +— | +
| xl | +≥1920px 响应式栅格数或者栅格属性对象 |
+ number/object (例如： {span: 4, offset: 4}) | +— | +— | +
| tag | +自定义元素标签 | +string | +* | +div | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Container 布局容器
+ +用于布局的容器组件，方便快速搭建页面的基本结构：
+ +<el-container>：外层容器。当子元素中包含 <el-header> 或
+ <el-footer>
+ 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
+ 【常见页面布局】
+
+
+
+
+ Header
+ Main
+
+
+
+ Header
+ Main
+ Footer
+
+
+
+ Aside
+ Main
+
+
+
+ Header
+
+ Aside
+ Main
+
+
+
+
+ Header
+
+
+ Aside
+
+
+ Main
+ Footer
+
+
+
+
+
+
+ Aside
+
+
+ Header
+ Main
+
+
+
+
+
+ Aside
+
+
+ Header
+ Main
+ Footer
+
+
+
+
+ Container Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| direction | +子元素的排列方向 | +string | +horizontal / vertical | +子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal
+ |
+
Header Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| height | +顶栏高度 | +string | +— | +60px | +
Aside Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| width | +侧边栏宽度 | +string | +— | +300px | +
Footer Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| height | +底栏高度 | +string | +— | +60px | +
+
+
+
+
+
+ 代码
+
+
+
+
+
+
+
+
+ 代码
+
+
+
+
+
+
+
+
+ 代码
+
+
+
+
+
+
+
+
+ 主色
+
+ Element 主要品牌颜色是鲜艳、友好的蓝色。
+
+
+
+
+
+ bg-blue
+
+
+ Blue
+
+ #409EFF
+ CSS 样式:bg-blue
+
+ 辅助色
+
+ 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Success
+
+ #67C23A
+ Warning
+
+ #E6A23C
+ Danger
+
+ #F56C6C
+ Info
+
+ #909399
+ CSS 样式:bg-success，bg-warning，bg-danger，bg-info
+
+ 中性色
+
+ 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 主要文字
+
+ #303133
+ 常规文字
+
+ #606266
+ 次要文字
+
+ #909399
+ 占位文字
+
+ #C0C4CC
+
+
+ 一级边框
+
+ #DCDFE6
+ 二级边框
+
+ #E4E7ED
+ 三级边框
+
+ #EBEEF5
+ 四级边框
+
+ #F2F6FC
+ CSS 文字颜色:.text-color-primary + ，.text-color-regular，.text-color-secondary，.text-color-placeholder
+ +CSS + 边框颜色:.bg-border-base，.bg-border-light，.bg-border-lighter，.bg-border-extra-light
+
+
+
+
+
+
+
+
+ Typography 字体
+ +我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
+ +中文字体
+ +
+ 和畅惠风
+
+ PingFang SC
+
+ 和畅惠风
+
+ Hiragino Sans GB
+
+ 和畅惠风
+
+ Microsoft YaHei
+ 英文／数字字体
+ +
+ RGag
+
+ Helvetica Neue
+
+ RGag
+
+ Helvetica
+
+ RGag
+
+ Arial
+ Font-family 代码
+ +
+ font-family: "
+ Helvetica Neue",
+ Helvetica,"
+ PingFang
+ SC","
+ Hiragino
+ Sans
+ GB","
+ Microsoft
+ YaHei","微软雅黑",
+ Arial,
+ sans-serif;
+
+
+ 字体使用规范
+| 主标题 | +用 Element 快速搭建页面 | +20px Extra large | +
| 标题 | +用 Element 快速搭建页面 | +18px large | +
| 小标题 | +用 Element 快速搭建页面 | +16px Medium | +
| 正文 | +用 Element 快速搭建页面 | +14px Small | +
| 正文（小） | +用 Element 快速搭建页面 | +13px Extra Small | +
| 辅助文字 | +用 Element 快速搭建页面 | +12px Extra Extra Small | +
+
+
+
+
+
+
+
+ Icon 图标
+ +提供了一套常用的图标集合。
+ +使用方法
+ +直接通过设置类名为 el-icon-iconName 来使用即可。例如：
+ 【效果】
+
+
+
+
+
+ 搜索
+
+ 图标集合
+ +-
+
- el-icon-info + +
- el-icon-error + +
- el-icon-success +
- el-icon-warning +
- el-icon-question +
- el-icon-back + +
- el-icon-arrow-left +
- el-icon-arrow-down +
- el-icon-arrow-right +
- el-icon-arrow-up +
- el-icon-caret-left +
- el-icon-caret-bottom + +
- el-icon-caret-top + +
- el-icon-caret-right +
- el-icon-d-arrow-left + +
- el-icon-d-arrow-right + +
- el-icon-minus + +
- el-icon-plus + +
- el-icon-remove + +
- el-icon-circle-plus +
- el-icon-remove-outline + +
- el-icon-circle-plus-outline +
- el-icon-close + +
- el-icon-check + +
- el-icon-circle-close + +
- el-icon-circle-check + +
- el-icon-circle-close-outline +
- el-icon-circle-check-outline +
- el-icon-zoom-out +
- el-icon-zoom-in +
- el-icon-d-caret +
- el-icon-sort + +
- el-icon-sort-down + +
- el-icon-sort-up +
- el-icon-tickets +
- el-icon-document +
- el-icon-goods + +
- el-icon-sold-out +
- el-icon-news + +
- el-icon-message +
- el-icon-date + +
- el-icon-printer +
- el-icon-time + +
- el-icon-bell + +
- el-icon-mobile-phone + +
- el-icon-service +
- el-icon-view + +
- el-icon-menu + +
- el-icon-more + +
- el-icon-more-outline + +
- el-icon-star-on +
- el-icon-star-off +
- el-icon-location +
- el-icon-location-outline +
- el-icon-phone + +
- el-icon-phone-outline + +
- el-icon-picture +
- el-icon-picture-outline +
- el-icon-delete + +
- el-icon-search + +
- el-icon-edit + +
- el-icon-edit-outline + +
- el-icon-rank + +
- el-icon-refresh +
- el-icon-share + +
- el-icon-setting +
- el-icon-upload + +
- el-icon-upload2 +
- el-icon-download +
- el-icon-loading +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Button 按钮
+ + 常用的操作按钮。 + +
+ 【基础用法】
+
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+ 圆角按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
+
+
+
+ 禁用状态
+ 按钮不可用状态。 +
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
+ 文字按钮
+ + 没有边框和背景色的按钮。 +
+ 文字按钮
+ 文字按钮
+
+
+
+ 图标按钮
+ + 带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。 +
+ 搜索
+ 上传
+
+
+
+ 按钮组
+ + 以按钮组的方式出现，常用于多项类似操作。 +
+
+ 上一页
+ 下一页
+
+
+
+
+
+
+
+ 加载中
+ + 点击按钮后进行数据加载操作，在按钮上显示加载状态。 +
+ 加载中
+
+
+
+ 不同尺寸
+ + Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 +
+ 加载中
+
+ Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| size | +尺寸 | +string | +medium / small / mini | +— | +
| type | +类型 | +string | +primary / success / warning / danger / info / text | +— | +
| plain | +是否朴素按钮 | +boolean | +— | +false | +
| round | +是否圆角按钮 | +boolean | +— | +false | +
| circle | +是否圆形按钮 | +boolean | +— | +false | +
| loading | +是否加载中状态 | +boolean | +— | +false | +
| disabled | +是否禁用状态 | +boolean | +— | +false | +
| icon | +图标类名 | +string | +— | +— | +
| autofocus | +是否默认聚焦 | +boolean | +— | +false | +
| native-type | +原生 type 属性 | +string | +button / submit / reset | +button | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upload 上传
+ + 通过点击或者拖拽上传文件 + +
+
+ 点击上传
+
+
+ 点击上传
+
+
+ 只能上传jpg/png文件，且不超过500kb
+
+
+ 用户头像上传
+ + 使用before-upload 限制用户上传的图片格式和大小。
+
+
+ ![]()
+
+
+
+
+
+ 照片墙
+ + 使用list-type 属性来设置文件列表的样式。
+
+
+
+
+
+ ![]()
+
+
+
+
+ 图片列表缩略图
+
+
+ 点击上传
+
+
+ 只能上传jpg/png文件，且不超过500kb
+
+
+ 上传文件列表控制
+ + 通过on-change 钩子函数来对列表进行控制
+
+
+ 点击上传
+
+
+ 只能上传jpg/png文件，且不超过500kb
+
+
+ 拖拽上传
+ + remarks +
+
+
+
+
+
+ 将文件拖到此处，或点击上传
+ 只能上传jpg/png文件，且不超过500kb
+
+
+ 手动上传
+
+
+ 选取文件
+ 上传到服务器
+
+
+
+ 只能上传jpg/png文件，且不超过500kb
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Form 表单
+ + 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 + +
+
+ 典型表单
+ + 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。 +
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 取消
+
+
+
+
+
+ 行内表单
+ + 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 +
+
+
+
+
+
+
+
+
+ 查询
+
+
+
+
+
+ 对齐方式
+ + 根据具体目标和制约因素，选择最佳的标签对齐方式。 +
+
+ 左对齐
+ 右对齐
+ 顶部对齐
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 表单验证
+ + 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。 +
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 重置
+
+
+
+
+
+ 自定义校验规则
+ + 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。 +
+
+
+
+
+
+
+
+
+ 提交
+ 重置
+
+
+
+
+
+ 动态增减表单项
+
+
+
+
+
+ 删除
+
+
+ 提交
+
+ 新增域名
+ 重置
+
+
+
+
+
+ 数字类型验证
+
+
+
+
+
+ 提交
+
+ 重置
+
+
+
+ 嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form
+ 的 label-width。如果需要可以为其单独设置 label-width 属性。
+
+ 表单内组件尺寸控制
+ +通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item
+ 也具有该属性。
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 取消
+
+
+
+ Form Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| model | +表单数据对象 | +object | +— | +— | +
| rules | +表单验证规则 | +object | +— | +— | +
| inline | +行内表单模式 | +boolean | +— | +false | +
| label-position | +表单域标签的位置 | +string | +right/left/top | +right | +
| label-width | +表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | +string | +— | +— | +
| label-suffix | +表单域标签的后缀 | +string | +— | +— | +
| show-message | +是否显示校验错误信息 | +boolean | +— | +true | +
| inline-message | +是否以行内形式展示校验信息 | +boolean | +— | +false | +
| status-icon | +是否在输入框中显示校验结果反馈图标 | +boolean | +— | +false | +
| validate-on-rule-change | +是否在 rules 属性改变后立即触发一次验证 |
+ boolean | +— | +true | +
| size | +用于控制该表单内组件的尺寸 | +string | +medium / small / mini | +— | +
| disabled | +是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | +boolean | +— | +false | +
Form Methods
+| 方法名 | +说明 | +参数 | +
|---|---|---|
| validate | +对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 + promise + | +Function(callback: Function(boolean, object)) | +
| validateField | +对部分表单字段进行校验的方法 | +Function(prop: string, callback: Function(errorMessage: string)) | +
| resetFields | +对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | +— | +
| clearValidate | +移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单的校验结果 | +Function(props: array) | +
Form Events
+| 事件名称 | +说明 | +回调参数 | +
|---|---|---|
| validate | +任一表单项被校验后触发 | +被校验的表单项 prop 值，校验是否通过 | +
Form-Item Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| prop | +表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | +string | +传入 Form 组件的 model 中的字段 |
+ — | +
| label | +标签文本 | +string | +— | +— | +
| label-width | +表单域标签的的宽度，例如 '50px' | +string | +— | +— | +
| required | +是否必填，如不设置，则会根据校验规则自动生成 | +boolean | +— | +false | +
| rules | +表单验证规则 | +object | +— | +— | +
| error | +表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息 |
+ string | +— | +— | +
| show-message | +是否显示校验错误信息 | +boolean | +— | +true | +
| inline-message | +以行内形式展示校验信息 | +boolean | +— | +false | +
| size | +用于控制该表单域下组件的尺寸 | +string | +medium / small / mini | +- | +
Form-Item Slot
+| name | +说明 | +
|---|---|
| — | +Form Item 的内容 | +
| label | +标签文本的内容 | +
Form-Item Methods
+| 方法名 | +说明 | +参数 | +
|---|---|---|
| resetField | +对该表单项进行重置，将其值重置为初始值并移除校验结果 | +- | +
| clearValidate | +移除该表单项的校验结果 | +- | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Table 表格
+ + 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 + +
+
+ 基础表格
+ + 基础的表格展示用法。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 带斑马纹表格
+ + 使用带斑马纹的表格，可以更容易区分出不同行的数据。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 带边框表格
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 默认情况下，Table
+ 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
+
+
+ 固定表头
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 固定列
+ + 横向内容过多时，可选择固定列。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查看
+
+ 编辑
+
+
+
+
+
+
+ 固定列需要使用fixed属性，它接受 Boolean
+ 值或者leftright，表示左边固定还是右边固定。
+
+
+ 固定列和表头
+ + 横纵内容过多时，可选择固定列和表头。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
+
+ 流体高度
+ + 当数据量动态变化时，可以为 Table 设置一个最大高度。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 移除
+
+
+
+
+
+
+ 通过设置max-height属性为 Table
+ 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
+
+ 多级表头
+ + 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
+
+
+ 单选
+ + 选择单行数据时使用色块表示。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从
+ 1 开始的索引号。
+ 选中第二行
+ 取消选择
+
+
+
+
+ 多选
+ + 选择多行数据时使用 Checkbox。 +
+
+
+
+
+
+
+
+ {{ scope.row.date }}
+
+
+
+
+
+
+
+ 实现多选非常简单:
+ 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在
+ hover 时以 tooltip 的形式显示出来。
+
+ 切换第二、第三行的选中状态
+
+ 取消选择
+
+
+
+
+ 排序
+ + 对表格进行排序，可快速查找或对比数据。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过
+ Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在
+ Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
+
+
+ 筛选
+ + 对表格进行筛选，可快速查找到自己想看的数据。 +
+
+
+
+
+
+
+
+
+
+
+
+
+ {{scope.row.tag}}
+
+
+
+
+
+
+
+ 在列中设置filtersfilter-method属性即可开启该列的筛选，filters
+ 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value,
+ row 和 column。
+
+ 自定义列模板
+ + 自定义列的显示内容，可组合其他组件使用。 +
+
+
+
+
+
+
+
+ {{ scope.row.date }}
+
+
+
+
+
+
+
+
+
+
+ 编辑
+
+ 删除
+
+
+
+
+
+
+
+
+ 通过 Scoped slot 可以获取到 row, column, $index 和
+ store（table 内部的状态管理）的数据，用法参考 demo。
姓名: {{ scope.row.name }}
+ +住址: {{ scope.row.address }}
+ +
+ {{ scope.row.name }}
+
+
+
+ 展开行
+ + 当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。 +
+
+
+
+
+
+
+
+
+
+ {{ props.row.name }}
+
+
+ {{ props.row.shop }}
+
+
+ {{ props.row.id }}
+
+
+ {{ props.row.shopId }}
+
+
+ {{ props.row.category }}
+
+
+ {{ props.row.address }}
+
+
+ {{ props.row.desc }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通过设置 type="expand" 和 Scoped slot
+ 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped
+ slot 相同。
+
+ 表尾合计行
+ + 若表格展示的是各类数字，可以在表尾显示各列的合计。 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
+
+
+ 合并行或列
+ + 多行或多列共用一个数据时，可以合并行或列。 +
+
+
+
+
+ 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。
+ 也可以返回一个键名为rowspan和colspan的对象。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义索引
+ + 自定义type=index 列的行号。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通过给 type=index 的列传入 index
+ 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0
+ 开始）作为参数，返回值将作为索引展示。
Table Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| data | +显示的数据 | +array | +— | +— | +
| height | +Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table + 的 style.height 的值，Table 的高度会受控于外部样式。 + | +string/number | +— | +— | +
| max-height | +Table 的最大高度 | +string/number | +— | +— | +
| stripe | +是否为斑马纹 table | +boolean | +— | +false | +
| border | +是否带有纵向边框 | +boolean | +— | +false | +
| size | +Table 的尺寸 | +string | +medium / small / mini | +— | +
| fit | +列的宽度是否自撑开 | +boolean | +— | +true | +
| show-header | +是否显示表头 | +boolean | +— | +true | +
| highlight-current-row | +是否要高亮当前行 | +boolean | +— | +false | +
| current-row-key | +当前行的 key，只写属性 | +String,Number | +— | +— | +
| row-class-name | +行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | +Function({row, rowIndex})/String | +— | +— | +
| row-style | +行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | +Function({row, rowIndex})/Object | +— | +— | +
| cell-class-name | +单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | +Function({row, column, rowIndex, columnIndex})/String | +— | +— | +
| cell-style | +单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | +Function({row, column, rowIndex, columnIndex})/Object | +— | +— | +
| header-row-class-name | +表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | +Function({row, rowIndex})/String | +— | +— | +
| header-row-style | +表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | +Function({row, rowIndex})/Object | +— | +— | +
| header-cell-class-name | +表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | +Function({row, column, rowIndex, columnIndex})/String | +— | +— | +
| header-cell-style | +表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | +Function({row, column, rowIndex, columnIndex})/Object | +— | +— | +
| row-key | +行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String
+ 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
+ |
+ Function(row)/String | +— | +— | +
| empty-text | +空数据时显示的文本内容，也可以通过 slot="empty" 设置 |
+ String | +— | +暂无数据 | +
| default-expand-all | +是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | +Boolean | +— | +false | +
| expand-row-keys | +可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 | +Array | +— | ++ |
| default-sort | +默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 |
+ Object | +order: ascending, descending |
+ 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
+
| tooltip-effect | +tooltip effect 属性 |
+ String | +dark/light | ++ |
| show-summary | +是否在表尾显示合计行 | +Boolean | +— | +false | +
| sum-text | +合计行第一列的文本 | +String | +— | +合计 | +
| summary-method | +自定义的合计计算方法 | +Function({ columns, data }) | +— | +— | +
| span-method | +合并行或列的计算方法 | +Function({ row, column, rowIndex, columnIndex }) | +— | +— | +
| select-on-indeterminate | +在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | +Boolean | +— | +true | +
Table Events
+| 事件名 | +说明 | +参数 | +
|---|---|---|
| select | +当用户手动勾选数据行的 Checkbox 时触发的事件 | +selection, row | +
| select-all | +当用户手动勾选全选 Checkbox 时触发的事件 | +selection | +
| selection-change | +当选择项发生变化时会触发该事件 | +selection | +
| cell-mouse-enter | +当单元格 hover 进入时会触发该事件 | +row, column, cell, event | +
| cell-mouse-leave | +当单元格 hover 退出时会触发该事件 | +row, column, cell, event | +
| cell-click | +当某个单元格被点击时会触发该事件 | +row, column, cell, event | +
| cell-dblclick | +当某个单元格被双击击时会触发该事件 | +row, column, cell, event | +
| row-click | +当某一行被点击时会触发该事件 | +row, event, column | +
| row-contextmenu | +当某一行被鼠标右键点击时会触发该事件 | +row, event | +
| row-dblclick | +当某一行被双击时会触发该事件 | +row, event | +
| header-click | +当某一列的表头被点击时会触发该事件 | +column, event | +
| header-contextmenu | +当某一列的表头被鼠标右键点击时触发该事件 | +column, event | +
| sort-change | +当表格的排序条件发生变化的时候会触发该事件 | +{ column, prop, order } | +
| filter-change | +当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value + 为用户选择的筛选条件的数组。 + | +filters | +
| current-change | +当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | +currentRow, oldCurrentRow | +
| header-dragend | +当拖动表头改变了列的宽度的时候会触发该事件 | +newWidth, oldWidth, column, event | +
| expand-change | +当用户对某一行展开或者关闭的时候会触发该事件 | +row, expandedRows | +
Table Methods
+| 方法名 | +说明 | +参数 | +
|---|---|---|
| clearSelection | +用于多选表格，清空用户的选择 | +— | +
| toggleRowSelection | +用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | +row, selected | +
| toggleRowExpansion | +用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | +row, expanded | +
| setCurrentRow | +用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | +row | +
| clearSort | +用于清空排序条件，数据会恢复成未排序的状态 | +— | +
| clearFilter | +用于清空过滤条件，数据会恢复成未过滤的状态 | +— | +
| doLayout | +对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | +— | +
| sort | +手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。 |
+ prop: string, order: string | +
Table Slot
+| name | +说明 | +
|---|---|
| append | +插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。 | +
Table-column Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| type | +对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1
+ 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
+ |
+ string | +selection/index/expand | +— | +
| index | +如果设置了 type=index，可以通过传递 index 属性来自定义索引 |
+ string, Function(index) | +- | +- | +
| column-key | +column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | +string | +— | +— | +
| label | +显示的标题 | +string | +— | +— | +
| prop | +对应列内容的字段名，也可以使用 property 属性 | +string | +— | +— | +
| width | +对应列的宽度 | +string | +— | +— | +
| min-width | +对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | +string | +— | +— | +
| fixed | +列是否固定在左侧或者右侧，true 表示固定在左侧 | +string, boolean | +true, left, right | +— | +
| render-header | +列标题 Label 区域渲染使用的 Function | +Function(h, { column, $index }) | +— | +— | +
| sortable | +对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | +boolean, string | +true, false, 'custom' | +false | +
| sort-method | +对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | +Function(a, b) | +— | +— | +
| sort-by | +指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 + 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 + | +String/Array/Function(row, index) | +— | +— | +
| sort-orders | +数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | +array | +数组中的元素需为以下三者之一：ascending 表示升序，descending
+ 表示降序，null 表示还原为原始顺序
+ |
+ ['ascending', 'descending', null] | +
| resizable | +对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | +boolean | +— | +true | +
| formatter | +用来格式化内容 | +Function(row, column, cellValue, index) | +— | +— | +
| show-overflow-tooltip | +当内容过长被隐藏时显示 tooltip | +Boolean | +— | +false | +
| align | +对齐方式 | +String | +left/center/right | +left | +
| header-align | +表头对齐方式，若不设置该项，则使用表格的对齐方式 | +String | +left/center/right | +— | +
| class-name | +列的 className | +string | +— | +— | +
| label-class-name | +当前列标题的自定义类名 | +string | +— | +— | +
| selectable | +仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | +Function(row, index) | +— | +— | +
| reserve-selection | +仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定
+ row-key）
+ |
+ Boolean | +— | +false | +
| filters | +数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | +Array[{ text, value }] | +— | +— | +
| filter-placement | +过滤弹出框的定位 | +String | +与 Tooltip 的 placement 属性相同 |
+ — | +
| filter-multiple | +数据过滤的选项是否多选 | +Boolean | +— | +true | +
| filter-method | +数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | +Function(value, row, column) | +— | +— | +
| filtered-value | +选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | +Array | +— | +— | +
Table-column Scoped Slot
+| name | +说明 | +
|---|---|
| — | +自定义列的内容，参数为 { row, column, $index } | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pagination 分页
+ + 当数据量过多时，使用分页分解数据。 + +
+
+ 基础用法
+ +
+
+
+
+
+ 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。
+
+ 页数较少时的效果
+
+
+
+
+
+ 大于 7 页时的效果
+
+
+
+
+
+
+ 设置最大页码按钮数
+ + remarks +
+
+
+
+
+
+ 默认情况下，当总页数超过 7 页时，Pagination
+ 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。
+
+ 带有背景色的分页
+ +
+
+
+
+
+
+ 设置background属性可以为分页按钮添加背景色。
+
+ 小型分页
+ + 在空间有限的情况下，可以使用简单的小型分页。 +
+
+
+
+
+
+
+
+ 只需要一个small属性，它接受一个Boolean，默认为false，设为true即可启用。
+
+
+ 附加功能
+ + 根据场景需要，可以添加其他功能模块。 +
+
+
+
+
+
+ 此例是一个完整的用例，使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100,
+ 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
+ 显示总数
+
+
+
+
+ 调整每页显示条数
+
+
+
+
+ 直接前往
+
+
+
+
+ 完整功能
+
+
+
+
+
+ Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| small | +是否使用小型分页样式 | +Boolean | +— | +false | +
| background | +是否为分页按钮添加背景色 | +Boolean | +— | +false | +
| page-size | +每页显示条目个数 | +Number | +— | +10 | +
| total | +总条目数 | +Number | +— | +— | +
| page-count | +总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | +Number | +— | +— | +
| pager-count | +页码按钮的数量，当总页数超过该值时会折叠 | +Number | +大于等于 5 且小于等于 21 的奇数 | +7 | +
| current-page | +当前页数，支持 .sync 修饰符 | +Number | +— | +1 | +
| layout | +组件布局，子组件名用逗号分隔 | +String | +sizes, prev, pager, next, jumper,
+ ->, total, slot |
+ 'prev, pager, next, jumper, ->, total' | +
| page-sizes | +每页显示个数选择器的选项设置 | +Number[] | +— | +[10, 20, 30, 40, 50, 100] | +
| popper-class | +每页显示个数选择器的下拉框类名 | +string | +— | +— | +
| prev-text | +替代图标显示的上一页文字 | +string | +— | +— | +
| next-text | +替代图标显示的下一页文字 | +string | +— | +— | +
| disabled | +是否禁用 | +boolean | +— | +false | +
Events
+| 事件名称 | +说明 | +回调参数 | +
|---|---|---|
| size-change | +pageSize 改变时会触发 | +每页条数 | +
| current-change | +currentPage 改变时会触发 | +当前页 | +
| prev-click | +用户点击上一页按钮改变当前页后触发 | +当前页 | +
| next-click | +用户点击下一页按钮改变当前页后触发 | +当前页 | +
Slot
+| name | +说明 | +
|---|---|
| — | +自定义内容，需要在 layout 中列出 slot |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ MessageBox 弹框
+ + 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。 + +从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和
+ prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。
+
+ 消息提示
+ + 当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。 +
+
+
+ 点击打开 Message Box
+
+
+ 调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下
+ ESC
+ 或点击框外关闭。此例中接收了两个参数，message和title。值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise，可自行引入第三方
+ polyfill 或像本例一样使用回调进行后续处理。
+
+ 确认消息
+ + 提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。 +
+
+
+ 点击打开 Message Box
+
+
+
+
+ 调用$confirm方法即可打开消息提示，它模拟了系统的
+ confirm。Message Box
+ 组件也拥有极高的定制性，我们可以传入options作为第三个参数，它是一个字面量对象。type字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数title必须定义为String类型，如果是Object，会被理解为options。在这里我们用了
+ Promise 来处理后续响应。
+
+ 提交内容
+ + 当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。 +
+
+
+
+ 点击打开 Message Box
+
+
+
+ 调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。
+
+
+ 自定义
+ + 可自定义配置不同内容。 +
+
+
+
+ 点击打开 Message Box
+
+
+
+ 以上三个方法都是对$msgbox方法的再包装。本例直接调用$msgbox方法，使用了showCancelButton字段，用于显示取消按钮。另外可使用cancelButtonClass为其添加自定义样式，使用cancelButtonText来自定义按钮文本（Confirm
+ 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了beforeClose属性，它的值是一个方法，会在
+ MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数：action、实例本身和done方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加loading状态等；此时若需要关闭实例，可以调用done方法（若在beforeClose中没有调用done，则实例不会关闭）。
+
弹出层的内容可以是 VNode，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老
+ VNode 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 #8931。当这类问题出现时，解决方案是给
+ VNode 加上一个不相同的 key，参考这里。
+
+
+ 使用 HTML 片段
+ + message 属性支持传入 HTML 片段。 +
+
+
+ 点击打开 Message Box
+
+
+
+ 将dangerouslyUseHTMLString属性设置为 true，message
+ 就会被当作 HTML 片段处理。
message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在
+ dangerouslyUseHTMLString
+ 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给
+ message 属性。
+
+ 区分取消与关闭
+ + 有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。 +
+
+
+ 点击打开 Message Box
+
+
+ 默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的
+ reject 回调和callback回调的参数均为
+ 'cancel'。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 'cancel'
+ 和 'close'。
+
+ 居中布局
+ + 内容支持居中布局 +
+
+
+ 点击打开 Message Box
+
+
+ 将 center 设置为 true 即可开启居中布局
全局方法
+ +如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue
+ instance 中可以采用本页面中的方式调用 MessageBox。调用参数为：
-
+
$msgbox(options)
+ $alert(message, title, options)或$alert(message, options)+
+ $confirm(message, title, options)或$confirm(message, options)+
+ $prompt(message, title, options)或$prompt(message, options)+
+
Options
+ +| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| title | +MessageBox 标题 | +string | +— | +— | +
| message | +MessageBox 消息正文内容 | +string / VNode | +— | +— | +
| dangerouslyUseHTMLString | +是否将 message 属性作为 HTML 片段处理 | +boolean | +— | +false | +
| type | +消息类型，用于显示图标 | +string | +success / info / warning / error | +— | +
| iconClass | +自定义图标的类名，会覆盖 type |
+ string | +— | +— | +
| customClass | +MessageBox 的自定义类名 | +string | +— | +— | +
| callback | +若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | +function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 + MessageBox 实例，可以通过它访问实例上的属性和方法 + | +— | +— | +
| showClose | +MessageBox 是否显示右上角关闭按钮 | +boolean | +— | +true | +
| beforeClose | +MessageBox 关闭前的回调，会暂停实例的关闭 | +function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 + MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 + | +— | +— | +
| distinguishCancelAndClose | +是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 | +boolean | +— | +false | +
| lockScroll | +是否在 MessageBox 出现时将 body 滚动锁定 | +boolean | +— | +true | +
| showCancelButton | +是否显示取消按钮 | +boolean | +— | +false（以 confirm 和 prompt 方式调用时为 true） | +
| showConfirmButton | +是否显示确定按钮 | +boolean | +— | +true | +
| cancelButtonText | +取消按钮的文本内容 | +string | +— | +取消 | +
| confirmButtonText | +确定按钮的文本内容 | +string | +— | +确定 | +
| cancelButtonClass | +取消按钮的自定义类名 | +string | +— | +— | +
| confirmButtonClass | +确定按钮的自定义类名 | +string | +— | +— | +
| closeOnClickModal | +是否可通过点击遮罩关闭 MessageBox | +boolean | +— | +true（以 alert 方式调用时为 false） | +
| closeOnPressEscape | +是否可通过按下 ESC 键关闭 MessageBox | +boolean | +— | +true（以 alert 方式调用时为 false） | +
| closeOnHashChange | +是否在 hashchange 时关闭 MessageBox | +boolean | +— | +true | +
| showInput | +是否显示输入框 | +boolean | +— | +false（以 prompt 方式调用时为 true） | +
| inputPlaceholder | +输入框的占位符 | +string | +— | +— | +
| inputType | +输入框的类型 | +string | +— | +text | +
| inputValue | +输入框的初始文本 | +string | +— | +— | +
| inputPattern | +输入框的校验表达式 | +regexp | +— | +— | +
| inputValidator | +输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | +function | +— | +— | +
| inputErrorMessage | +校验未通过时的提示文本 | +string | +— | +输入的数据不合法! | +
| center | +是否居中布局 | +boolean | +— | +false | +
| roundButton | +是否使用圆角按钮 | +boolean | +— | +false | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tooltip 文字提示
+ + 常用于展示鼠标 hover 时的提示信息。 + +
+
+ 基础用法
+ + 在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。 +
+
+
+
+ 使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start,
+ end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
+
+
+
+
+ 上左
+
+
+ 上边
+
+
+ 上右
+
+
+
+
+ 左上
+
+
+ 左边
+
+
+ 左下
+
+
+
+
+
+ 右上
+
+
+ 右边
+
+
+ 右下
+
+
+
+
+ 下左
+
+
+ 下边
+
+
+ 下右
+
+
+
+
+ 主题
+ + Tooltip 组件提供了两个不同的主题：dark和light。 +
+
+
+
+ Dark
+
+
+ Light
+
+
+ 通过设置effect属性来改变主题，默认为dark。
+
+ 更多 Content
+ + 展示多行文本或者是设置文本内容的格式 +
+
+
+
+ Top center
+
+
+
+ 用具名 slot
+ 分发content，替代tooltip中的content属性。
多行信息
第二行信息
+ 第二行信息
+
+ 高级扩展
+ +除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
+ +transition 属性可以定制显隐的动画效果，默认为fade-in-linear。
+ 如果需要关闭 tooltip 功能，disabled
+ 属性可以满足这个需求，它接受一个Boolean，设置为true即可。
事实上，这是基于 Vue-popper + 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。 + 当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
+
+
+
+ 点击{{disabled ? '开启' : '关闭'}} tooltip
+ 功能
+
+
+
+
+ tooltip 内不支持 router-link 组件，请使用 vm.$router.push
+ 代替。
tooltip 内不支持 disabled form 元素，参考MDN，请在 + disabled form 元素外层添加一层包裹元素。
Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| effect | +默认提供的主题 | +String | +dark/light | +dark | +
| content | +显示的内容，也可以通过 slot#content 传入 DOM |
+ String | +— | +— | +
| placement | +Tooltip 的出现位置 | +String | ++ top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end + | +bottom | +
| value(v-model) | +状态是否可见 | +Boolean | +— | +false | +
| disabled | +Tooltip 是否可用 | +Boolean | +— | +false | +
| offset | +出现位置的偏移量 | +Number | +— | +0 | +
| transition | +定义渐变动画 | +String | +— | +el-fade-in-linear | +
| visible-arrow | +是否显示 Tooltip 箭头，更多参数可见Vue-popper + | +Boolean | +— | +true | +
| popper-options | +popper.js 的参数 | +Object | +参考 popper.js 文档 | +{ boundariesElement: 'body', gpuAcceleration: false } | +
| open-delay | +延迟出现，单位毫秒 | +Number | +— | +0 | +
| manual | +手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | +Boolean | +— | +false | +
| popper-class | +为 Tooltip 的 popper 添加类名 | +String | +— | +— | +
| enterable | +鼠标是否可进入到 tooltip 中 | +Boolean | +— | +true | +
| hide-after | +Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | +number | +— | +0 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popover 弹出框
+ +
+
+ 基础用法
+ + Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip + 的文档，在此文档中不做详尽解释。 + + +
+
+
+
+ hover 激活
+
+
+
+ click 激活
+
+
+
+
+ focus 激活
+
+ trigger属性用于设置何时触发
+ Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发
+ Popover 的元素，有两种写法：使用 slot="reference"
+ 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。
+
+ 嵌套信息
+ + 可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。 +
+
+
+
+ click 激活
+
+
+
+
+
+ 嵌套操作
+ + 当然，你还可以嵌套操作，这相比 Dialog 更为轻量： +
+
+ 删除
+
+
+
+ 这是一段内容这是一段内容确定删除吗？
+ +
+ 取消
+ 确定
+
+
+ Attributes
+| 参数 | +说明 | +类型 | +可选值 | +默认值 | +
|---|---|---|---|---|
| trigger | +触发方式 | +String | +click/focus/hover/manual | +click | +
| title | +标题 | +String | +— | +— | +
| content | +显示的内容，也可以通过 slot 传入 DOM |
+ String | +— | +— | +
| width | +宽度 | +String, Number | +— | +最小宽度 150px | +
| placement | +出现位置 | +String | ++ top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end + | +bottom | +
| disabled | +Popover 是否可用 | +Boolean | +— | +false | +
| value(v-model) | +状态是否可见 | +Boolean | +— | +false | +
| offset | +出现位置的偏移量 | +Number | +— | +0 | +
| transition | +定义渐变动画 | +String | +— | +fade-in-linear | +
| visible-arrow | +是否显示 Tooltip 箭头，更多参数可见Vue-popper + | +Boolean | +— | +true | +
| popper-options | +popper.js 的参数 | +Object | +参考 popper.js 文档 | +{ boundariesElement: 'body', gpuAcceleration: false } |
+
| popper-class | +为 popper 添加类名 | +String | +— | +— | +
| open-delay | +触发方式为 hover 时的显示延迟，单位为毫秒 | +Number | +— | +— | +
Slot
+| 参数 | +说明 | +
|---|---|
| — | +Popover 内嵌 HTML 文本 | +
| reference | +触发 Popover 显示的 HTML 元素 | +
Events
+| 事件名称 | +说明 | +回调参数 | +
|---|---|---|
| show | +显示时触发 | +— | +
| after-enter | +显示动画播放完毕后触发 | +— | +
| hide | +隐藏时触发 | +— | +
| after-leave | +隐藏动画播放完毕后触发 | +— | +
+
+
+
+
+
+
+
+
+ Ajax调用
+ +
+ 调用AJAX
+
+
+ 基础用法
+ +JavaScript代码
+ +
+
+
+
+ ajax.example({}).then(function (response) {
+ if (response.errors.length > 0) {
+ nav.e(response.errors[0].message);
+ } else {
+ nav.i("Ajax调用成功!");
+ }
+ })
+
+
+ 点击上传
+
+
+
+ AJAX统一文件上传接口
+ +只能上传jpg/png文件，且不超过500kb
+ JavaScript代码
+ +
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main/resources/templates/screen/up.ftl b/src/main/resources/templates/screen/up.ftl
new file mode 100644
index 0000000..c4132f8
--- /dev/null
+++ b/src/main/resources/templates/screen/up.ftl
@@ -0,0 +1,141 @@
+小吐司、通知
+ +
+ showMsg
+ showErr
+ showWarn
+ showSuccess
+
+
+ 小吐司、通知
+ +JavaScript代码
+ +
+
+
+
+ showMsg:function(){
+ nav.i('消息')
+ },
+ showErr:function(){
+ nav.e('错误')
+ },
+ showWarn:function(){
+ nav.w('警告')
+ },
+ showSuccess:function(){
+ nav.w('成功')
+ }
+
+
+
+
+
diff --git a/src/test/java/xyz/wbsite/config/TestConfig.java b/src/test/java/xyz/wbsite/config/TestConfig.java
new file mode 100644
index 0000000..aca6466
--- /dev/null
+++ b/src/test/java/xyz/wbsite/config/TestConfig.java
@@ -0,0 +1,25 @@
+package xyz.wbsite.config;
+
+import xyz.wbsite.framework.base.Token;
+import xyz.wbsite.framework.springmvc.GlobalHandlerInterceptor;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.web.servlet.FilterRegistrationBean;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.filter.CharacterEncodingFilter;
+import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class TestConfig {
+
+ @Bean
+ public Token getTestToken() {
+ Token token = new Token();
+ token.setId(-1);
+ token.setUserId(-1);
+ token.setUserName("system");
+ return token;
+ }
+}
\ No newline at end of file
diff --git a/src/test/resources/application.properties b/src/test/resources/application.properties
new file mode 100644
index 0000000..12481be
--- /dev/null
+++ b/src/test/resources/application.properties
@@ -0,0 +1,56 @@
+# 开发环境
+server.port=8080
+server.servlet.context-path=/
+spring.mvc.static-path-pattern=/static/**
+spring.resources.static-locations=classpath:static/
+spring.application.name=SpringBoot
+# 编码配置
+spring.http.encoding.force=true
+spring.http.encoding.charset=UTF-8
+spring.http.encoding.enabled=true
+server.tomcat.uri-encoding=UTF-8
+# 根路径、欢迎页
+web.welcome.page = index
+# 排除的不需要验证的URL
+web.url.excluded = /static/**,/open/**,/api,/index,/,/login
+web.url.authorization = /**
+# 默认的登录URL
+web.url.login = /login
+# 日志配置
+logging.config=classpath:logback-config.xml
+# 热部署生效
+spring.devtools.restart.enabled=true
+# mysql
+spring.datasource.driver-class-name=com.mysql.jdbc.Driver
+spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf-8
+spring.datasource.username=test
+spring.datasource.password=123456
+# mybatis
+mybatis.mapper-locations=classpath:**/mpr/*.xml
+# pagehelper
+pagehelper.autoRuntimeDialect=true
+pagehelper.reasonable=true
+pagehelper.supportMethodsArguments=true
+pagehelper.params=count=countSql
+# freemarker
+spring.freemarker.enabled=true
+spring.freemarker.allow-request-override=false
+spring.freemarker.cache=true
+spring.freemarker.check-template-location=true
+spring.freemarker.charset=UTF-8
+spring.freemarker.content-type=text/html
+spring.freemarker.expose-request-attributes=false
+spring.freemarker.expose-session-attributes=false
+spring.freemarker.expose-spring-macro-helpers=false
+spring.freemarker.settings.template_update_delay=1
+spring.freemarker.settings.locale=zh_CN
+spring.freemarker.settings.datetime_format=yyyy-MM-dd
+spring.freemarker.settings.date_format=yyyy-MM-dd
+spring.freemarker.settings.number_format=#.##
+spring.freemarker.settings.classic_compatible=true
+spring.freemarker.settings.whitespace_stripping=true
+spring.freemarker.settings.url_escaping_charset=utf-8
+# 文件上传配置
+spring.servlet.multipart.resolveLazily = true
+spring.servlet.multipart.max-file-size=100Mb
+spring.servlet.multipart.max-request-size=100Mb
\ No newline at end of file
diff --git a/src/test/resources/logback-config.xml b/src/test/resources/logback-config.xml
new file mode 100644
index 0000000..5d80b9f
--- /dev/null
+++ b/src/test/resources/logback-config.xml
@@ -0,0 +1,22 @@
+
+
+
+
+