Как можно использовать код Vue. js от Codepen? - PullRequest
Новая
       42

Как можно использовать код Vue. js от Codepen?

0 голосов
/ 28 января 2020

Я хочу использовать этот код от Codepen. Итак, я щелкнул правой кнопкой мыши на рамке result и выбрал View Frame source. Затем я скопировал исходный код и вставил его в свой собственный текстовый редактор.

Но на моей веб-странице кодовая часть отображается пустой.

enter image description here

Я скопировал источник, начиная с <style> до </body>, и вставил его в свой компонент. При использовании ZIP вместо этого я не знаю, как использовать код, потому что у меня просто есть компонент, а ZIP содержит скрипт. js и стиль. css

Что я делаю не так?

1 Ответ

1 голос
/ 28 января 2020

Хорошо, вот копия и вставка для чайников: Это html часть: 

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <table class="dayparts table">
            <thead>
                <tr>
                    <td class="cell-label presets-label"></td>
                    <td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
                        <select v-model="selected" @change='clearAll();selectedFunc()'>
                            <option value="">Select a Preset</option>
                            <option value="0">None</option>
                            <option value="1">Afternoons</option>
                            <option value="2">Evenings</option>
                            <option value="3">Mornings</option>
                            <option value="4">Weekdays</option>
                            <option value="5">Weekends</option>
                            <option value="6">Weekends including Friday</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2"></td>
                    <td class="cell-label am-label" colspan="12">AM</td>
                    <td class="cell-label pm-label" colspan="12">PM</td>
                </tr>
                <tr class="hour-row">
                    <td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
                    </td>
                </tr>
            </thead>
            <tbody @mousedown='mouseDown' @mouseup='mouseUp' @mousemove='mouseMove'>
                <tr class="day" v-for="day in days">
                    <td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
                        v-on:click='activateDay'>{{day.dayName}}</td>
                    <td class='dayparts-cell' v-bind:value="hour.hour" data='day'
                        v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="main.js"></script>
</body>

</html>

Это "голова": 

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

1) Удалить <link rel="stylesheet" href="style.css"> и добавьте <style></style> в том же месте. Заполните его содержимым css -части.

2) Замените "vue. js" в <script src="vue.js"></script> на "https://cdn.jsdelivr.net/npm/vue/dist/vue.js", когда вы ' находится в разработке или с "https://cdn.jsdelivr.net/npm/vue@2.6.11" для производства.

Затем go в конец вашего html -кода и найдите <script src="main.js"></script>. Удалите его и вместо него добавьте пустой <script></script>. Заполните его скопированной частью Javascript.

Теперь ваша страница должна работать правильно.

Совет: Не используйте Ctrl + A в Codepen, чтобы выбрать все, так как он выбирает несколько дополнительных слов, а затем .

...