鍍金池/ 問答/ HTML問答
別瞎鬧 回答

這個跟框架沒關(guān)系呀,用原生該咋做就咋做

葬愛 回答

vuex 不僅僅是拿來存數(shù)據(jù)的。它是與vue深度結(jié)合的組件狀態(tài)集中管理模式。

除了你 思維中的 “存數(shù)據(jù)” 外,還包含對于數(shù)據(jù)的處理“mutation”,處理數(shù)據(jù)的事件“action”,衍生數(shù)據(jù)“getter”等等,是一整套的狀態(tài)管理方案。

而你遇到的問題是如何將數(shù)據(jù)本地持久化,跟vuex根本不搭噶,你大可以用Storage,存下部分本地數(shù)據(jù)就好,然后在對應(yīng)“action”中進(jìn)行邏輯判斷,是從Storage獲取數(shù)據(jù);還是異步獲取數(shù)據(jù);還是先從Storage獲取再異步更新數(shù)據(jù)。

病癮 回答

for(a[i++] in o)每次循環(huán)的時候,把對象o的屬性賦值給a[i],然后i++;
所以
第一次遍歷的時候,遍歷出o的屬性"x",然后把"x"賦值給a[i],此時i等于0,所以是a[0] = "x",然后i++,此時i變成1,a變成["x"];
第二次遍歷的時候,遍歷出o的屬性"y",然后把"y"賦值給a[i],此時i等于1,所以是a[1] = "y",然后i++,此時i變成2,a變成["x", "y"];
第三次遍歷的時候,遍歷出o的屬性"z",然后把"z"賦值給a[i],此時i等于2,所以是a[2] = "z",然后i++,此時i變成3a變成["x", "y", "z"];
遍歷結(jié)束,a的值變成['x','y','z'],i的值變成3。

念初 回答

服務(wù)器返回403,那是服務(wù)器禁止了跨域訪問了吧。
在服務(wù)器返回時加上

res.header('Access-Control-Allow-Origin', '*');
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

上面這幾段是expressjs的寫法

笑忘初 回答

limit是圖片大小限制,低于limit的圖片會被轉(zhuǎn)換為base64格式直接插入原本引用處。
大于limit限制的圖片仍然是遠(yuǎn)程引用,然后這里的name是指定輸出目錄和圖片名。

現(xiàn)在更多的是用options方式配置。

冷咖啡 回答

鏈接描述

修改tableCols的值為22即可滿足你的要求;

尤禮 回答

webpack嗎,如果是的話 npm run build --report 看看打包的哪個部分體積大,然后看看能不能用 cdn 引入。不過 cheerio 貌似不支持 cdn 引入=。=

胭脂淚 回答

router-link 默認(rèn)情況下的路由是模糊匹配,例如當(dāng)前路徑是 /article/1 那么也會激活 <router-link to="/article">,所以當(dāng)設(shè)置 exact-active-class 以后,這個 router-link 只有在當(dāng)前路由被全包含匹配時才會被激活 exact-active-class 中的class。

例如

<router-link to="/article" active-class="router-active"></router-link>

當(dāng)用戶訪問 /article/1 時會被激活為

<a href="#/article" class="router-active"></a>

而當(dāng)使用

<router-link to="/article" exact-active-class="router-active"></router-link>

當(dāng)用戶訪問 /article/1 時,不會激活這個link的class

<a href="#/article"></a>
命多硬 回答

eslint 報錯吧

console.log(1) 輸出了一次還是兩次?
試一下mouseenter事件呢?

離觴 回答

之前提問并沒有指出是什么所謂同源事件 故而現(xiàn)在更新一波


正文開始

其實也沒有什么難度,看了你的demo,無非是一些事件注冊,好消息是我剛才順手寫了個vue-highchart里使用的例子,先放效果給你看吧

clipboard.png

其實,最重要的是你忘記框架或者庫的存在,一切從js的層面去看它
以下是你評論里貼的例子的截圖

