提交 c0b78350 编写于 作者: F Frans

upd(Switch): 优化了快速点击场景下的问题

上级 5aac968b
## 2.1.2
`2019-5-23`
* :sparkles: upd(Slider): 优化了拖动性能
* :sparkles: upd(Range): 优化了拖动性能
* :sparkles: upd(Switch): 优化了快速点击场景下的问题
* :sparkles: upd(CountDown): 优化了diffTime/restTime & 新增了一些事件
* :bug: fix(Calendar极值问题): 修复了极值问题
* :zap: chore: 优化了MD文档编译缓存机制
* :zap: chore: 不再单独构建commonjs包
* :zap: doc: 文档内容修改完善
## 2.1.1
`2019-4-22`
......
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackBaseConf = require('./webpack.base.conf.js');
const rimraf = require('rimraf');
const merge = require('webpack-merge');
rimraf('./dist/nutui.common.js', function (err) {
if (err) console.log(err);
});
module.exports = merge(webpackBaseConf, {
mode: 'production',
devtool: 'source-map',
entry: {
nutui: './src/nutui.js',
},
externals: {
'vue': {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
output: {
path: path.resolve(__dirname, '../dist/'),
filename: 'nutui.common.js',
library: 'nutui',
libraryTarget: 'commonjs2',
umdNamedDefine: true
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
],
optimization: {
minimize: false
}
});
\ No newline at end of file
{
"name": "@nutui/nutui",
"version": "2.1.1",
"version": "2.1.2",
"description": "一套轻量级移动端Vue组件库",
"typings": "dist/types/index.d.ts",
"main": "dist/nutui.js",
......@@ -12,19 +12,18 @@
"CHANGELOG.md"
],
"scripts": {
"dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open --progress --config build/webpack.demo.dev.conf.js",
"build:demo": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.demo.build.conf.js",
"dev:doc": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open -w --progress --config build/webpack.doc.dev.conf.js",
"clear": "node scripts/clearCache.js",
"dev": "npm run dev:demo",
"dev:carefree": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress --config build/webpack.demo.dev.conf.js",
"dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open --progress --config build/webpack.demo.dev.conf.js",
"dev:doc": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open -w --progress --config build/webpack.doc.dev.conf.js",
"build:demo": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.demo.build.conf.js",
"build:doc": "cross-env NODE_ENV=production DOC_TYPE=true webpack --hide-modules --progress --config build/webpack.doc.build.conf.js",
"build:site": "npm run build:demo && npm run build:doc",
"build:prod": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.conf.js && node scripts/createIndexScss.js",
"build:prodmin": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.mini.conf.js",
"build:disp": "cross-env NODE_ENV=production PROD_TYPE=disp webpack --hide-modules --progress --config build/webpack.prod.disperse.conf.js",
"build:cmn": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.cmn.conf.js",
"build": "npm run build:prod && npm run build:prodmin && npm run build:cmn && npm run build:disp",
"build": "npm run build:prod && npm run build:prodmin && npm run build:disp",
"clear": "node scripts/clearCache.js",
"eslint": "eslint src/packages/**/*.{js,vue}",
"add": "node scripts/createCptTpl.js",
"test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha-webpack --webpack-config build/webpack.test.conf.js --require test/setup.js src/packages/*/__test__/**.spec.js",
......
......@@ -3,7 +3,8 @@
padding: 0 $btn-height-small/2;
font-size: $font-size-small;
}
.nut-button{
.nut-button {
cursor: pointer;
height: $btn-height-big;
padding: 0 $btn-height-big;
......@@ -13,11 +14,13 @@
background: $btn-gradient-bg;
border: none;
box-sizing: border-box;
&[disabled] {
cursor: not-allowed;
background: $btn-disable-bg;
color: $btn-disable-color;
}
// type-label
.txt-icon {
vertical-align: text-top;
......@@ -26,65 +29,79 @@
margin-right: $btn-icon-margin;
color: $primary-color;
}
&.red {
background: $btn-default-bg;
border: $border-width-base solid $primary-color;
color: $primary-color;
}
&.gray {
background: $light-color;
color: $title-color;
}
&.light {
color: $title-color;
background: $btn-default-bg;
border: $border-width-base solid $dark-color;
}
&.lightred {
background: $btn-label-light-bg;
color: $title-color;
border: none;
border: none;
}
&.primary {
background: $primary-color;
color: $btn-primary-color;
}
&.default {
background: $btn-default-bg;
color: $title-color;
border: $border-width-base solid $btn-default-border;
}
&.actived {
background: $btn-label-light-bg;
color: $primary-color;
border: $border-width-base solid $primary-color;
}
&.dashed {
&.dashed {
background: $btn-default-bg;
color: $title-color;
border: $border-width-base dashed $dark-color;
}
// 通栏样式
&.block {
width: 100%;
border-radius: 0;
}
// size-小号
&.small {
height: $btn-height-small;
padding: 0 $btn-height-small/2;
font-size: $font-size-small;
}
&.no-txt-small {
width: $btn-height-small;
padding: 0;
.txt-icon {
margin: 0;
}
}
&.no-txt {
width: $btn-height-big;
padding: 0;
.txt-icon {
margin: 0;
}
......
......@@ -5,7 +5,7 @@
常规按钮组
```html
<nut-button-group>
<nut-buttongroup>
<nut-button
type="light"
>
......@@ -14,13 +14,13 @@
<nut-button>
确定
</nut-button>
</nut-button-group>
</nut-buttongroup>
```
圆角按钮组
```html
<nut-button-group
<nut-buttongroup
shape="circle"
>
<nut-button
......@@ -31,13 +31,13 @@
<nut-button>
确定
</nut-button>
</nut-button-group>
</nut-buttongroup>
```
页面底部功能,配合Badge使用
``` html
<nut-button-group
<nut-buttongroup
type="menu"
>
<nut-button
......@@ -81,7 +81,7 @@
>
成功
</nut-button>
</nut-button-group>
</nut-buttongroup>
```
## Prop
......
......@@ -26,7 +26,8 @@ export default {
},
data() {
return {
isActive: false
isActive: false,
isAnimating:false
};
},
created() {
......@@ -39,14 +40,16 @@ export default {
},
methods: {
toggle() {
if(this.isAnimating) return;
const status = this.isActive;
if (!this.disabled) {
this.isActive = !status;
}
this.isAnimating = true;
setTimeout(() => {
this.$emit("change", this.isActive);
this.$emit("update:active", this.isActive);
this.isAnimating = false;
}, 300);
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册