no mousedown, leave, up events bound elements

dxcqcv

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>

b3j0f

Is ok for you to use a div markup around your element ?

No More Posting New Topics!

no mousedown, leave, up events bound elements