clipboard.png
可以看到就是獲取自身chart對象以及dom 然后得到其它chart對象以及dom 然后開始事件注冊
所以vue里面我們也這樣做不就好了?

我的代碼(關(guān)鍵步驟里面有注釋)

<template>
    <div>
        <highcharts style="height:200px;width:500px;" :options="createOption(chartData.chart1)" ref="c1"></highcharts>
        <highcharts style="height:200px;width:500px;" :options="createOption(chartData.chart2)" ref="c2"></highcharts>
        <highcharts style="height:200px;width:500px;" :options="createOption(chartData.chart3)" ref="c3"></highcharts>
    </div>
</template>

<script>
import { offset } from "@/js/utils";

export default {
    name: "test",
    data() {
        return {
            chartData: {
                chart1: [["1月", 10], ["2月", 12], ["3月", 22]],
                chart2: [["1月", 44], ["2月", 30], ["3月", 22]],
                chart3: [["1月", 10], ["2月", 30], ["3月", 8]],
            },
        };
    },
    methods: {
        createOption(data) {
            return {
                series: [{ data }],
            };
        },
    },
    mounted() {
        const { c1, c2, c3 } = this.$refs;
        const chart1 = c1.chart;
        const chart2 = c2.chart;
        const chart3 = c3.chart;
        // 你看chart對象是不是得到了
        const allChart = [chart1, chart2, chart3];
        // 定義一個獲取其它兄弟表集合的方法
        allChart.getOther = function(one) {
            return allChart.filter(c => c !== one);
        };
        // 循環(huán)進(jìn)行事件綁定
        allChart.forEach(chart => {
            // 你看自身chart的dom是不是得到了
            const container = chart.container;
            if (container instanceof Element) {
                container.addEventListener("mousemove", function(e) {
                    var sourceXAxis = chart.xAxis[0];
                    var extremes = sourceXAxis.getExtremes();
                    var targetChartContainerList = allChart.getOther(chart);
                    targetChartContainerList.forEach((ct, index) => {
                        var targetChart = ct;
                        var targetDom = ct.container;
                        var sourceOffset = offset(container);
                        var targetOffset = offset(targetDom);
                        var targetE = {};
                        for (var i in e) {
                            targetE[i] = e[i];
                        }
                        targetE.pageX =
                            e.pageX + targetOffset.left - sourceOffset.left;
                        targetE.pageY =
                            e.pageY + targetOffset.top - sourceOffset.top;
                        var targetEl =
                            targetDom.querySelector(
                                "rect.highcharts-background"
                            ) ||
                            targetDom.querySelector("path.highcharts-tracker");

                        targetE.target = targetE.srcElement = targetE.fromElement = targetE.toElement = targetEl;
                        targetE.delegateTarget = targetE.currentTarget = targetDom;
                        targetE.originalEvent = targetE;
                        if (targetChart && targetChart.pointer) {
                            targetChart.pointer.onContainerMouseMove(targetE);
                        }
                        if (targetChart && targetChart.scroller) {
                            targetChart.scroller.mouseMoveHandler(targetE);
                        }

                        if (
                            chart.mouseIsDown == "mouseup" ||
                            chart.mouseIsDown == "mousedown"
                        ) {
                            if (targetChart && targetChart.xAxis[0]) {
                                var targetXAxis = targetChart.xAxis[0];
                                targetXAxis.setExtremes(
                                    extremes.min,
                                    extremes.max
                                );
                            }
                        }
                    });
                    return false;
                });
            }
        });
    },
};
</script>

你看看事件注冊部分是不是和你的那個代碼很像,沒錯,我就是照著抄的。

offset是啥?

至于offset方法是啥?因為我完全不依賴于jquery,所以自己實現(xiàn)了一個offset方法,基本也是照著jquery源碼抄著改的
也可以給你看一下offset的代碼

