• 14: element ui 使用


    1.1 element ui 基本使用

      参考网址: http://element.eleme.io/#/zh-CN/component/button

      1、初始一个vue项目并安装element ui

          vue init webpack-simple element-demo

          cd element-demo

          npm install

          cnpm install element-ui -S

          npm run dev

       2、编辑main.js引入element ui (引入后就可以使用element中的样式了)

    import Vue from 'vue'
    import ElementUI from 'element-ui';                      // 引入element-ui
    import 'element-ui/lib/theme-chalk/index.css';           // element-ui的css样式要单独引入
    import App from './App.vue'
    
    Vue.use(ElementUI);   // 这种方式引入了ElementUI中所有的组件
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    main.js

      3、在webpack.config.js中添加loader

    var path = require('path')
    var webpack = require('webpack')
    
    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
      },
      module: {
        rules: [
          {
            test: /.css$/,
            use: [
              'vue-style-loader',
              'css-loader'
            ],
          },      {
            test: /.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
              }
              // other vue-loader options go here
            }
          },
          {
            test: /.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
              name: '[name].[ext]?[hash]'
            }
          },
    
    
          // 添加加载字体字库的loader
          {
            test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
            loader: 'file-loader'
          },
        ]
      },
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
      },
      devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
      },
      performance: {
        hints: false
      },
      devtool: '#eval-source-map'
    }
    
    if (process.env.NODE_ENV === 'production') {
      module.exports.devtool = '#source-map'
      // http://vue-loader.vuejs.org/en/workflow/production.html
      module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        })
      ])
    }
    webpack.config.js

      4、在App.vue中使用element-ui

    <template>
      <div id="app">
        {{msg}}
    
        <!--图标-->
        <div>
          <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </el-row>
        </div>
    
        <!-- 日期选择器 -->
        <DatePicker></DatePicker>
        <!-- 文件上传 -->
        <Upload></Upload>
      </div>
    </template>
    
    <script>
      // 导入组件
      import DatePicker from './components/DatePicker.vue'
      import Upload from './components/Upload.vue'
    
    export default {
      name: 'app',
      data () {
        return {
          msg: '测试msg'
        }
      },
      components:{
        DatePicker,
        Upload
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    
    h1, h2 {
      font-weight: normal;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    </style>
    App.vue

      5、在src中创建 components/DatePicker.vue components/Upload.vue 两个组件

    <template>
        <el-date-picker
          v-model="value"
          type="date"
          placeholder="选择日期"
          size="small"
          :picker-options="options">
        </el-date-picker>    
    </template>
    
    <script>
        export default {
            data(){
                return {
                    value:'',
                    options:{
                        disabledDate(time) {
                            return time.getTime() < Date.now() - 8.64e7;
                        },
                        firstDayOfWeek:1
                    }
                }
            }
        }
    </script>
    DatePicker.vue
    <template>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
    </template>
    
    <script>
        export default {
            data(){
                return {
                    fileList: [
                            {
                                name: 'food.jpeg', 
                                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                            }, 
                            {
                                name: 'food2.jpeg', 
                                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                            }
                    ]
                }
            },
             methods: {
              handleRemove(file, fileList) {
                console.log(file, fileList);
              },
              handlePreview(file) {
                console.log(file);
              }
            }
        }
    
    </script>
    Upload.vue

         

     

  • 相关阅读:
    网站app被劫持怎么办?HTTPDNS阿里云域名防劫持, DNSPod 移动解析服务 D+
    MySQL数据库读写分离、读负载均衡方案选择
    ubuntu14.04无法安装Curl,需要先升级sudo apt-get update
    PHP获取6位数随机数,获取redis里面不存在的6位随机数(设置24小时过时)
    升级到php7相关问题,日请求过亿QQ会员活动平台PHP7升级实践
    干货阿里巴巴 开源软件列表,先收藏起来
    让前端独立于后端进行开发,模拟数据生成器Mock.js
    左连接LEFT JOIN 连接自己时的查询结果测试
    禁止火狐浏览器缓存input标签方法
    Jquery图片上传组件,支持多文件上传
  • 原文地址:https://www.cnblogs.com/xiaonq/p/9752621.html
Copyright © 2020-2023  润新知