[英]Materialize inside 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中,但沒有任何解決方案:
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
}),
現在,我試圖使工作成為輸入選擇字段。 我該如何進行這項工作?
您可以使用Vue-Material來實現您的Vue項目。 以下是您需要遵循的步驟:
$ npm install --save vue-material
install-保存$ npm install --save vue-material
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
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組件。
這是將Materialize與Vue Webpack模板一起使用的設置:
build / 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()
Vue.js
給定的Vue.js
鏈接代表Materializecss
,兩者看起來相同。 在這里,我通過drop down button
添加了完整的工作代碼。
您可以將以下代碼復制並粘貼到文本文件中,然后將其另存為.html文件(例如: name.html
)。 您可以通過在注釋<!--your code start-->
和<!--your code end-->
之間添加相關代碼來編輯此代碼。
單擊下面的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.