// offset: borrow ideas from the implement of offset in jQuery.fn.extend
export const offset = elem => {
    /* jshint eqeqeq: false */
    const isWindow = obj => obj != null && obj == obj.window;
    const getWindow = ele =>
        isWindow(ele)
            ? ele
            : ele.nodeType === 9 ? ele.defaultView || ele.parentWindow : false;

    let docElem,
        win,
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;

    if (!doc) {
        return;
    }
    docElem = doc.documentElement;
    // Make sure it's not a disconnected DOM node
    if (!docElem.contains(elem)) {
        return box;
    }
    // If we don't have gBCR, just use 0,0 rather than error
    // BlackBerry 5, iOS 3 (original iPhone)
    if (typeof elem.getBoundingClientRect === "function") {
        box = elem.getBoundingClientRect();
    }
    win = getWindow(doc);
    return {
        top:
            box.top +
            (win.pageYOffset || docElem.scrollTop) -
            (docElem.clientTop || 0),
        left:
            box.left +
            (win.pageXOffset || docElem.scrollLeft) -
            (docElem.clientLeft || 0),
    };
};

其它注意事項

哦對了,我只抄了mousemove部分,其它部分你自己對著慢慢抄.
實際使用的時候,addEventListener里的function最好不要匿名,這樣方面組件beforeDestory的時候可以removeEventListener取消監(jiān)聽

久礙你 回答

XMLHttpRequest.responseURL屬性返回經(jīng)過任意多次重定向后的最終URL。

https://developer.mozilla.org...

那個CORS錯誤是肯定有的,可以不管。不過我猜你是想做個自己用的腳本?瀏覽器插件會給跨域xhr給你用,不過我推薦輕量的油猴腳本。

擱淺 回答

……這不就是直播么

  • 標(biāo)準(zhǔn)直播解決方案:HTTP-FLV,HLS,etc
    優(yōu)點:行業(yè)成熟,直播框架一大堆
    缺點:但還是很麻煩
  • 視頻通話解決方案:WebRTC
    優(yōu)點:原生,代碼簡潔
    缺點:國內(nèi)用得少,要自己去啃文檔
北城荒 回答

favicon.ico 。。。那你用的根本不是跨域環(huán)境啊,只是嘗試了下 jsonp 而已。
favicon.ico 是個網(wǎng)站都會去請求一下,自動發(fā)起的,把你的 jsonp 邏輯加到按鈕點擊事件里再去觸發(fā)就能看到只有一次了。

硬扛 回答

proxy 僅在開發(fā)模式生效,上線請自己配置代理服務(wù)(Nginx等)。

忘了我 回答

這里有webpack4的 Webpack 配置詳解(含 4)——關(guān)注細(xì)節(jié)

webpack3的差不多,可以去參考 vue-cli webpack 模板,只是用的插件不一樣。

涼薄 回答

請參考以下 python 代碼實現(xiàn)

# -*- coding: utf-8 -*-
"""
author: 李毅
"""
from unittest import TestCase


def permutation(array, nsum):
    ''' 假設(shè)數(shù)組元素不重復(fù)。 '''
    # 排序(升序)
    sarray = sorted(array)

    # 找出最大下標(biāo)
    max_idx = len(sarray)
    for i, e in enumerate(sarray):
        if e > nsum:
            max_idx = i
            break

    # 窮舉
    result = []
    for i in range(max_idx):
        for j in range(i, max_idx):
            for k in range(j, max_idx):
                if i == j and j == k:
                    continue
                if sarray[i] + sarray[j] + sarray[k] == nsum:
                    result.append((sarray[i], sarray[j], sarray[k]))
    return result


class Test(TestCase):
    """ 單元測試 """
    def test_permutation(self):
        self.assertEqual(
            permutation(range(10), 3),
            [(0, 0, 3), (0, 1, 2)])
        self.assertEqual(
            permutation(range(10), 2),
            [(0, 0, 2), (0, 1, 1)])
        # 邊界值
        self.assertEqual(
            permutation(range(3), 3),
            [(0, 1, 2)])
        self.assertEqual(
            permutation(range(1, 4), 4),
            [(1, 1, 2)])