Материализовать внутри Vue.js

Я новичок в Vue.js, и я хочу создать свой проект с помощью Materialize. Я пробовал много плагинов, таких как: vue-materialize (https://github.com/paulpflug/vue-materialize), vue-material-components (https://www.npmjs.com/package/vue-material-components) и не работал. Я также попытался добавить JQuery плагин WebPack и у меня нет никакого решения:Материализовать внутри Vue.js

new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jquery: 'jquery', 
    'window.jQuery': 'jquery', 
    jQuery: 'jquery' 
}),

Теперь я пытаюсь сделать работу выбора поля ввода. Как я могу сделать эту работу?

источник

2016-12-26 Francisco

Посмотрите на этот вопрос на [material input] (http://stackoverflow.com/q/40888352/1610034) и [эта скрипка] (https://jsfiddle.net/sanjeevks121/t3ntexff/). – Saurabh

-1

Vue.js Данная ссылка вы указали Materializecss, и оба они выглядят одинаково. Здесь я добавил полный рабочий код с drop down button.

Вы можете просто скопировать и вставить следующий код в текстовый файл и сохранить его как .html-файл (например: name.html). Вы можете отредактировать этот код, добавив соответствующий код между комментарием  и .

Нажмите кнопку Run code Snippet ниже, чтобы проверить на сайте, и вы можете увидеть DROP ME! кнопку. Как только вы нажмете на него, вы увидите, как работает раскрывающийся список.

Подробнее обращайтесь materializecss, который удобнее, чем указанная вами ссылка.

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
     <title>Slider</title> 
 
     <!-- Compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
     <!--Let browser know website is optimized for mobile--> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    </head> 
 

 
    <body> 
 
     <!--your code start--> 
 
     
 
       <!-- Dropdown Trigger --> 
 
       <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> 
 

 
       <!-- Dropdown Structure --> 
 
       <ul id='dropdown1' class='dropdown-content'> 
 
       <li><a href="#!">one</a></li> 
 
       <li><a href="#!">two</a></li> 
 
       <li class="divider"></li> 
 
       <li><a href="#!">three</a></li> 
 
       </ul>  
 
     
 
     <!--your code end--> 
 

 
     <!--Import jQuery before materialize.js--> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 

 
     <!-- Compiled and minified JavaScript --> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
     
 
    </body> 
 

 
</html>

источник

2017-02-08 12:09:13

где vue в примере? это часть основного вопроса – Oswaldo

@oswaldo Спасибо за комментарий. Да ты прав. Но предоставленная ссылка содержит «Materializecss». Поэтому я ясно упомянул, что я имею в виду Materializecss, поскольку иногда он может быть полезен ему или другим пользователям. Хорошего дня. :) –

Вот моя установка использовать материализовать с Vue Webpack template:

сборки/webpack.base.conf.js

var webpack = require('webpack') 
module.exports = 
    resolve: { 
    alias: { 
     ... 
     'jquery': 'materialize-css/node_modules/jquery/dist/jquery.js' 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     ... 
     options: { 
      limit: 10000 
    .... 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jquery: 'jquery', 
     jQuery: 'jquery', 
     'window.$': 'jquery', 
     'window.jQuery': 'jquery' 
    }) 
    ] 
}

index.html

<head> 
    ... 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head>

package.json

{ 
    ... 
    "dependencies": { 
    "materialize-css": "^0.98.2", 
    ... 
    "devDependencies": { 
    "@types/jquery": "^2.0.43", // ==> if using typescript

SRC/main.js

import 'materialize-css' 
import 'materialize-css/dist/css/materialize.css'

Таким образом, для "ввода поле выбора", как показано ниже:

<div class="input-field" ref="myInput"> 
    <select> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <label>Materialize Select</label> 
</div>

... вы могли бы поставить этот код в mounted жизненный цикл крючке:

mounted() { 
    $(this.$refs.myInput).material_select()

источник

2017-05-11 12:40:51 Oswaldo

Вы можете использовать Vue-Material материализовать свой проект Vue. Ниже перечислены шаги, которые вы должны следовать:

Установите vuematerial $ npm install --save vue-material
Импорт vuematerial на ваш главный.JS import VueMaterial from 'vue-material'import 'vue-material/dist/vue-material.css'
Начало использования vuematerial в проекте Vue.use(VueMaterial)

Образец main.js файл должен выглядеть примерно так:

import Vue from 'vue'; 
import VueMaterial from 'vue-material' 
import 'vue-material/dist/vue-material.css'; 
import App from './App'; 
import router from './router'; 

Vue.use(VueMaterial) 
Vue.config.productionTip = false; 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App }, 
});

Теперь вы будете иметь возможность использовать vuematerial компонентов внутри шаблона.

источник

2017-10-29 20:34:48 Gaurav

Материализовать внутри Vue.js

ответ

Смежные вопросы