add hover-highlight prop in Table

This commit is contained in:
Lawrence Lee 2017-06-07 14:19:31 +08:00
parent af43876007
commit 2474ee5929
6 changed files with 7596 additions and 9 deletions

View file

@ -0,0 +1,42 @@
/**
* 本地预览
*/
var path = require('path');
var webpack = require('webpack');
// var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var merge = require('webpack-merge');
var webpackBaseConfig = require('./webpack.base.config.js');
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
module.exports = merge(webpackBaseConfig, {
// 入口
entry: {
main: './examples/main',
vendors: ['vue', 'vue-router']
},
// 输出
output: {
path: path.join(__dirname, '../examples/dist'),
publicPath: '',
filename: '[name].js'
// chunkFilename: '[name].chunk.js'
},
resolve: {
alias: {
iview: '../../src/index',
// vue: 'vue/dist/vue.js'
vue: 'vue/dist/vue.runtime.js'
}
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.bundle.js' }),
new HtmlWebpackPlugin({
inject: true,
filename: path.join(__dirname, '../examples/dist/index.html'),
template: path.join(__dirname, '../examples/index.html')
}),
new FriendlyErrorsPlugin()
]
});

15
examples/entry-server.js Normal file
View file

@ -0,0 +1,15 @@
import { createApp } from './main';
export default context => {
return new Promise((resolve, reject) => {
const { app, router } = createApp();
router.push(context.url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents();
if (!matchedComponents.length) {
reject({ code: 404 });
}
resolve(app);
}, reject);
});
};

View file

@ -1,5 +1,7 @@
<template>
<Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
<div>
<Table border :columns="columns7" :data="data6" :hover-highlight="false"></Table>
</div>
</template>
<script>
import etable from '../components/table.vue';
@ -8,17 +10,18 @@
data () {
return {
columns7: [
{
type: 'expand',
width: 50,
render: (h, params) => {
// return h(etable);
return h('div', params.row.name)
}
},
// {
// type: 'expand',
// width: 50,
// render: (h, params) => {
// // return h(etable);
// return h('div', params.row.name)
// }
// },
{
title: '姓名',
key: 'name',
fixed: 'left',
render: (h, params) => {
return h('div', [
h('Icon', {

7501
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

21
server.js Normal file
View file

@ -0,0 +1,21 @@
const createApp = require('./dist/iview.ssr.js');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();
server.get('*', (req, res) => {
const context = { url: req.url };
createApp(context).then(app => {
renderer.renderToString(app, (err, html) => {
if (err) {
if (err.code === 404) {
res.status(404).end('Page not found')
} else {
res.status(500).end('Internal Server Error')
}
} else {
res.end(html);
}
});
});
});
server.listen(2333);

View file

@ -152,6 +152,9 @@
},
noFilteredDataText: {
type: String
},
hoverHighlight: {
type: Boolean
}
},
data () {
@ -351,10 +354,12 @@
});
},
handleMouseIn (_index) {
if (!this.hoverHighlight) return;
if (this.objData[_index]._isHover) return;
this.objData[_index]._isHover = true;
},
handleMouseOut (_index) {
if (!this.hoverHighlight) return;
this.objData[_index]._isHover = false;
},
highlightCurrentRow (_index) {