no mousedown, leave, up events bound elements



  • My quasar version is 0.14, and I merage quasar to vue-cli and webpack template, so I change some vue-cli config, it works, but there is only one little problem, no showRipple effect when click elements, then I compare quasar-cli that has four events on element click,mousedown,mouseleve and mouseup, but my quasar element only has one event click, I do not know why and how to fix it, so help, thank you very much.

    I show configs I changed for quasar, and github links

    webpack.base.config.js

    var path = require('path')
    var utils = require('./utils')
    var config = require('../config')
    var vueLoaderConfig = require('./vue-loader.conf')
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    module.exports = {
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          // add for quasar
          quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'),
          src: path.resolve(__dirname, '../src'),
          assets: path.resolve(__dirname, '../src/assets'),
          '@': path.resolve(__dirname, '../src/components'),
          variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'),
          // end for quasar
          'vue$': 'vue/dist/vue.esm.js',
          // '@': resolve('src')
        }
      },
      module: {
        rules: [
          {
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [resolve('src'), resolve('test')],
            options: {
              formatter: require('eslint-friendly-formatter')
            }
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      }
    }
    
    

    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>auto-activity</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    

    package.json

    {
      "name": "auto-activity",
      "version": "1.0.0",
      "description": "A Vue.js project",
      "author": "shangwenlong652 <dxcqcv@gmail.com>",
      "private": true,
      "scripts": {
        "server": "node app.js",
        "migrate": "knex --knexfile=./server/config/knexfile.js migrate:latest",
        "rollback": "knex --knexfile=./server/config/knexfile.js migrate:rollback",
        "dev": "node build/dev-server.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js",
        "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
        "e2e": "node test/e2e/runner.js",
        "test": "npm run unit && npm run e2e",
        "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
      },
      "dependencies": {
        "knex": "^0.13.0",
        "koa": "^2.3.0",
        "koa-bodyparser": "^4.2.0",
        "koa-jwt": "^3.2.2",
        "koa-logger": "^3.0.1",
        "koa-router": "^7.2.1",
        "mysql": "^2.13.0",
        "quasar-extras": "0.x",
        "quasar-framework": "git+https://git@github.com/quasarframework/quasar-edge.git",
        "objection": "^0.8.5",
        "vue": "^2.3.3",
        "vue-router": "^2.6.0"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^7.1.1",
        "babel-loader": "^7.1.1",
        "babel-plugin-istanbul": "^4.1.1",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chai": "^3.5.0",
        "chalk": "^2.0.1",
        "chromedriver": "^2.27.2",
        "connect-history-api-fallback": "^1.3.0",
        "copy-webpack-plugin": "^4.0.1",
        "cross-env": "^5.0.1",
        "cross-spawn": "^5.0.1",
        "css-loader": "^0.28.0",
        "cssnano": "^3.10.0",
        "eslint": "^3.19.0",
        "eslint-config-standard": "^6.2.1",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-html": "^3.0.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^2.0.1",
        "eventsource-polyfill": "^0.9.6",
        "express": "^4.14.1",
        "extract-text-webpack-plugin": "^2.0.0",
        "file-loader": "^0.11.1",
        "friendly-errors-webpack-plugin": "^1.1.3",
        "html-webpack-plugin": "^2.28.0",
        "http-proxy-middleware": "^0.17.3",
        "inject-loader": "^3.0.0",
        "karma": "^1.4.1",
        "karma-coverage": "^1.1.1",
        "karma-mocha": "^1.3.0",
        "karma-phantomjs-launcher": "^1.0.2",
        "karma-phantomjs-shim": "^1.4.0",
        "karma-sinon-chai": "^1.3.1",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-spec-reporter": "0.0.31",
        "karma-webpack": "^2.0.2",
        "lolex": "^1.5.2",
        "mocha": "^3.2.0",
        "nightwatch": "^0.9.12",
        "opn": "^5.1.0",
        "optimize-css-assets-webpack-plugin": "^2.0.0",
        "ora": "^1.2.0",
        "phantomjs-prebuilt": "^2.1.14",
        "rimraf": "^2.6.0",
        "selenium-server": "^3.0.1",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "sinon": "^2.1.0",
        "sinon-chai": "^2.8.0",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.1",
        "url-loader": "^0.5.8",
        "vue-loader": "^12.1.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.3.3",
        "webpack": "^2.6.1",
        "webpack-bundle-analyzer": "^2.2.1",
        "webpack-dev-middleware": "^1.10.0",
        "webpack-hot-middleware": "^2.18.0",
        "webpack-merge": "^4.1.0"
      },
      "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }
    
    

    src/main.js

    // const __THEME = 'mat'
    // === DEFAULT / CUSTOM STYLE ===
    // WARNING! always comment out ONE of the two require() calls below.
    // 1. use next line to activate CUSTOM STYLE (./src/themes)
    // require(`./themes/app.${__THEME}.styl`)
    // 2. or, use next line to activate DEFAULT QUASAR STYLE
    // require(`quasar/dist/quasar.${__THEME}.css`)
    require(`quasar/dist/quasar.mat.css`)
    // ==============================
    
    // 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 Quasar from 'quasar'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    Vue.use(Quasar)
    
    import 'quasar-extras/roboto-font'
    
    import 'quasar-extras/material-icons'
    // import 'quasar-extras/ionicons'
    // import 'quasar-extras/fontawesome'
    import 'quasar-extras/animate'
    
    Quasar.start(() => {
      /* eslint-disable no-new */
      new Vue({
        el: '#app',
        router,
        template: '<App/>',
        components: { App }
      })
    })
    
    

    test component,

    <template>
      <q-layout
        ref="layout"
        view="lHh Lpr fff"
      >
        <q-toolbar  slot="header" color="primary" >
              <q-toolbar-title class="row  items-center">
                <q-icon name="account balance" class="on-left" />
                运营活动快速搭建系统  
                <q-search 
                  inverted  
                  color="dark"
                  placeholder="输入项目关键字"
                  class="on-right"
                />
              </q-toolbar-title>
        </q-toolbar>
        
        <q-btn icon="create">New item</q-btn>
        <q-list
          link 
          separator
        >
          <q-list-header>已有项目列表</q-list-header>
          <q-item v-for="n in 3" :key="n">
            <q-item-side icon="folder" inverted color="grey-6" />
            <q-item-main>
              <q-item-tile label>抽奖项目 </q-item-tile>
              <q-item-tile sublabel>测试地址:test2-xxxxxx</q-item-tile>
              <q-item-tile sublabel>产线地址:q.yqb.-xxxxxx</q-item-tile>
            </q-item-main>
            <q-item-side right >
              <q-item-tile stamp >更新时间: {{updateDate}}</q-item-tile>
            </q-item-side>
          </q-item>
    
        </q-list>
    
      </q-layout>
    </template>
    <script>
    import {
      QLayout,
      QToolbar,
      QToolbarTitle,
      QIcon,
      QSearch,
      QList,
      QListHeader,
      QItem,
      QItemSeparator,
      QItemSide,
      QItemMain,
      QItemTile,
      date,
      QBtn,
      QField
    } from 'quasar'
    
    export default {
      name: 'index',
      components: {
        QLayout,
        QToolbar,
        QToolbarTitle,
        QIcon,
        QSearch,
        QList,
        QListHeader,
        QItem,
        QItemSeparator,
        QItemSide,
        QItemMain,
        QItemTile,
        QBtn,
        QField
      },
      computed: {
        updateDate () {
          let timeStamp = new Date()
          let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD')
          return formattedString
        }
      }
    }
    </script>
    
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.