vue学习日记：iview组件库的使用

首先安装iview:

npm install iview --save

在main.js中引入iview:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

Vue.config.productionTip = false;

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

在login.vue中使用iview:

<template>
    <div>
        <input type="text" class="username" v-model="params.username">
        <input type="password" class="password" v-model="params.password">
        <button @click="login(params)">login</button>
        <Button @click="open(true)">Open notice(only title)</Button>
    </div>
</template>

<script>
import loginService from '@/service/login.service'
export default {
    name: "login",
    data () {
        return {
            params: {
                username:"",
                password:"",
            },

        }
    },
    methods: {
        login: function (params) {
            loginService.login(params).then(res => {
                if(res){
                    console.log(res);
                }
            });
        },
        open (nodesc) {
            console.log(this);
            this.$Notice.open({
                title: 'Notification title',
                desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
            });
        }
    }
};
</script>

<style scoped>

</style>

点击open按钮，即可看到效果。

转载于:https://www.cnblogs.com/xianxiaobo/p/9367019.html