Vue.js内でマテリアライズ

私はVue.jsで新しく、マテリアライズでプロジェクトを作りたいです。私は、vue-materialize（https://github.com/paulpflug/vue-materialize）、vue-material-components（https://www.npmjs.com/package/vue-material-components）のようなプラグインを試してみましたが、うまくいきませんでした。私はまた、WebPACKのにjQueryプラグインを追加しようとしましたし、私はすべてのソリューションを持っていない：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）と[this fiddle]（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とマテリアライズを使用する私の設定です：

ビルド/ index.htmlには

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' 
    }) 
    ] 
}

をwebpack.base.conf.js

<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のプロジェクトをマテリアライズするVue-Materialを使用することができます。あなたがに必要な手順は次のとおりです。

がメインにvuematerial $ npm install --save vue-material

インポートvuematerialをインストールします。あなたは今、あなたのテンプレート内のvuematerialコンポーネントを使用することができるようになります

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 }, 
});

：サンプルmain.jsファイルは次のようになりますあなたのプロジェクトにVue.use(VueMaterial)

をvuematerial使用してjsのimport VueMaterial from 'vue-material'import 'vue-material/dist/vue-material.css'

スタート。

出典

2017-10-29 20:34:48 Gaurav

Vue.js内でマテリアライズ

答えて

関連する問題